how to reduce the svg path in web page - svg

I want to reduce the size of search icon in web page (which is a facelets file). Can anyone suggest how it can be possible.
my current code of jsf is
<div>
<a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg version="1.1" id="_x39_ac692fd-fab4-4127-97e6-094d15a4d3bc" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<path class="st0" d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7
s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6
C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8
C160.1,527.5,94.7,462,94.7,381.7z"></path>
</svg>
<p>Advance search</p>
</a>
</div>

You can use CSS to select and style the <svg> element just as you would any other element in an HTML document.
In this situation you might use the following (attribute) selector:
a[href="search.html"] svg {
width: 100px;
height: 100px;
}
Working Example:
a[href="search.html"] svg {
width: 100px;
height: 100px;
}
<div>
<a href="search.html" class="nav-item toggler collapsed" data-toggle="collapse" data-target="#advancesearch" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 595.3 841.9">
<path d="M509.9,643.5L354.8,488.4c26.4-28,42.4-65.5,42.4-106.7c0-86.4-70.4-156.7-156.7-156.7S83.7,295.4,83.7,381.7 s70.4,156.8,156.8,156.8c41.2,0,78.6-16,106.7-41.8l155.1,155.1c1.1,1.1,2.8,1.6,3.9,1.6s2.8-0.5,3.9-1.6 C512.1,649,512.1,645.7,509.9,643.5z M94.7,381.7c0-80.3,65.5-145.7,145.8-145.7s145.7,65.5,145.7,145.7s-65.5,145.8-145.7,145.8 C160.1,527.5,94.7,462,94.7,381.7z"></path>
</svg>
<p>Advance search</p>
</a>
</div>

Related

How do i add the svg files next to my table rows sow they would look neat like in the photo attched

So i am building my website for transportation services.
in the form where i ask the user for "pickup" and "destination" i want to achieve a neat Googlish look.
You can see googles "from" and "to" form here:
This is the Google wanted style
This is What i got
https://www.google.com/search?q=get+a+ride&oq=get+a+ride&aqs=chrome.0.69i59l3j0j69i60j0.1495j0j4&sourceid=chrome&ie=UTF-8
(it shows only in mobile view)
now the way i have tried was inserting the svg paths inside the table like this: (Don't mind the Rtl direction i need it that way)
<table>
<tbody>
<tr>
<td rowspan="2"><input type="text" name="place_from" id="from-input" class="txt" placeholder="From" /></td> .
<td><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="10px" height="10px" viewBox="0 65.326 612 502.174" enable-background="new 0 65.326 612 502.174"
xml:space="preserve" class="dot-circle">
<path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/>
</svg></td>
</tr>
<tr>
<td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#878787;}
</style>
<path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/>
</svg></td>
</tr>
<tr>
<td rowspan="2"><input type="text" name="place_to" id="to-input" class="txt" placeholder="To" /></td>
<td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#878787;}
</style>
<path class="st0" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"/>
</svg></td>
</tr>
<tr>
<td><svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#878787;}
</style>
<path class="st0" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272z"/>
</svg></td>
</tr>
</tbody>
</table>
As you see, it looks bad and my question is what is the best method to get the closest to what google has?
Here is the link for my website so far: http://moveus.co.il/wp/moveus/
------Update!
I have tried creating a table with <div>s and got a similar result but higher margins which i cant seam to affect with css:
This is what i achieved with div table
.tablewrapper {
position: relative;
}
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
border: 1px solid ;
display: table-cell;
}
.cell.empty
{
border: none;
width: 100px;
}
.cell.rowspanned {
position: absolute;
top: 0;
bottom: 0;
width: 100px;
}
.st0 {
fill:#878787;
transform: scale(0.1);
}
.st1 {
fill:#878787;
transform: scale(0.2);
}
.st4 {
fill:#878787;
transform: scale(0.2);
}
<div class="tablewrapper">
<div class="table">
<div class="row">
<div class="cell"><input type="text" name="place_from" id="from-input" class="txt" /></div>
<div class="rowspanned cell" >
</svg>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="default">
<path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256
c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"/>
</svg>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
/>
</svg>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
/>
</svg>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path class="st1" d="M256,504 M335.8,256c0,44-35.8,79.8-79.8,79.8S176.2,300,176.2,256s35.8-79.8,79.8-79.8S335.8,212,335.8,256z"
/>
</svg>
<svg version="1.1" id="Layer_1" focusable="false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" viewBox="0 0 384 512" style="enable-background:new 0 0 384 512;" xml:space="preserve">
<path class="st4" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7
C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272
z"/>
</svg>
</svg>
</div>
</div>
<div class="row">
<div class="cell"><input type="text" name="place_to" id="to-input" class="txt" /></div>
<div class="empty cell"> </div>
</div>
</div>
</div>
You'll find it a lot easier if you merge your five SVGs into one SVG.
Then you can use flex-box to stack your inputs into a column. Then use flex-box again to put that stack and your SVG into a row.
[ I N P U T ] SVG
s p a c e r SVG
[ I N P U T ] SVG
Demo:
.form {
display: flex;
flex-direction: row;
}
.form input {
height: 27px;
}
.form .spacer {
height: 27px;
}
.form .svg {
padding-left: 1em;
}
svg {
width: 27px;
height: 100%;
}
.st0 {
fill:#878787;
}
.st1 {
fill:#878787;
}
.st4 {
fill:#878787;
}
<div class="form">
<div class="field-column">
<div><input type="text" name="place_from" id="from-input" class="txt" /></div>
<div class="spacer"></div>
<div><input type="text" name="place_to" id="to-input" class="txt" /></div>
</div>
<div class="svg">
<svg viewBox="0 0 512 1536">
<path class="st0" d="M256,8C119,8,8,119,8,256s111,248,248,248s248-111,248-248S393,8,256,8z M366.9,256c0,61.1-49.7,110.9-110.9,110.9S145.1,317.1,145.1,256S194.9,145.1,256,145.1S366.9,194.9,366.9,256z"
transform="translate(58,0) scale(0.77, 0.77)"/>
<circle class="st1" cx="256" cy="540" r="60"/>
<circle class="st1" cx="256" cy="750" r="60"/>
<circle class="st1" cx="256" cy="960" r="60"/>
<path class="st4" d="M172.3,501.7C27,291,0,269.4,0,192C0,86,86,0,192,0s192,86,192,192c0,77.4-27,99-172.3,309.7 C202.2,515.4,181.8,515.4,172.3,501.7L172.3,501.7z M192,272c44.2,0,80-35.8,80-80s-35.8-80-80-80s-80,35.8-80,80S147.8,272,192,272z"
transform="translate(58,1120)"/>
</svg>
</div>
</div>

