SVG Path Fill Colour with CSS - 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.

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>

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 can I put emboss style on SVG element on hover using css

here's my css style
<style>
#asia > path:hover {
fill: red;
}
</style>
and heres the SVG element:
<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="800px" height="500px" viewBox="0 0 800 500" enable-background="new 0 0 800 500" xml:space="preserve">
<g transform="translate(0,239) scale(0.016963,-0.016963)" id="asia">
<path fill="" d="M39736.762-6721.546c-23.949-35.866-47.898-97.409-51.293-136.729
c-5.125-37.651-17.098-85.492-27.348-104.317c-10.246-20.495-17.098-66.667-13.699-102.533c3.453-59.815,8.578-68.393,53.02-76.914
c52.965-10.248,165.805,32.47,165.805,61.542c0,11.975,8.578,11.975,22.219,0c17.102-13.702,34.199-6.851,68.395,30.742
c25.617,25.677,46.113,59.815,46.113,75.245c0,15.371,13.703,27.346,32.527,27.346c20.496,0,39.32,15.371,46.113,39.32
c6.852,20.495,29.074,64.939,51.297,99.136c53.02,83.765,30.801,102.533-83.766,70.063c-150.43-40.99-155.555-40.99-191.422-8.521
c-18.824,18.768-41.047,35.866-51.293,40.99c-8.578,3.454-15.371,17.098-11.977,29.073
C39799.977-6641.178,39784.605-6654.88,39736.762-6721.546z"/>
</g>
</svg>
I want to add bevel and emboss style when I hover the path tag. I already read related topics and it seems that css emboss is not working on svg element. Any comments or suggestions appreciated.

Use an SVG filter to achieve your emboss effect and apply it on hover.
<svg width="7.5cm" height="5cm" viewBox="0 0 200 120"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" ...>
[...snip...]
</filter>
</defs>
<path fill="#D90000" class="button"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</svg>
CSS:
.button:hover {
filter: url(#MyFilter);
}
Demo here
Note that SVG filters will not work on versions of IE <10.

SVG icon changes when SVG sprite set to display:none

If I embed an SVG sprite
<svg class="hidden-svg" version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="208px" height="104px" viewBox="0 0 34 34" enable-background="new 0 0 34 34" xml:space="preserve" >
<g id="phone2">
.....
</g>
</svg>
and reference an embedded icon as follows:
<svg viewBox="1 1 32 32" class="icon">
<use xlink:href="#phone2"></use>
</svg>
If is set the SVG sprite to:
.hidden-svg {
display: none;
}
It changes the look of my icon. See jsbin here.
What can I do to avoid changing the icon?

Use visibility:hidden instead of display:none and make the original SVG width="0" and height="0" so that it doesn't take up space.

Resources