CSS: SVG sprite is not working - css

I want to combine all SVG icons in one sprite, and call it from CSS like we do in other background-image cases.But it don't shown in the page. When opening SVG image in browser I get this error
http://gyazo.com/814ab252f2c104caf10fcef2d2f1d057
HTML
<div class="col-md-12 col-xs-12 input-group">
<span class="input-group-addon login-icon icon-banner">
<i class="icons icon-username"></i>
</span>
</div>
Css
.icons{
height: 20px;
width: 20px;
display: inline-block;
background:url('../images/icons/icons.svg') no-repeat;
}
This is the SVG image http://gyazo.com/25f8140160e3cb27b850a9b2916492f3
SVG markup is
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.1, 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="126.099px" height="93.106px" viewBox="0 0 126.099 93.106" enable-background="new 0 0 126.099 93.106"
xml:space="preserve">
<g id="Page-1" sketch:type="MSPage">
<g id="Icons" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username" sketch:type="MSShapeGroup" fill="#F16059" d="M254.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C260.741,388.538,255.173,389.595,254.34,387.458"/>
</g>
</g>
<g id="Page-1_1_" sketch:type="MSPage">
<g id="Icons_1_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_1_" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M203.34,387.458c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C209.741,388.538,204.173,389.595,203.34,387.458"/>
</g>
</g>
<g id="Page-1_2_" sketch:type="MSPage">
<g id="Icons_2_" transform="translate(-188.000000, -371.000000)" sketch:type="MSArtboardGroup">
<path id="Username_2_" sketch:type="MSShapeGroup" fill="#37424E" d="M229.007,387.459c-0.067-0.743-0.045-1.249-0.045-1.913
c0.349-0.18,0.967-1.294,1.069-2.228c0.27-0.022,0.697-0.27,0.821-1.283c0.068-0.54-0.191-0.844-0.36-0.934
c0.439-1.283,1.361-5.231-1.699-5.636c-0.315-0.529-1.125-0.799-2.171-0.799c-4.196,0.079-4.702,3.038-3.78,6.435
c-0.169,0.09-0.428,0.394-0.36,0.934c0.124,1.013,0.551,1.26,0.821,1.283c0.101,0.934,0.743,2.048,1.091,2.228
c0,0.664,0.034,1.17-0.045,1.913c-0.821,2.137-6.424,1.08-6.682,5.209h18C235.408,388.539,229.84,389.597,229.007,387.459"/>
</g>
</g>
<g id="Page-1_3_" sketch:type="MSPage">
<g id="Icons_3_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password" sketch:type="MSShapeGroup" fill="#C8C7C7" d="M208.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C209.5,444.447,209.265,444.215,208.975,444.215
L208.975,444.215z M203.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C204.418,449.473,204.181,449.891,203.819,450.145L203.819,450.145z M205.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L205.653,444.215z"/>
</g>
</g>
<g id="Page-1_4_" sketch:type="MSPage">
<g id="Icons_4_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_1_" sketch:type="MSShapeGroup" fill="#37424E" d="M234.642,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C235.167,444.448,234.932,444.215,234.642,444.215
L234.642,444.215z M229.486,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402s1.418,0.628,1.418,1.402
C230.085,449.473,229.848,449.891,229.486,450.145L229.486,450.145z M231.32,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624s2.653,1.177,2.653,2.624V444.215L231.32,444.215z"/>
</g>
</g>
<g id="Page-1_5_" sketch:type="MSPage">
<g id="Icons_5_" transform="translate(-190.000000, -408.000000)" sketch:type="MSArtboardGroup">
<path id="Password_2_" sketch:type="MSShapeGroup" fill="#F16059" d="M259.975,444.215h-0.898v-2.197
c0-2.769-2.277-5.021-5.077-5.021c-2.799,0-5.077,2.253-5.077,5.021v2.197h-0.898c-0.29,0-0.525,0.233-0.525,0.519v9.743
c0,0.287,0.235,0.52,0.525,0.52h11.95c0.29,0,0.525-0.233,0.525-0.52v-9.743C260.5,444.448,260.265,444.215,259.975,444.215
L259.975,444.215z M254.819,450.145v2.074c0,0.181-0.148,0.328-0.332,0.328h-0.974c-0.183,0-0.332-0.147-0.332-0.328v-2.074
c-0.362-0.254-0.599-0.672-0.599-1.145c0-0.774,0.635-1.402,1.418-1.402c0.783,0,1.418,0.628,1.418,1.402
C255.418,449.473,255.181,449.891,254.819,450.145L254.819,450.145z M256.653,444.215h-5.306v-2.197
c0-1.447,1.19-2.624,2.653-2.624c1.463,0,2.653,1.177,2.653,2.624V444.215L256.653,444.215z"/>
</g>
</g>
</svg>
Can anyone help with this?