Shadow Root? Calling out stroke color

I am calling out a stroke in an SVG, it works if I don't put any class on the style. But I need to put it there because needed to be fixable for the end user to pick any color they want.
symbol#icon-arrow{
stroke: #ff6600;
} /*this is working*/
.icon-orange symbol#icon-arrow{
stroke: #99CA3D;
} /*this is not working, but this is what I need*/
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
As #enxaneta said, you have to style the <use> element, and let the colour percolate down to the symbol.
But you'll first need to remove the stroke attribute from the symbol. Otherwise that presentation attribute will override the colour you want it to inherit.
.icon-orange use {
stroke: #ff6600;
}
.icon-green use {
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow"></use></svg>
</a>
<a href="#" class="icon">
<svg class="icon icon-green"><use xlink:href="#icon-arrow"></use></svg>
</a>
Inside the .icon-orange there is a <use> element. You have to style the use element. However if you need to refer the #icon-arrow here is how you can do it:
/*declare the namespace xlink*/
#namespace xlink "http://www.w3.org/1999/xlink";
/*style the use element inside the icon-orange whose's xlink:herf attribute is the icon arrow*/
.icon-orange use[xlink|href ="#icon-arrow" ]{
stroke: #99CA3D;
}
<div id="icon-load" style="display:none;"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
<symbol id="icon-arrow" viewBox="0 0 24 24" fill="none" stroke-width="3" stroke-linecap="square" stroke-linejoin="arcs" >
<path class="arrow" d="M12 19V6M5 12l7-7 7 7"/>
</symbol>
</svg>
<a href="#" class="icon">
<svg class="icon icon-orange"><use xlink:href="#icon-arrow" width="24" height="24"></use></svg>
</a>

SVG 100vh height, with auto/responsive width?

Is there a simple way to have an SVG inside a div respond to the parent container's height and adjust the width accordingly?
<div class="wrapper">
<div class="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
<title>SVG FULL HEIGHT</title>
<g id="Layer_2" data-name="Layer 2">
<g id="export">
<path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
</g>
</g>
</svg>
</div>
</div>
FIDDLE
Set the SVG to 100vh.
body {
margin: 0;
padding: 0;
}
.svg-wrap svg {
height: 100vh;
}
.wrapper {
background: #CCC;
}
.cls-1 {
fill: #ffcc00;
}
<div class="wrapper">
<div class="svg-wrap">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192.75 512">
<title>SVG FULL HEIGHT</title>
<g id="Layer_2" data-name="Layer 2">
<g id="export">
<path class="cls-1" d="M41.71,256c0-110.21,61-206.16,151-256H0V512H192.75C102.7,462.16,41.71,366.21,41.71,256Z" />
</g>
</g>
</svg>
</div>
</div>

How to select HTML element by id/class inside foreignobject inside SVG using raw JS

The SVG is hardcoded inside the HTML of the HTML page. The HTML inside the foreignobject is working and responding to direct editing inside the code editor, but I cant select/manipulate the style of the elements using raw JS.
<body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgId" version="1.1">
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="50" height="50">
<div id="toModify" style="left:10px;"></div>
</foreignObject>
</svg>
</div>
document.?????('toModify').style.left = 20 + 'px';
var thing = document.getElementById("toModify")
console.log(thing)
thing.style.left = 20 + 'px'
console.log(thing)
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svgId" version="1.1">
<foreignObject requiredExtensions="http://www.w3.org/1999/xhtml" width="50" height="50">
<div id="toModify" style="left:10px;"></div>
</foreignObject>
</svg>
</div>
I think this is what you want?

Sizing of svg element using elements with negative coordinates

When I create an svg element that contains objects with negative coordinates as shown in this jfiddle: http://jsfiddle.net/QGq3H/1/
<div class="row">
<div class="col-sm-6">
<div style="display:inline-block; height:100px;"></div>
</div>
</div>
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<svg class="svg-element" xmlns="http://www.w3.org/2000/svg" width="100" version="1.1" height="60">
<rect fill-opacity="0" style="fill-opacity: 0;" stroke="none" fill="#000000" ry="0" rx="0" r="0" height="60" width="100" y="0" x="0"></rect>
<circle cy="-50" cx="-50" style="" stroke="none" fill="#000000" r="10"></circle>
</svg>
</div>
</div>
In Chrome and IE the svg element has the same size as the visible part, in Firefox the svg is actually larger than the visible part. This is a problem when I want to get mouse coordinates relative to the svg element.
Which browser is correct? Is there a good workaround?

Resources