How to fill colour in SVG? - css

As you can see there is leaf kind of design now I want to fill color inside path. How can I fill color in path?
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
<g>
<path xmlns="http://www.w3.org/2000/svg" d="M474.3317,189.2365c-9.7141-25.1595-21.4157-47.0413-34.8712-65.4135c-0.5832-0.8164-7.5508-9.8753-7.6021-9.942 c-0.0513,0.0667-7.0189,9.1256-7.6021,9.942c-13.4555,18.3722-25.1571,40.2539-34.8712,65.4135 c-13.9874,35.9658-14.1643,68.3462-0.6634,97.151c1.2557-0.5663,2.4781-1.0043,3.6282-1.336l0.1813-0.0521l0.183-0.0455 c1.747-0.4327,3.7561-0.7359,5.9563-0.7779l-0.2059-0.4545l-0.1166-0.2484c-13.0646-26.8498-12.9622-56.4951,0.3218-90.6519 c9.2159-23.8686,20.3643-44.8814,33.1884-62.5314c12.7972,17.5991,23.9612,38.633,33.1972,62.5545 c13.2753,34.1338,13.3776,63.7791,0.3135,90.6289l-0.0598,0.1234l-0.2436,0.538c2.2451,0.0332,4.2935,0.339,6.0707,0.7792 l0.183,0.0456l0.1814,0.052c1.1206,0.3232,2.3106,0.75,3.5324,1.2952C488.4956,257.522,488.306,225.1686,474.3317,189.2365z"/>
</g>
</svg>


Your figure is drawn in a double closed contour.
Therefore, only the area between the two contours is filled.
To fill the entire shape with color, you need to draw it with a single outline.
Below is a single contour figure.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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="864px" height="864px" viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
<g>
<path fill="purple" stroke="black" stroke-width="2" d="m475 286.3c13.5-28.8 13.3-61.1-0.7-97.1-9.7-25.2-21.4-47-34.9-65.4-0.6-0.8-7.6-9.9-7.6-9.9-0.1 0.1-7 9.1-7.6 9.9-13.5 18.4-25.2 40.3-34.9 65.4-14 36-14.2 68.3-0.7 97.2 31.8 1.1 64.6-0.2 86.3-0.1"/>
</g>
</svg>


As #Alexandr_TT mention in his answer you need to simplify the path: next comes your simplified path you can fill:
svg{border:1px solid; width:100vh;}
<svg viewBox="0 0 864 864" enable-background="new 0 0 864 864" xml:space="preserve">
<g>
<path fill="green" stroke="black" stroke-width="5"
d="M475.033, 286.3066
C488.4956, 257.522 488.306, 225.1686 474.3317, 189.2365
C464.6176, 164.077 452.916, 142.1952 439.4605, 123.823
C438.8773, 123.0066 431.9097, 113.9477 431.8584, 113.881
C431.8071, 113.9477 424.8395, 123.0066 424.2563, 123.823
C410.8008, 142.1952 399.0992, 164.0769 389.3851, 189.2365
C375.3977, 225.2023 375.2208, 257.5827 388.7217, 286.3875
" />
</g>
</svg>

Related

Bootstrap is blocking of the display of inline svg

I see <svg> is working in html file and i moved in an asp.net project. Firstly, it was ok. But after adding bootstrap.min.css svg dissapers on the page.
How can i use <svg> tags with Bootstrap 4?
SVG Code:
<svg version="1.1" class="mysvg" 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">
<g>
<g>
<path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0 c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7 C514.5,101.703,514.499,85.494,504.502,75.496z"></path>
</g>
</g>
</svg>
Note: You can see in the HTML code of svg via F12 Developer View but you can not see on the page.

Using Google Font in SVG?