Try removing any attribute where it says sketch:type="..." throughout the svg code.

Related

Material SVGs exported from sketch not showing up in client's browser, but fine in my browser - how to test?

I'm assuming it's an export issue. Trying to figure out how to recreate the issue - any one experience this? Solutions also welcome. Will try re-exporting from Illustrator.
here are some troublesome SVGs (material icons):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" transform="translate(-1160.000000, -158.000000)" fill="#98A4AE">
<g id="menu" transform="translate(1124.000000, 56.000000)">
<g id="item" transform="translate(33.000000, 100.000000)">
<text id="exit_to_app---material">
<tspan x="0" y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" transform="translate(-477.000000, -395.000000)" fill="#98A4AE">
<g id="modal" transform="translate(435.000000, 376.000000)">
<g id="header">
<text id="send---material">
<tspan x="40" y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
Here is a SVG that was viewed correctly (custom):
<?xml version="1.0" encoding="UTF-8"?>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon/account-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>

The svgs had a lot of transforms going to and fro which I deleted. Also I could have eliminated some of the nested <g> elements, but maybe you putted them there for some reason.
Also in the CSS I've putted a border to the SVG so that you can see that there is a white space between the icon and the border of the svg canvas. Should it have been for me I would have eliminated that space, but again: you may need it. I hope this helps.
svg{border:1px solid}
<svg width="18px" height="19px" viewBox="0 2 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" fill="#98A4AE">
<g id="menu">
<g id="item">
<text id="exit_to_app---material">
<tspan y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="27px" height="23px" viewBox="0 20 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" fill="#98A4AE">
<g id="modal" >
<g id="header">
<text id="send---material">
<tspan y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon" stroke="black" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
</svg>

