SVG Displaying differently in firefox and chrome - google-chrome

I am new to using svgs. The following displays perfectly in chrome but not in firefox
<svg enable-background="new 0 0 100 180" version="1.1" viewBox="0 0 100 180" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<path d="M5.42,98.416c0,10.229,29.518,22.016,45.854,22.016c17.664,0,45.854-13.787,45.854-22.016H5.42z" />
<path d="M49.063,95.832l0.062-66.375c-15.151,0-27.847,20.626-27.847,45.951c0,7.125,1.675,14.408,3.41,20.424H49.063z" />
<path d="M51.668,95.887L51.612,4.096c18.097,0,32.768,28.354,32.768,63.33c0,9.842-2.1,20.16-4.172,28.469L51.668,95.887z" />
</svg>
Is there something I can add to make it work in firefox?

Related

How can I see the icons inside the SVG file?

I want to see all the icons inside the SVG file. I have tried to insert it into the HTML file with an img tag but I see a blank page.
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-triangle-left" viewBox="0 0 20 20">
<title>triangle-left</title>
<path d="M14 5v10l-9-5 9-5z"></path>
</symbol>
<symbol id="icon-triangle-right" viewBox="0 0 20 20">
<title>triangle-right</title>
<path d="M15 10l-9 5v-10l9 5z"></path>
</symbol>
<symbol id="icon-check" viewBox="0 0 20 20">
<title>check</title>
<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
</symbol>
</defs>
</svg>

The code you provided contains only <symbols>. This is used to house SVG definitions that can be reused in different parts of the document. You would use them like this:
<svg>
<use xlink:href="#icon-triangle-left" />
</svg>
Live test: https://codepen.io/guilhermemuller/pen/NWqddGp

How could I remove empty spaces between the cloud and the border?

svg {
border: 1px solid #000;
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998
c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205
c6.627,0,11.999,5.373,11.999,12c0,6.625-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639
c4.418,0,8-3.582,8-7.998c0-4.418-3.582-8-8-8c-1.6,0-3.082,0.481-4.333,1.291c-1.231-5.316-5.974-9.29-11.665-9.29
c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>
-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639
c4.418,0,8-3.582,8-7.998c0-4.418-3.582-8-8-8c-1.6,0-3.082,0.481-4.333,1.291c-1.231-5.316-5.974-9.29-11.665-9.29
c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>

I still don't know how would you like it so I've made 2 versions
svg{border:1px solid;}
<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="100" height="72,73" viewBox="27.946 33.642 44 32" >
<path id="test" fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998
c0-8.836,7.163-15.998,15.998-15.998c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205
c6.627,0,11.999,5.373,11.999,12c0,6.625-5.372,11.998-11.999,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639
c4.418,0,8-3.582,8-7.998c0-4.418-3.582-8-8-8c-1.6,0-3.082,0.481-4.333,1.291c-1.231-5.316-5.974-9.29-11.665-9.29
c-6.626,0-11.998,5.372-11.998,11.999c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>
<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="100" height="100" viewBox="27.946 27.642 44 44" >
<use xlink:href="#test" />
</svg>
How did I do it: I've used the method getBBox() for the cloud path. This method returns the size and position of the bounding box of a path. I've used this data to change the value for the viewBox attribute.

svg {
border: 1px solid #000;
}
<svg width="43.994999" height="31.996" xmlns="http://www.w3.org/2000/svg">
<path fill="red" fill-rule="evenodd" clip-rule="evenodd" d="m15.997999,31.996c-8.835,0 -15.998,-7.162 -15.998,-15.998c0,-8.836 7.163,-15.998 15.998,-15.998c6.004,0 11.229,3.312 13.965,8.203c0.664,-0.113 1.338,-0.205 2.033,-0.205c6.627,0 11.999,5.373 11.999,12c0,6.625 -5.372,11.998 -11.999,11.998c-2.775,0 -12.8,0 -15.998,0zm15.998,-4c4.418,0 8,-3.582 8,-7.998c0,-4.418 -3.582,-8 -8,-8c-1.6,0 -3.082,0.481 -4.333,1.291c-1.231,-5.316 -5.974,-9.29 -11.665,-9.29c-6.626,0 -11.998,5.372 -11.998,11.999c0,6.626 5.372,11.998 11.998,11.998c3.617,0 12.979,0 15.998,0z"/>
</svg>

I need delete this line on svg

I'm drawing a svg in html, when i draw this i get that line
and i dont want it, how i can sove it, this is my code
html
<svg style="background-color: #fff" version="1.1" xmlns="http://www.w3.org/2000/svg" height="100" width="100%" viewBox="0 0 100 20" preserveAspectRatio="none">
<path fill="#f2f2f2" d="M0 30 V12 Q30 17 55 5 T100 11 V30z" />
</svg>
after the line is another dive, its like a space between svg and another div

That line isn't part of your SVG shape- the height of your shape is 30px but your viewbox is only 20px high - you just need to change viewBox="0 0 100 20" to viewBox="0 0 100 30" so that the whole shape is in your viewport.

I opened it up in illustrator and that line is actually the edge of the artboard. I resized the art board and re-exported the code. I hope this helps. Unfortunately it did cram in some extra info.
<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"
viewBox="0 0 1440 150" style="enable-background:new 0 0 1440 150;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#F2F2F2;}
</style>
<path class="st0" d="z"/>
<path class="st1" d="M0,150V60c288,16.7,552,5,792-35s456-30,648,30v95H0z"/>
<path class="st0" d="z"/>
</svg>

SVG shapes is jagged even with antialiasing turned on

I have an svg image of two polygons in 220x220px container but I wonder if I can make the edges antialiased better?
http://jsfiddle.net/swist666/1Lk692xb/
<div class="container">
<svg version="1.1" id="ob" 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" enable-background="new 0 0 595.3 841.9" xml:space="preserve">
<g id="LOGO">
<polygon points="311,374.7 417.7,401.7 565.4,380.8 438.6,342.4 "/>
<polygon points="298.4,370 426.9,337.5 298.4,298.5 169.9,337.5 "/>
</g>
</svg>
</div>
I have beed playing around with shape-rendering and that was not what I'm looking for.

svg: change fill color using css

I have this svg file which I want to use with different colors
I have tried the following
<object type="image/svg+xml" width="100" height="100" data="todo.svg">
<span/>
</object>
(Not sure if OBJECT is the correct element for this)
Here is the content of todo.svg
<svg version="1.1" id="Layer_1" xmlns="..." x="0px" y="0px"
width="156px" height="141.6px" viewBox="0 0 156 141.6" enable-background="new 0 0 156 141.6" xml:space="preserve">
<g>
....
<g id="bar">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#000" d="..."/>
</g>
</g>
....
So in the css I tried to style this as follows
#bar path { fill: #444; }
Doesn't work :( Any suggestions how I can change this svg property using css ?