I am having a lot of trouble getting my SVGs to display the Google font, Lato. I read similar questions about this and tried to implement what I learned. For what it's worth, the font does display on my computer (because I have the Google font installed), but it does not elsewhere.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 360 260" style="enable-background:new 0 0 360 260;" xml:space="preserve">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato');
.st0{fill:#ECF0F1;}
.st1{fill:none;}
.st2{fill:#34495E;stroke:#34495E;stroke-width:0.25;stroke-miterlimit:10;}
.st3{'Lato', sans-serif;}
.st4{font-size:35px;}
.st5{fill:none;stroke:#34495E;stroke-width:3;stroke-miterlimit:10;}
.st6{font-weight: 'lighter';}
.st7{fill:#34495E;}
</style>
<title>hangman_game</title>
<rect class="st0" width="360" height="260"/>
<rect x="-8.7" y="207.2" class="st1" width="377.4" height="33"/>
<text transform="matrix(1 0 0 1 12.5111 232.7089)" class="st3 st4 st7" font-weight="300">Colombia Infographics</text>
<g>
<g>
<g>
<path class="st5" d="M117.4,133c0.3-0.8,1.2-1.8,1.3-2.5c0.3-1.2-0.5-2.1-0.3-3.2c0.3-1.9,2.4-3.1,2.5-5.2c1.2-0.6,1-0.1,1.9-1.3
c0.5,0.6,1.4,0.6,1.8,0.9c0.9-1.3,1.9-0.6,3.2-1.6c1.2-0.9,1.5-2.4,2.4-3.5c2.4-2.8,5.4-5,7.6-7.9c-0.9-0.8-1.9-1.3-3.1-1.4
c0.1-0.8-0.3-1.9-0.1-2.8c-0.4,0.5-1.4,0.8-1.8,1.2c-2-3.1-1-2,0-4.9c0.4-1.2,0.8-3,0.8-4.4c-0.1-2.2-4.1-8.4,1.3-7.5
c0.2-0.8,0.1-2-0.3-2.7c-1-0.4-1.9-0.6-3-0.7c-0.5-3.1,3.4-2.5,1.1-5.5c-0.2-0.2-1.5-0.1-2.1-0.7c-0.8-0.8-1-1.9-1.3-3
c-0.8-2.6-0.9-5.2,0.6-7.1c0.5-0.6,1.6-0.5,2.3-1.5c0.7-0.8,0.9-2.5,1.4-3.5c-1.9-1.3-1.9-6.5,1.3-5.6c1.5,0.4,0.5,1.4,1.3,2.4
c0.2,0.2,1.4,0.3,1.5,0.7c0,0.1,0.1,1.7,0.1,1.7c0.4,1-1.7,1.4,0.9,2.1c1.9,0.5,2.4-0.3,2.2-2.3c-0.2-2.3-3.2-3.5-1.5-6.1
c4,0.3,3.9-3.3,7.1-5.1c2.9-1.6,6.9-1.6,5.9-6.2c-1.3-0.2-1.9-0.1-2.5,1.1c-0.2-1.8,1.2-3.5,2.2-4.9c0.9-1.3,1.6-3.8,2.4-4.8
c3-3.4,6.1-2.6,9.8-2.4c-0.7,0.8-1.2,1.7-1.5,2.7c0.5,0.4,1.2,0.6,1.8,0.6c1.1-2.5,1.5-3.4,1.7-6.2c1.8-0.1,2.7-1.2,4.4-1.6
s3.6,0.2,5.4-0.1c3.7-0.5,6-2.9,9.3-4.4c-0.2-0.7,0-1.4-0.5-2.1c1.1-1.2,5.1-2.6,6.5-3.1c2.7-0.8,5.9-0.3,6.9,2.4
c-2.2,1.5-5.6,1.6-7.6,3.1s-2.6,3.9-4.9,6c-3.3,3.1-8.6,7.8-8.6,12.7c0,1.2,0.7,2.4,0.3,3.8c-0.3,1.1-2.2,2.9-2.1,3.7
c0.3,2.4,1.9,0.2,2.8,0.9c1.1,0.9,1.2,2.2,1.8,3.5c1,2.4,3.3,4.9,4.1,7.4c0.7,2.3-0.8,4.9,0.7,6.8c1.6,1.9,6.9,3.8,9.3,3.8
c1.3-2.6,2.7,0,4,0.1c1.4,0.1,2.5-1.1,4.1-0.9c2.8,0.3,7.3,4.4,9.3,6.1c1,0.9,3.2,3.8,4.4,3.9c0.9,0.1,1.5-1.3,2.5-1.3
c1.3,0,1.7,1.1,2.8,1.3c1.9,0.3,3.1-0.7,5-1c1.6-0.2,3.3,0.6,5,0c0.3,2.3,3.7,2.6,3.5,5.3c-0.2,2.1-3.8,4.6-5.9,4.4
c-1,2,0.4,2.2,0.6,3.4c0.2,1.6-0.1,3-0.1,4.6c0,2.7,0,6.3,0.9,9.1c0.3,1,1.7,1.7,1.7,3.4c0,1.4-0.7,2.5-1.3,3.8
c-0.5,0.9-2.2,2.8-1.6,4.1c0.6,1.3,1.8,1.2,2.8,0c3.1,2.5,3.2,2.8,3.7,6.8c0.2,2.2,0.8,4.8,0.6,7.5c-1.2-1.8-1.4-6.2-3-7.5
c-2.4-2-4.4,0.7-6.6,1c-1.4,0.2-2.5-0.4-4-0.1c-1.1,0.3-2.3,1.1-3.6,1.3c-2.9,0.4-6.1-0.6-9,0.3c-0.4,1.3-0.5,3.2,0.3,4.4
c0.9,1.3,2,0.5,2.8,1.2c1.4,1.3,3,4.1,1,5.3c1.2,0,2.2,0.4,2.7,1.3c-3.3,2.7-2.9-0.6-5.4-0.4c-1,0.1-2,1.8-2.7,2.3
c-1.9,1.4-1.4-1-2,1.8c-0.7,3.6,1.5,3.9,3.5,5.6c1.7,1.5,2.5,4.1,3,6.1c1.6,5.7,1.1,14-2,19c-1.6,2.5-1.6,3.7-2.2,6.6
c-0.4,1.7-1,5.1-2.9,6c0-0.6-0.5-1.7-0.4-2.5c-1.7-0.3-2.6,0.6-4.3,0.5c-0.9-0.9-0.1-0.8-1.6-1.3c1.7-3.6,5.5-8.1,5.9-12.1
c-0.4,0.2-1,0.2-1.5,0.6c-1.2-1.6-1.8-2.9-3.8-4c-0.3,0.4-0.9,0.8-1.2,1.1c-0.2-3.1-2.9-0.9-4.7-0.5c-1.4,0.3-1.1,0.3-3,0
c-1.4-0.2-2.2-0.9-3.7-0.7c-1.7,0.3-2.8,1.8-4.6,1.8c-0.6,0-2.4-0.6-3.2-0.6c-1.6,0-5.4,1.5-5.3-1.2c2.3-0.8,1.8-2,0.6-3.4
c-0.3-0.4-1.9-0.1-2.1-0.4c-0.7-0.9,0-1.9-0.4-2.8c-0.6-1.5-0.8-2.6-2.5-3.5s-3.2,0.1-4.6-1.4c0.2,0.1,0.5,0.3,0.7,0.3
c-1.5-1.2-2.4-1.9-3.3-3.5c-1-1.7-1.3-3.8-3.2-4.9c-3.1-1.9-7.2-0.9-9.5-4.4c0.3-0.1,0.8-0.3,1.1-0.4c-1.7-1-10.7-3.4-8.1,1.6
c-1.5-0.3-3.2-0.1-4.6-0.7c-1.3-0.5-1.9-1.9-3.5-2.4c-1-0.3-3.6,0.5-4.4,0c-1.8-1.4,0.8-2.7,0-4c-0.8-1.4-2.9-0.8-4.1-1.2
c-1-0.4-2.7-1.5-3.7-2c-2-1.3-4-4.5-6.5-4.7c0.8,1-0.4,0.8-0.4,1.6"/>
</g>
</g>
</g>
</svg>
Note, the SVG was generated by Illustrator then I changed the styling and added in the google font in the style bracket. Is something going wrong with the XML tag in the beginning?
https://jsfiddle.net/8h14px69/

You are simply missing font-family in the .st3 class.
It should be
.st3{font-family:'Lato', sans-serif;}
instead of
.st3{'Lato', sans-serif;}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 360 260" style="enable-background:new 0 0 360 260;" xml:space="preserve">
<style type="text/css">
#import url('https://fonts.googleapis.com/css?family=Lato');
.st0{fill:#ECF0F1;}
.st1{fill:none;}
.st2{fill:#34495E;stroke:#34495E;stroke-width:0.25;stroke-miterlimit:10;}
.st3{font-family:'Lato', sans-serif;}
.st4{font-size:35px;}
.st5{fill:none;stroke:#34495E;stroke-width:3;stroke-miterlimit:10;}
.st6{font-weight: 'lighter';}
.st7{fill:#34495E;}
</style>
<title>hangman_game</title>
<rect class="st0" width="360" height="260"/>
<rect x="-8.7" y="207.2" class="st1" width="377.4" height="33"/>
<text transform="matrix(1 0 0 1 12.5111 232.7089)" class="st3 st4 st7" font-weight="300">Colombia Infographics</text>
<g>
<g>
<g>
<path class="st5" d="M117.4,133c0.3-0.8,1.2-1.8,1.3-2.5c0.3-1.2-0.5-2.1-0.3-3.2c0.3-1.9,2.4-3.1,2.5-5.2c1.2-0.6,1-0.1,1.9-1.3
c0.5,0.6,1.4,0.6,1.8,0.9c0.9-1.3,1.9-0.6,3.2-1.6c1.2-0.9,1.5-2.4,2.4-3.5c2.4-2.8,5.4-5,7.6-7.9c-0.9-0.8-1.9-1.3-3.1-1.4
c0.1-0.8-0.3-1.9-0.1-2.8c-0.4,0.5-1.4,0.8-1.8,1.2c-2-3.1-1-2,0-4.9c0.4-1.2,0.8-3,0.8-4.4c-0.1-2.2-4.1-8.4,1.3-7.5
c0.2-0.8,0.1-2-0.3-2.7c-1-0.4-1.9-0.6-3-0.7c-0.5-3.1,3.4-2.5,1.1-5.5c-0.2-0.2-1.5-0.1-2.1-0.7c-0.8-0.8-1-1.9-1.3-3
c-0.8-2.6-0.9-5.2,0.6-7.1c0.5-0.6,1.6-0.5,2.3-1.5c0.7-0.8,0.9-2.5,1.4-3.5c-1.9-1.3-1.9-6.5,1.3-5.6c1.5,0.4,0.5,1.4,1.3,2.4
c0.2,0.2,1.4,0.3,1.5,0.7c0,0.1,0.1,1.7,0.1,1.7c0.4,1-1.7,1.4,0.9,2.1c1.9,0.5,2.4-0.3,2.2-2.3c-0.2-2.3-3.2-3.5-1.5-6.1
c4,0.3,3.9-3.3,7.1-5.1c2.9-1.6,6.9-1.6,5.9-6.2c-1.3-0.2-1.9-0.1-2.5,1.1c-0.2-1.8,1.2-3.5,2.2-4.9c0.9-1.3,1.6-3.8,2.4-4.8
c3-3.4,6.1-2.6,9.8-2.4c-0.7,0.8-1.2,1.7-1.5,2.7c0.5,0.4,1.2,0.6,1.8,0.6c1.1-2.5,1.5-3.4,1.7-6.2c1.8-0.1,2.7-1.2,4.4-1.6
s3.6,0.2,5.4-0.1c3.7-0.5,6-2.9,9.3-4.4c-0.2-0.7,0-1.4-0.5-2.1c1.1-1.2,5.1-2.6,6.5-3.1c2.7-0.8,5.9-0.3,6.9,2.4
c-2.2,1.5-5.6,1.6-7.6,3.1s-2.6,3.9-4.9,6c-3.3,3.1-8.6,7.8-8.6,12.7c0,1.2,0.7,2.4,0.3,3.8c-0.3,1.1-2.2,2.9-2.1,3.7
c0.3,2.4,1.9,0.2,2.8,0.9c1.1,0.9,1.2,2.2,1.8,3.5c1,2.4,3.3,4.9,4.1,7.4c0.7,2.3-0.8,4.9,0.7,6.8c1.6,1.9,6.9,3.8,9.3,3.8
c1.3-2.6,2.7,0,4,0.1c1.4,0.1,2.5-1.1,4.1-0.9c2.8,0.3,7.3,4.4,9.3,6.1c1,0.9,3.2,3.8,4.4,3.9c0.9,0.1,1.5-1.3,2.5-1.3
c1.3,0,1.7,1.1,2.8,1.3c1.9,0.3,3.1-0.7,5-1c1.6-0.2,3.3,0.6,5,0c0.3,2.3,3.7,2.6,3.5,5.3c-0.2,2.1-3.8,4.6-5.9,4.4
c-1,2,0.4,2.2,0.6,3.4c0.2,1.6-0.1,3-0.1,4.6c0,2.7,0,6.3,0.9,9.1c0.3,1,1.7,1.7,1.7,3.4c0,1.4-0.7,2.5-1.3,3.8
c-0.5,0.9-2.2,2.8-1.6,4.1c0.6,1.3,1.8,1.2,2.8,0c3.1,2.5,3.2,2.8,3.7,6.8c0.2,2.2,0.8,4.8,0.6,7.5c-1.2-1.8-1.4-6.2-3-7.5
c-2.4-2-4.4,0.7-6.6,1c-1.4,0.2-2.5-0.4-4-0.1c-1.1,0.3-2.3,1.1-3.6,1.3c-2.9,0.4-6.1-0.6-9,0.3c-0.4,1.3-0.5,3.2,0.3,4.4
c0.9,1.3,2,0.5,2.8,1.2c1.4,1.3,3,4.1,1,5.3c1.2,0,2.2,0.4,2.7,1.3c-3.3,2.7-2.9-0.6-5.4-0.4c-1,0.1-2,1.8-2.7,2.3
c-1.9,1.4-1.4-1-2,1.8c-0.7,3.6,1.5,3.9,3.5,5.6c1.7,1.5,2.5,4.1,3,6.1c1.6,5.7,1.1,14-2,19c-1.6,2.5-1.6,3.7-2.2,6.6
c-0.4,1.7-1,5.1-2.9,6c0-0.6-0.5-1.7-0.4-2.5c-1.7-0.3-2.6,0.6-4.3,0.5c-0.9-0.9-0.1-0.8-1.6-1.3c1.7-3.6,5.5-8.1,5.9-12.1
c-0.4,0.2-1,0.2-1.5,0.6c-1.2-1.6-1.8-2.9-3.8-4c-0.3,0.4-0.9,0.8-1.2,1.1c-0.2-3.1-2.9-0.9-4.7-0.5c-1.4,0.3-1.1,0.3-3,0
c-1.4-0.2-2.2-0.9-3.7-0.7c-1.7,0.3-2.8,1.8-4.6,1.8c-0.6,0-2.4-0.6-3.2-0.6c-1.6,0-5.4,1.5-5.3-1.2c2.3-0.8,1.8-2,0.6-3.4
c-0.3-0.4-1.9-0.1-2.1-0.4c-0.7-0.9,0-1.9-0.4-2.8c-0.6-1.5-0.8-2.6-2.5-3.5s-3.2,0.1-4.6-1.4c0.2,0.1,0.5,0.3,0.7,0.3
c-1.5-1.2-2.4-1.9-3.3-3.5c-1-1.7-1.3-3.8-3.2-4.9c-3.1-1.9-7.2-0.9-9.5-4.4c0.3-0.1,0.8-0.3,1.1-0.4c-1.7-1-10.7-3.4-8.1,1.6
c-1.5-0.3-3.2-0.1-4.6-0.7c-1.3-0.5-1.9-1.9-3.5-2.4c-1-0.3-3.6,0.5-4.4,0c-1.8-1.4,0.8-2.7,0-4c-0.8-1.4-2.9-0.8-4.1-1.2
c-1-0.4-2.7-1.5-3.7-2c-2-1.3-4-4.5-6.5-4.7c0.8,1-0.4,0.8-0.4,1.6"/>
</g>
</g>
</g>
</svg>

Apply 2 stripes to SVG dynamically

Im currently working on a map for a Elections website The map is SVG and we need the map to be able to use stripes in 2 different colours depending on the election results.
as the results are announced the map will colour the areas i.e Red = labour for that elected area but in our case a area can have 2 Party's so we would need the map to display stripes red/blue to that area to show users the results.
Does anybody have any idea how this can be achieved?
one idea was to use the Fill colour option and overlay & image that's 50% fill colour and the other 50% transparent showing the background fill behind it , however we couldn't get the both to show
Below i have attached the code used for the map
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="#FFFFFF" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>

You probably need patterns, here's a snippet:
<svg version="1.1"
id="svg5136" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" inkscape:version="0.91 r13725" sodipodi:docname="close_up_02.svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="350px"
height="350px" viewBox="0 0 660.811 535.805" enable-background="new 0 0 660.811 535.805" xml:space="preserve">
<defs>
<pattern id="red-blue" viewBox='0 0 1 1' x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
<rect x=0 y=0 width=1 height=1 fill='#f33' />
<path d='M0 0 L1 1' stroke=#55f stroke-width='.33' />
<path d='M0 -1 L2 1' stroke=#55f stroke-width='.33' />
<path d='M-1 0 L1 2' stroke=#55f stroke-width='.33' />
</pattern>
</defs>
<g id="g5144" transform="matrix(1.25,0,0,-1.25,-188.59631,638.40215)" inkscape:label="ElectSuf Mapbse nl" inkscape:groupmode="layer">
<path id="path6049" inkscape:connector-curvature="0" fill="url(#red-blue)" stroke="#000000" stroke-width="2.24" d="M289.6,296
l-15.2,10.4l1.6,10.4l0.8,16l3.2,10.4l8,14.4l6.4,12.8l2.4,11.2l3.2,1.6l16,17.6l-3.2,3.2l7.2,3.2l0.8,4l20.8,17.6h3.2l12,10.4
l12.8,11.2l-2.4,12l4.8,3.2l4-2.4l4-10.4l-2.4-4l1.6-6.4l2.4-6.4l-0.8-6.4l0.8-7.2l12-14.4l7.2-6.4v-6.4l-0.8-6.4l-0.8-4.8l1.6-5.6
l13.6-0.8l-3.2-3.2l2.4-4l1.6-4.8v-4v-6.4l-6.4-0.8l-1.6-4.8l-1.6-4.8l-2.4-5.6l-4.8-2.4l-4-3.2l0.8-8.8l7.2-1.6l10.4-0.8l1.6-2.4
l12.8,4l-2.4-4l0.8-4l6.4-8l4.8-7.2l2.4-4l7.2-4l6.4-6.4l3.2-6.4l3.2-6.4l-1.6-5.6l-8.8-0.8l-4.8-2.4l-1.6-8L412,268l-11.2,5.6
l-2.4,5.6h-4.8l-4.8,1.6l-5.6-0.8l-4.8-0.8l-6.4-0.8l-4,9.6l-28-3.2l-10.4-2.4l-9.6,0.8l-3.2-2.4l-4.8-1.6L289.6,296z"/>
<path id="path6053" inkscape:connector-curvature="0" fill="#ffffff" stroke="#000000" stroke-width="2.24" d="M493.6,363.2l7.2-4
L560,360l-0.8-87.2l-4-2.4l-6.4-1.6l-24,4l-8.8,1.6l-18.4,2.4L484,280l-11.2,3.2l-5.6-12l-8-3.2l-0.8,5.6l-4,10.4l-6.4,8l-8.8,5.6
l-8.8,11.2l-5.6,8.8l2.4,8l-12-4.8l-3.2,2.4h-9.6l-5.6,1.6l-2.4,8.8l8.8,4.8l4.8,15.2l6.4,1.6l0.8,9.6l-0.8,4l-3.2,4.8l1.6,4.8
h-10.4l-4,6.4l0.8,9.6l6.4,1.6l4.8,3.2l0.8,2.4h5.6l11.2,5.6l8,2.4l1.6,8l10.4-14.4l10.4-12l13.6-9.6l18.4-8l3.2-3.2V363.2z"/>
</g>
</svg>

How to make SVGs sharp in Firefox and Internet Explorer

When I use a <svg> in order to display an icon, it looks perfectly crisp and sharp in Google Chrome. However, as soon as I open the svg in Firefox or Internet Explorer, the icon looks blurry.
It seems like those Browsers render the icon to half pixels. Only Google Chrome is doing a good job here.
What is the best approach to get crisp svg icons in all browsers? (We want to color the icons via fill:... so using a background-image or pixel graphics are no options)
What I have tried so far:
I have applied the CSS attribute shape-rendering. but this one is too crisp and edgy.
<svg width="16px" height="16px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<svg width="32px" height="32px" 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 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill="#231F20" d="M16,16H0V0h6.8l2,3H16V16z M1,15h14V7H1V15z M1,6h14V4H8.2l-2-3H1V6z"></path>
</svg>
<button type="button" style="width: 42px; height: 42px;"><i style="background-image: none; pointer-events: none;">
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>
</i></button>
<svg style="width: 24px; height: 24px;" viewBox="0 0 24 24" enable-background="new 0 0 24 24" 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" xml:space="preserve">
<rect y="19" fill="#231F20" width="24" height="2"></rect>
<rect y="3" fill="#231F20" width="24" height="2"></rect>
<rect y="11" fill="#231F20" width="24" height="2"></rect>
</svg>

Hack for Firefox:
svg {
transform: translateZ(0);
}
What about IE:
possible reason when svg container positioned in coordinates like 31.5 (not exactly on pixel line), IE will draw svg in this container the same way, a bit off pixel line.

Use much larger values for width and height.
What you are doing at the moment is essentially specifying a 24 x 16 pixel image, and expanding it to full screen size. SVG should be infinitely scalable, hence the name, but some Browsers, like some TVs are better at pixel interpolation than others.

SVG Path Fill Colour with CSS

I've seen lots of people posting this, and they all seem pretty happy with their answers.
However I cant get my path fill to actually work,
http://jsfiddle.net/OwenMelbz/LvgmV/
The fiddle is above, the svg is generated from Illustrator
HTML
<img src="http://owenmelbourne.com/arrow.svg">
CSS
img {width: 100px}
path {
fill: blue;
}
Yet I always get
The SVG Code looks like
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.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="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
If anybody could shed some light on the matter it would be much appreciated.
Thanks

Changing the fill attribute will never work in this situation, because the image itself already has a fill. It won't be 'replaced' or 'redrawn' using the new attributes.
I also don't think this will work even if you took out the color command in the SVG file.

There's two ways to get it done.
Delete the value inside the fill attribute (fill="") and modify it via external CSS
Just change the color value inside the fill attribute.
And just to keep it nice, delete all the extra g tags, you don't need them.
<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="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
Once you have no value for the fill attribute, change the color with CSS.
<style>
svg{ fill: red; }
</style>
Or the second option...
<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="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#ff0000" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
This will make it red.
Try both on your fiddle and use the one the best works for You.
Tadaaa

CSS fills, and other SVG-specific rules, won't apply to an SVG rendered with an <img> tag:
// CSS fills won't apply to this
<img src="image.svg">
You need the SVG to be rendered inline in order for CSS fills to work.
// CSS fills will apply to this
<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="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>
CSS:
#Layer_1 {
fill: blue;
}
Also, you could also use Javascript to automatically convert SVG's into inline elements. However if you're dealing with a few static SVG's for an interface (e.g. your theme), it's best to just copy-paste them inline.

Resources