In the end, we were able to solve the issue by exporting through Illustrator. Here is how the newly exported SVG code looked:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.a{fill:#98a4ae;}</style></defs><title>sign-out-gray</title><path class="a" d="M44.2964,7a4.5218,4.5218,0,0,1,3.3027,1.4A4.52,4.52,0,0,1,49,11.7036V44.2964a4.7835,4.7835,0,0,1-4.7031,4.7041H11.7041a4.4923,4.4923,0,0,1-3.332-1.4A4.5585,4.5585,0,0,1,7,44.2964V35h4.7041v9.2969H44.2964V11.7036H11.7041V21H7V11.7036A4.5629,4.5629,0,0,1,8.3721,8.3994,4.4919,4.4919,0,0,1,11.7041,7ZM23.52,36.4l5.9922-6.1045H7V25.7036H29.5122L23.52,19.6l3.3042-3.3042L38.5278,28,26.8242,39.7036Z"/></svg>

SVG - CSS - draw animation on certain svg path

I have a kind of like Frankenstein svg with a scar on his face. What I would like to have is that his scar renders delayed. Kind of like drawing animations.
For the sake of completeness, it looks like:
The path of the scar in his face is:
<path id="scar" d="..."/>
As you can see I gave the path an id. In my CSS class I tried to assign the animation to the id:
#scar {
animation-name: draw;
animation-duration: 5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
}
}
But that did not work out...Someone any ideas?
Edit
full svg:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.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 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path style="fill:#E6E6E6;" d="M303.852,190.448c6.972,0,12.645-5.672,12.645-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C291.21,184.776,296.882,190.448,303.852,190.448z"/>
<path style="fill:#81AF31;" d="M138.086,170.102c-1.694,0.196-2.784,0.609-3.24,1.228c-2.083,2.834,2.176,25.193,2.176,25.193
c4.459,23.446,11.74,34.058,15.485,34.105c5.253,0.063,7.752-0.294,9.335-1.004c-5.151-15.979-8.764-33.807-10.78-53.428
C148.651,172.703,143.261,169.499,138.086,170.102z"/>
<path style="fill:#333333;" d="M157.9,147.714c2.222-3.334,4.743-7.113,4.743-9.26V43.563c0-3.238,2.624-5.863,5.863-5.863H343.49
c3.239,0,5.863,2.625,5.863,5.863v94.891c0,2.148,2.52,5.926,4.743,9.26c2.709,4.06,5.662,8.504,6.969,13.459
c1.834-0.922,3.77-1.629,5.747-2.117V34.668c0-11.647-9.476-21.122-21.123-21.122H166.305c-11.647,0-21.122,9.476-21.122,21.122
v124.386c1.978,0.487,3.915,1.193,5.748,2.114C152.24,156.214,155.194,151.772,157.9,147.714z"/>
<g>
<path style="fill:#81AF31;" d="M255.999,225.206c3.826,0,6.939-3.114,6.939-6.942v-42.218h-13.881v42.218
C249.057,222.091,252.171,225.206,255.999,225.206z"/>
<path style="fill:#81AF31;" d="M360.935,176.195c-2.017,19.622-5.628,37.451-10.78,53.43c1.582,0.711,4.081,1.068,9.333,1.003
c3.748-0.047,11.028-10.659,15.486-34.105c0,0,4.26-22.359,2.177-25.193c-0.456-0.619-1.545-1.033-3.241-1.228
C368.741,169.502,363.349,172.702,360.935,176.195z"/>
<path style="fill:#81AF31;" d="M298.518,256.794l-4.072,49.296c6.228-6.313,10.445-14.199,14.77-22.28
c2.907-5.436,5.915-11.056,9.545-16.162c9.219-12.964,16.482-28.583,21.787-46.663
C323.995,242.358,305.862,253.062,298.518,256.794z"/>
</g>
<path style="fill:#808080;" d="M321.407,308.647h21.395c1.826,0,2.751-1.536,2.751-4.564c0-3.029-0.925-4.564-2.751-4.564h-21.395
V308.647z"/>
<path style="fill:#E6E6E6;" d="M208.143,190.448c6.972,0,12.644-5.672,12.644-12.643c0-0.591-0.041-1.177-0.123-1.758h-25.039
c-0.082,0.58-0.123,1.167-0.123,1.758C195.5,184.776,201.172,190.448,208.143,190.448z"/>
<g>
<path style="fill:#81AF31;" d="M202.315,306.081v25.404c0.072,0.749,0.308,3.203,0.715,7.031
c4.108,19.926,26.153,35.31,52.967,36.028c26.787-0.716,48.813-16.068,52.954-35.962c0.414-3.854,0.655-6.327,0.728-7.092v-25.408
c-9.731,13.82-24.207,25.365-53.68,25.367h-0.001h-0.001h-0.001c0,0,0,0-0.001,0C226.523,331.448,212.047,319.903,202.315,306.081z
"/>
<path style="fill:#81AF31;" d="M281.955,314.86l2.903-35.145h-57.722l2.901,35.144c6.667,3.057,15.036,4.865,25.961,4.865
C266.92,319.723,275.289,317.916,281.955,314.86z"/>
</g>
<g>
<path style="fill:#333333;" d="M348.926,426.596c-0.827-1.343-1.078-2.962-0.697-4.492s1.363-2.841,2.723-3.64l35.987-21.1
c-20.172-18.65-51.77-43.244-66.646-54.629c-2.971,26.921-12.152,100.466-28.929,155.716h47.091l29.045-41.689L348.926,426.596z"/>
<path style="fill:#333333;" d="M125.056,397.365l35.987,21.1c1.36,0.797,2.342,2.109,2.723,3.64c0.381,1.53,0.13,3.15-0.697,4.492
l-18.575,30.167l29.045,41.689h47.064c-16.775-54.741-25.946-128.682-28.91-155.711
C176.815,354.128,145.225,378.718,125.056,397.365z"/>
</g>
<path style="fill:#808080;" d="M259.344,386.123c-0.449,0.11-6.243,0.11-6.691,0c-18.519-1.174-34.954-8.436-46.249-19.307
c4.611,35.257,13.223,89.888,26.485,131.636h46.206c13.239-42.128,21.846-96.495,26.465-131.605
C294.265,377.701,277.844,384.952,259.344,386.123z"/>
<path style="fill:#333333;" d="M338.196,341.72c18.52,14.397,46.087,36.457,62.535,52.573c1.304,1.278,1.938,3.092,1.717,4.904
c-0.223,1.813-1.278,3.418-2.854,4.342l-37.542,22.011l17.448,28.338c1.223,1.988,1.151,4.511-0.182,6.426l-26.571,38.138h71.719
v-41.491c0-3.237,2.624-5.863,5.863-5.863s5.863,2.625,5.863,5.863v41.491h61.725c0,0-31.312-91.272-31.438-91.438
C466.035,406.427,453.946,364.643,338.196,341.72z"/>
<path style="fill:#808080;" d="M190.589,299.519h-21.393c-1.827,0-2.752,1.535-2.752,4.564c0,3.028,0.925,4.564,2.752,4.564h21.393
V299.519z"/>
<g>
<path style="fill:#81AF31;" d="M202.782,283.809c4.323,8.08,8.541,15.964,14.766,22.277l-4.07-49.293
c-7.342-3.731-25.467-14.412-42.016-35.77c5.304,18.064,12.562,33.669,21.774,46.623
C196.866,272.752,199.873,278.373,202.782,283.809z"/>
<path style="fill:#81AF31;" d="M221.311,247.539c2.011,0.849,3.396,2.749,3.575,4.924l1.282,15.527h59.659l1.283-15.527
c0.181-2.183,1.564-4.085,3.587-4.928c0.36-0.151,37.185-16.15,57.28-61.928c0.84-6.081,1.533-12.337,2.036-18.815
c0.284-3.641-2.744-8.18-5.671-12.569c-3.301-4.949-6.714-10.068-6.714-15.767V49.426h-14.572v13.41
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.873v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863v-13.41h-18.872
v13.41c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863v-13.41h-18.872v13.41c0,3.238-2.624,5.863-5.863,5.863
s-5.863-2.625-5.863-5.863v-13.41h-14.571v89.028c0,5.699-3.412,10.816-6.714,15.765c-2.927,4.389-5.953,8.928-5.669,12.57
c0.504,6.48,1.197,12.738,2.037,18.819C184.119,231.383,220.941,247.382,221.311,247.539z M198.847,106.109
c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435V74.716c0-3.238,2.624-5.863,5.863-5.863
c3.239,0,5.863,2.625,5.863,5.863v19.668h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v17.998
h3.435c3.239,0,5.863,2.625,5.863,5.863c0,3.238-2.624,5.863-5.863,5.863h-3.435v12.698c0,3.238-2.624,5.863-5.863,5.863
c-3.239,0-5.863-2.625-5.863-5.863v-12.698h-3.435c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h3.435v-17.998
H198.847z M177.051,176.046c-3.239,0-5.863-2.625-5.863-5.863s2.624-5.863,5.863-5.863h157.895c3.239,0,5.863,2.625,5.863,5.863
s-2.624,5.863-5.863,5.863h-6.794c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.933,24.369-24.371,24.369
c-13.437,0-24.368-10.932-24.368-24.369c0-0.59,0.028-1.174,0.072-1.758h-4.891v32.096c9.068,2.563,15.744,10.878,15.744,20.757
c0,3.238-2.624,5.863-5.863,5.863s-5.863-2.625-5.863-5.863c0-3.34-1.672-6.287-4.215-8.076
c-1.254,9.083-9.047,16.107-18.468,16.107c-9.425,0-17.221-7.027-18.472-16.114c-2.545,1.789-4.214,4.742-4.214,8.083
c0,3.238-2.624,5.863-5.863,5.863c-3.239,0-5.863-2.625-5.863-5.863c0-9.88,6.673-18.214,15.744-20.777v-32.076h-4.89
c0.042,0.583,0.072,1.168,0.072,1.758c0,13.438-10.932,24.369-24.37,24.369c-13.437,0-24.369-10.932-24.369-24.369
c0-0.59,0.028-1.174,0.072-1.758H177.051z"/>
</g>
<path style="fill:#333333;" d="M132.496,453.888l17.448-28.338l-37.543-22.011c-1.576-0.924-2.63-2.529-2.854-4.342
c-0.222-1.813,0.413-3.626,1.717-4.904c16.444-16.111,44.004-38.165,62.524-52.562c-58.347,11.568-89.687,28.218-106.499,40.205
c-16.79,11.97-21.748,24.973-21.771,25.079c-0.047,0.203-31.437,91.438-31.437,91.438h61.725v-41.491
c0-3.237,2.624-5.863,5.863-5.863c3.239,0,5.863,2.625,5.863,5.863v41.491h71.719l-26.572-38.138
C131.344,458.398,131.273,455.875,132.496,453.888z"/>
<path id="scar" style="fill:#333333;" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
<path d="M208.143,202.174c13.438,0,24.37-10.932,24.37-24.369c0-0.59-0.028-1.174-0.072-1.758h4.89v32.076
c-9.07,2.564-15.744,10.897-15.744,20.777c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-3.34,1.67-6.293,4.214-8.083
c1.251,9.086,9.047,16.114,18.472,16.114c9.422,0,17.215-7.024,18.468-16.107c2.543,1.788,4.215,4.736,4.215,8.076
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863c0-9.878-6.676-18.194-15.744-20.757v-32.096h4.891
c-0.042,0.583-0.072,1.168-0.072,1.758c0,13.438,10.931,24.369,24.368,24.369c13.438,0,24.371-10.932,24.371-24.369
c0-0.59-0.028-1.174-0.072-1.758h6.794c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863H177.051
c-3.239,0-5.863,2.625-5.863,5.863s2.624,5.863,5.863,5.863h6.794c-0.042,0.583-0.072,1.168-0.072,1.758
C183.774,191.242,194.706,202.174,208.143,202.174z M291.333,176.046h25.039c0.082,0.58,0.123,1.167,0.123,1.758
c0,6.971-5.673,12.643-12.645,12.643c-6.97,0-12.642-5.672-12.642-12.643C291.21,177.213,291.251,176.626,291.333,176.046z
M249.057,176.046h13.881v42.218c0,3.827-3.113,6.942-6.939,6.942c-3.828,0-6.942-3.114-6.942-6.942V176.046z M195.623,176.046
h25.039c0.082,0.58,0.123,1.167,0.123,1.758c0,6.971-5.672,12.643-12.644,12.643c-6.971,0-12.643-5.672-12.643-12.643
C195.5,177.213,195.541,176.626,195.623,176.046z"/>
<path d="M477.808,403.997c-1.481-5.345-18.783-54.621-156.401-77.228v-6.396h21.395c8.522,0,14.477-6.698,14.477-16.29
c0-9.592-5.953-16.29-14.477-16.29h-21.395V285.9c2.209-4.074,4.409-7.938,6.911-11.457c7.047-9.91,13.03-21.192,17.941-33.786
c3.325,1.314,12.893,1.704,13.377,1.697c16.189-0.202,23.775-27.428,26.858-43.639c0,0,5.216-27.376,0.107-34.327
c-1.898-2.582-4.607-4.35-8.062-5.298V34.668c0-18.112-14.735-32.848-32.849-32.848H166.305c-18.112,0-32.848,14.736-32.848,32.848
v124.42c-3.453,0.949-6.163,2.716-8.06,5.298c-5.11,6.952,0.106,34.328,0.106,34.328c3.084,16.211,10.673,43.437,26.857,43.639
c0.485,0.006,10.055-0.381,13.38-1.694c4.91,12.592,10.892,23.874,17.938,33.783c2.502,3.519,4.703,7.383,6.911,11.456v1.895
h-21.393c-8.525,0-14.478,6.698-14.478,16.29c0,9.592,5.953,16.29,14.478,16.29h21.393v6.396
c-137.624,22.609-154.921,71.89-156.401,77.229L0.319,502.408c-0.617,1.792-0.329,3.771,0.77,5.313s2.878,2.458,4.772,2.458h500.274
c1.895,0,3.673-0.916,4.772-2.458c1.1-1.542,1.388-3.521,0.77-5.313L477.808,403.997z M342.802,299.519
c1.826,0,2.751,1.535,2.751,4.564c0,3.028-0.925,4.564-2.751,4.564h-21.395v-9.127H342.802z M318.76,267.646
c-3.63,5.105-6.637,10.726-9.545,16.162c-4.324,8.081-8.542,15.967-14.77,22.28l4.072-49.296
c7.344-3.732,25.476-14.436,42.029-35.811C335.241,239.064,327.979,254.682,318.76,267.646z M255.995,331.449
c0.001,0,0.001,0,0.001,0h0.001h0.001H256c29.473-0.001,43.949-11.546,53.68-25.367v25.408c-0.074,0.765-0.315,3.238-0.728,7.092
c-4.142,19.893-26.167,35.246-52.954,35.962c-26.814-0.716-48.859-16.102-52.967-36.028c-0.408-3.827-0.645-6.282-0.715-7.031
v-25.404C212.047,319.903,226.523,331.448,255.995,331.449z M227.137,279.714h57.722l-2.903,35.145
c-6.667,3.056-15.035,4.863-25.958,4.863c-10.924,0-19.293-1.808-25.961-4.865L227.137,279.714z M373.911,170.102
c1.694,0.196,2.785,0.609,3.241,1.228c2.081,2.834-2.177,25.193-2.177,25.193c-4.458,23.446-11.739,34.058-15.486,34.105
c-5.252,0.066-7.751-0.292-9.333-1.003c5.152-15.979,8.764-33.809,10.78-53.43C363.349,172.702,368.741,169.502,373.911,170.102z
M145.183,34.668c0-11.647,9.475-21.122,21.122-21.122H345.69c11.647,0,21.123,9.476,21.123,21.122v124.389
c-1.978,0.487-3.914,1.194-5.747,2.117c-1.306-4.955-4.261-9.398-6.969-13.459c-2.222-3.334-4.743-7.113-4.743-9.26V43.563
c0-3.238-2.624-5.863-5.863-5.863H168.506c-3.239,0-5.863,2.625-5.863,5.863v94.891c0,2.147-2.52,5.926-4.743,9.26
c-2.708,4.058-5.66,8.5-6.968,13.453c-1.834-0.922-3.771-1.628-5.748-2.114V34.668H145.183z M152.508,230.629
c-3.745-0.047-11.026-10.659-15.485-34.105c0,0-4.26-22.359-2.176-25.193c0.456-0.619,1.544-1.033,3.24-1.228
c5.176-0.604,10.565,2.601,12.977,6.094c2.017,19.621,5.63,37.449,10.78,53.428C160.26,230.334,157.76,230.692,152.508,230.629z
M164.023,185.608c-0.841-6.081-1.534-12.339-2.037-18.819c-0.284-3.641,2.743-8.181,5.669-12.57
c3.301-4.949,6.714-10.067,6.714-15.765V49.426h14.571v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41
h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-13.41h18.872v13.41
c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h18.872v13.41c0,3.238,2.624,5.863,5.863,5.863
s5.863-2.625,5.863-5.863v-13.41h18.873v13.41c0,3.238,2.624,5.863,5.863,5.863s5.863-2.625,5.863-5.863v-13.41h14.572v89.028
c0,5.699,3.413,10.817,6.714,15.767c2.927,4.389,5.954,8.927,5.671,12.569c-0.504,6.479-1.196,12.735-2.036,18.815
c-20.095,45.778-56.92,61.777-57.28,61.928c-2.023,0.843-3.405,2.745-3.587,4.928l-1.283,15.527h-59.661l-1.282-15.527
c-0.179-2.175-1.564-4.076-3.575-4.924C220.941,247.382,184.119,231.383,164.023,185.608z M171.462,221.023
c16.549,21.358,34.675,32.039,42.016,35.77l4.07,49.293c-6.225-6.313-10.443-14.197-14.766-22.277
c-2.908-5.436-5.916-11.058-9.546-16.163C184.024,254.691,176.766,239.088,171.462,221.023z M169.197,308.647
c-1.827,0-2.752-1.536-2.752-4.564c0-3.029,0.925-4.564,2.752-4.564h21.393v9.127H169.197z M87.531,498.453v-41.491
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v41.491H14.08c0,0,31.39-91.236,31.437-91.438
c0.025-0.107,4.981-13.11,21.771-25.079c16.813-11.986,48.152-28.637,106.499-40.204c-18.52,14.397-46.079,36.451-62.524,52.562
c-1.304,1.278-1.938,3.091-1.717,4.904c0.223,1.813,1.278,3.418,2.854,4.342l37.543,22.011l-17.448,28.338
c-1.223,1.988-1.151,4.511,0.182,6.426l26.572,38.138H87.531V498.453z M173.541,498.453l-29.045-41.689l18.575-30.167
c0.827-1.343,1.078-2.962,0.697-4.492c-0.381-1.53-1.363-2.842-2.723-3.64l-35.987-21.1c20.169-18.647,51.759-43.236,66.638-54.623
c2.964,27.029,12.136,100.969,28.91,155.711h-47.065V498.453z M232.888,498.453c-13.261-41.748-21.875-96.377-26.485-131.636
c11.297,10.871,27.731,18.133,46.249,19.307c0.448,0.11,6.242,0.11,6.691,0c18.5-1.173,34.921-8.423,46.216-19.277
c-4.619,35.112-13.227,89.479-26.465,131.605h-46.206V498.453z M291.366,498.453c16.777-55.25,25.958-128.796,28.929-155.716
c14.875,11.385,46.474,35.979,66.646,54.629l-35.987,21.1c-1.36,0.799-2.342,2.109-2.723,3.64c-0.381,1.53-0.13,3.15,0.697,4.492
l18.575,30.167l-29.045,41.689H291.366z M436.193,498.453v-41.491c0-3.238-2.624-5.863-5.863-5.863s-5.863,2.625-5.863,5.863v41.491
h-71.719l26.571-38.138c1.334-1.915,1.405-4.438,0.182-6.426l-17.448-28.338l37.542-22.011c1.576-0.924,2.63-2.529,2.854-4.342
c0.222-1.812-0.413-3.626-1.717-4.904c-16.448-16.115-44.015-38.176-62.535-52.573c115.75,22.922,127.839,64.707,128.283,65.294
c0.125,0.167,31.438,91.438,31.438,91.438h-61.725V498.453z"/>
<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>
components hml:
<div class="row">
<div class="col-md-8">
<div class="col-md-12">
<h1 class="text-focus-in">Welcome, to shock-me.de</h1>
</div>
<div class="mt-6 row">
<div class="col-md-6">
<img class="slide-in-fwd-center" src="./../../../assets/ghost.svg" alt="ghost" width="150px" height="auto">
</div>
<div class="col-md-6">
<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 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
... <== the paths included above
</svg>
</div>
</div>
</div>
</div>

