Using Google Font in SVG? - css

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>

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.

How to fill colour in SVG?

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>

Why is my SVG image squeezed in IE11?

I'm using SVG image files with <img> tag. The image looks fine in all browsers except for IE11.
How it should look:
How it looks in IE11:
The CSS is set to width:42px; height:auto. I've tried fiddling with viewbox and height and width of the SVG itself, but nothing seems to help.
This is the code:
.st0{
fill:#7F7F7F;
}
<?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="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" x="0px" y="0px"
viewBox="0 0 40 40" xml:space="preserve">
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>

I added a red box that shows the area occupied by svg
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" style="border:1px solid red;" >
Chrome
IE11
If you replace height:auto with a fixed size
svg {
width:42px;
height:42px;
}
The image will look the same in all browsers:
the second variant: add the viewport to the svg file width="40" height="40"
<!-- Generator: Adobe Illustrator 21.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="40" height="40" viewBox="0 0 40 40" style="border:1px solid red;" >
<style type="text/css">
.st0{fill:#7F7F7F;}
</style>
<g id="_x33_A4Pmf.tif_1_">
<g>
<path class="st0" d="M38,23.3c0,0.3,0,0.6,0,0.9c0,0,0,0.1,0,0.1c0,0.3-0.1,0.6-0.1,1c-0.2,1.5-0.8,2.8-1.7,4
c-1.4,1.8-3.2,2.9-5.3,3.3c-0.7,0.1-1.4,0.2-2.1,0.2c-5.8,0-11.7,0-17.5,0c-0.6,0-1.2,0-1.7-0.1c-1.1-0.2-2.1-0.6-3.1-1.2
c-1.2-0.7-2.2-1.7-3-2.9c-0.7-1.1-1.1-2.3-1.3-3.6c0-0.2,0-0.4-0.1-0.6c0-0.3,0-0.6,0-0.9c0-0.1,0-0.3,0-0.4
c0.1-1,0.3-1.9,0.7-2.8c0.4-1,1-1.8,1.7-2.6C5.2,16.8,6,16.2,7,15.7c0.1,0,0.1-0.1,0.1-0.2c0.5-1.6,1.4-3.1,2.5-4.4
c1-1.1,2.1-2,3.4-2.6c1.4-0.7,2.9-1.1,4.5-1.3c0.1,0,0.3,0,0.4,0c0.4,0,0.7,0,1.1,0c0,0,0.1,0,0.1,0c0.4,0,0.8,0.1,1.1,0.1
C21.6,7.6,23,8,24.2,8.7c2.5,1.4,4.3,3.4,5.4,6c0,0.1,0.1,0.1,0.1,0.1c0.3,0,0.5,0.1,0.8,0.1c1.2,0.2,2.2,0.6,3.2,1.2
c1.2,0.8,2.2,1.7,2.9,2.9c0.7,1.1,1.1,2.3,1.3,3.6C38,22.9,38,23.1,38,23.3z M20,29.8c3,0,6,0,8.9,0c0.4,0,0.7,0,1.1-0.1
c1.3-0.2,2.4-0.8,3.3-1.7c1.3-1.4,1.9-3.1,1.7-5c-0.2-1.3-0.7-2.4-1.6-3.3c-0.9-1-2.1-1.6-3.4-1.8c-0.4-0.1-0.8-0.1-1.2-0.1
c-0.4,0.1-0.8,0.1-1.2,0.1c-0.1,0-0.1,0-0.1-0.1c-0.1-0.4-0.2-0.8-0.4-1.2c-0.6-1.9-1.6-3.4-3.2-4.6c-2-1.5-4.3-2.1-6.8-1.7
c-1.5,0.2-2.9,0.8-4.2,1.8c-1.4,1.1-2.4,2.4-2.9,4c-0.2,0.5-0.3,1.1-0.5,1.6c0,0.1-0.1,0.1-0.1,0.2c-0.3,0.1-0.6,0.2-0.9,0.4
c-0.9,0.4-1.6,1-2.2,1.7C5.4,21.2,5,22.5,5,24c0.1,1.4,0.5,2.6,1.4,3.6c1.2,1.4,2.8,2.1,4.6,2.1C14,29.8,17,29.8,20,29.8z"/>
<path class="st0" d="M17,20.7c-0.9,0-1.7,0-2.6,0c1.4-1.9,2.7-3.7,4.1-5.6c1.4,1.9,2.7,3.7,4.1,5.6c-0.9,0-1.7,0-2.6,0
c0,2,0,4,0,6c-1,0-2,0-3,0C17,24.7,17,22.8,17,20.7z"/>
</g>
</g>
</svg>
The third variant
If you want to leave css rule - height: auto; for the block, then add "preserveAspectRatio"
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 40 40" preserveAspectRatio="xMinYMin meet" >
<style type="text/css">
.st0{fill:#7F7F7F;}
svg {
width:42px;
height:auto;
}

How to fill color in this Single Vector Graphic

So i have this SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>Gender Neutral User-100</title>
<desc>Created with sketchtool.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="#ff0000" color="#ff0000" sketch:type="MSPage">
<g id="Social-Activity" sketch:type="MSArtboardGroup" fill="#ff0000" transform="translate(-347.000000, -337.000000)">
<image fill="#ff0000" id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
</g>
</g>
</svg>
Which looks like
I want to fill some color inside it using CSS
But dont know how to do it. Tried fill property but no success.
Here is a fiddle for the SVG code.
I am embedding this SVG in my html using <object>...</object> tag.

The bitmap nature of the included image defies svg's basic approach of vector graphics.
One option is to combine the image with svg drawing primitives:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="49px" height="55px" viewBox="0 0 49 55" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: sketchtool 3.4 (356) - http://www.bohemiancoding.com/sketch -->
<title>Gender Neutral User-100</title>
<desc>Created with sketchtool.</desc>
<defs>
<style type="text/css"><![CDATA[
.filler {
color: #ff0000;
fill: #ccccff;
stroke: none;
stroke-width: 1
}
]]></style>
</defs>
<circle cx="25" cy="18" r="12" class="filler"/>
<circle cx="25" cy="55" r="20" class="filler"/>
<g id="Page-1" sketch:type="MSPage">
<g id="Social-Activity" sketch:type="MSArtboardGroup" transform="translate(-347.000000, -337.000000)">
<image id="Gender-Neutral-User-100" sketch:type="MSBitmapLayer" x="333" y="326" width="77" height="77" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAABGdBTUEAA1teXP8meAAABR5JREFUeAHtXItx20YUlD0pACVcB2YHvg7MDowOnHSgVBB2IHQQpgLDFUgdEB0YHTi7mWiGhrGHjw6HO/LtzLPIO9zbzwMoyTP2w4PBErAELAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQiJ/Aucr+U7SqQfRCE38S6LUdMgAP4jHpCXVA/JorX8NrPKJ41RErAoQ+D/fHGYg+HMqxMwOFcjEEMB2mDWTGQLzjzHTUMM9Z79iaHYSIBftb/jYoV/FQfctn3FzEUBvOccBivwyKnDWUwlCXD6HC2QR1RDjWEwwL3GlSHeg0+9NWGgqCuMefJ6HCAQS8Fz3So0EC4Rw0GJHBChcLqsf97hKTYg71CXKcIPEW38BMBddg/oGKBvTpUaCge+3eLC5yrcF6wV22QDHuyt+KlprtEDdcqlB57DrUVHBqTQ/HX2Ls78E5UgfgEaZBD8VPbXaGGWxVGkzAJcikddUIdu1OdA0G4hOrIpQZCjXcDFcJphwTIqfQkl/M+OePDgw9w7nFXtgE9Ia2BY2VtPULu2B3Z72iD3GOaqDUp9nhCDsLhi1hPsay4XQrya449BlJdC7h63V69Tv1ScbvUQvYYSGqPRfHZQDIblw3EBpJZApnJ2eMJ6UUGXqynWFbcSutmmvYYiPoR88NmLqcbK26ldbpjQVd4aB37JYxr3EuNIwiz0ZPTE8JBMJzU8AHCu3hC6P+MUnel4wWJ4MCjdFDj3aCGUxVEkzAFcikddUIdWVB1UKHC8AkUkkPxdwn4s6OooUgF8h17DrUVDmhMDsVfb0Wce98OAlUoz9irNjDAnuyteLsNOItp6aFUBcP1C4p3cyxMPRnk9LHISu1zgvDQUPjR8iWCOfZgrxAXtRiQQIsKBcW9C+qIWgqe4dmp/u3Sxrd8fQVzL6ip0LjPu/wJ9QnlUEM4LHCP10w9Ea985KYGw1UCS4byGmSMrzaMqyEMX3IoZ1SMoOf0IBc5DRMJnLA/J9C3XEMOw0QCDvtPqLcEveQsuchpGCTg8D7lIIZDs8FcDeSI13N/GhoGGfM9NVDLrni3I3sF7r9Q9QoN33Cm+7/Gjjsssj6ilqLBgT9Q/dKDJV9/gPgLau4d3uHaE8qjlsLjAM92qLl81EaNdwEanfsRdca1PmIq7NWi5gyGGm9+KHOHwdAcais4NG5RU4O56aHMGUaPkI6oVCAXOUODucmhVDDNz+WQ8Rb7vC41yNmiQtqofQ9toN0GX9E2ZLjZhnZRV2oIaaSHm8AJLkJGuZ8LprQ+5iJ0rQ6Pg6FhNGsbb3iOmkKa/Ybcm7fmY67MnTdnX09AbUo3PRWJGqqVqQ57FSpXUFuHUvpr7BUFGrqglKFDAW6oUemnN3osBjWUKjOnYlyE/+soeiwGz1A6NpAe6yXdWdRKzWNe6LEIHKByzADXHotw8LNIalZ+6DV7NFA4ZoB3WpW9+l8FUjO1j3lqfr08vxX+3U+x4kWcjfBEr1njAHVjw+DaMWvlYXHUrnzRc7aooWxMeJ+t4vnCxnxxrZ7fYvrK2P+kzQvKVqyXtPyPEOvF+qrl2AP5KFS8iPWSlpUH5XmVt9gDcUKFMiMuz3JZeVCeV5mIPRAlolMbBa33BWn9T2qFP9U3vtK8KL3KH71HQcwn5BBFUZlNonn/LaL/Dr3+jNgvx1bKH70bLAFLwBKwBCwBS8ASsAQsAUvAErAELAFLwBKwBCwBS8ASsAQsAUsgzwT+BZbK0P7I4pEAAAAAAElFTkSuQmCC"></image>
</g>
</g>
</svg>
Superfluous attributes have been removed from the g and image elements. The code is available as this fiddle.

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