do you need this ?
remember that you need to have an stroke on path to animate it.
svg { width: 200px; }
#scar {
stroke: #000;
stroke-width: 4px;
fill: none;
stroke-dasharray: 900;
stroke-dashoffset: 900;
animation: draw 2s linear 1 forwards;
}
#keyframes draw {
to {
stroke-dashoffset: 0;
fill: #000;
}
}
<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 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
<path id="scar" d="M198.847,124.107c-3.239,0-5.863,2.625-5.863,5.863c0,3.238,2.624,5.863,5.863,5.863h3.435v12.698
c0,3.238,2.624,5.863,5.863,5.863c3.239,0,5.863-2.625,5.863-5.863v-12.698h3.435c3.239,0,5.863-2.625,5.863-5.863
s-2.624-5.863-5.863-5.863h-3.435v-17.998h3.435c3.239,0,5.863-2.625,5.863-5.863s-2.624-5.863-5.863-5.863h-3.435V74.716
c0-3.238-2.624-5.863-5.863-5.863c-3.239,0-5.863,2.625-5.863,5.863v19.668h-3.435c-3.239,0-5.863,2.625-5.863,5.863
c0,3.238,2.624,5.863,5.863,5.863h3.435v17.998H198.847z"/>
</svg>

SVG blurry when resizing

I am using an svg from FlatIcons, When I import it and dont mess with the height/width it looks fine (but is too big) but when I start to reduce its size the borders become blurry and are no longer sharp.
e.g. https://codepen.io/geraintf/pen/ZoaPPW
What is going on? How can I scale an SVG to avoid this?
The SVG:
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 52.966 52.966" style="enable-background:new 0 0 52.966 52.966;" xml:space="preserve">
<path d="M51.704,51.273L36.845,35.82c3.79-3.801,6.138-9.041,6.138-14.82c0-11.58-9.42-21-21-21s-21,9.42-21,21s9.42,21,21,21
c5.083,0,9.748-1.817,13.384-4.832l14.895,15.491c0.196,0.205,0.458,0.307,0.721,0.307c0.25,0,0.499-0.093,0.693-0.279
C52.074,52.304,52.086,51.671,51.704,51.273z M21.983,40c-10.477,0-19-8.523-19-19s8.523-19,19-19s19,8.523,19,19
S32.459,40,21.983,40z"/>
<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>

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.

shadow in svg on hover

I don't see what I'm doing wrong, so perhaps someone else will!
Here goes: I've made a Facebook button in svg. When I hover over the button I would like it to "sink into the background" using a inline shadow.
Here is the svg:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {display:none;}
g#shadow:hover {display:block;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
</g>
<g id="layer_3">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>
The group with ID "shadow" should display when I hover over it, but it doesn't. Who sees my mistake?
Thanx,
Thom

The shadow elements are display:none and are therefore not rendered. There's nothing there to hover over.
This turns on the shadow when you hover anywhere over the button, assuming that's what you want to achieve. There's an additional hidden circle to catch all the events and the foreground is pointer-events: none so it doesn't interfere with the catching of the hover events.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 400 400" style="enable-background:new 0 0 400 400;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFE06B;}
.st1{fill:#F7C411;}
.st2{fill:#FF9900;}
g#shadow {visibility:hidden;pointer-events:all}
g#shadow:hover {visibility:visible;}
</style>
<g id="layer_1">
<circle class="st0" cx="200" cy="200" r="200"/>
</g>
<g id="shadow">
<path class="st1" d="M4,204C4,93.543,93.543,4,204,4c54.211,0,103.375,21.578,139.398,56.602C307.059,23.228,256.246,0,200,0
C89.543,0,0,89.543,0,200c0,56.245,23.227,107.058,60.602,143.397C25.578,307.374,4,258.211,4,204z"/>
<g>
<path class="st1" d="M246.379,103.232v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815h-39.952v-96.815h-19.608v-33.579h19.608v-20.099
c0-20.588,7.108-33.824,21.079-39.461c6.863-2.696,12.745-3.431,18.873-3.431H246.379z"/>
</g>
<circle visibility="hidden" cx="200" cy="200" r="200"/>
</g>
<g id="layer_3" pointer-events="none">
<g>
<path class="st2" d="M242.524,99.145v33.333h-18.138c-5.393,0-8.823,1.471-10.539,4.412c-1.226,1.961-1.716,5.392-1.716,10.049
v15.196h30.883l-3.677,33.579h-27.206v96.815H172.18v-96.815h-19.608v-33.579h19.608v-20.099c0-20.588,7.108-33.824,21.079-39.461
c6.863-2.696,12.746-3.431,18.874-3.431H242.524z"/>
</g>
</g>
</svg>

Resources