Rotate multiple SVG layers in different directions using just CSS Hover - html

I'm attempting to rotate SVG layers in different directions when a user hovers over the image. I can easily rotate the div container but of course this rotates the entire image. I've made a start on the code and hoping that one of you bright sparks familar with SVG animations can help me in the right direction. If possible I'd like to avoid SVG SMIL or JavaScript solutions.
Here is my HTML Code:
<div class="services-one">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="35px" height="35px" viewBox="0 0 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
<g id="sm_ring">
<path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z"/>
<path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z"/>
<path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z"/>
</g>
<g id="md_ring">
<path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z"/>
<path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z"/>
<path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z"/>
</g>
<g id="lg_ring">
<path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z"/>
<path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z"/>
<path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z"/>
</g>
</svg>
</div>
Here is my CSS Code:
.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring
{
-webkit-transition-duration:0.8s;-moz-transition-duration:0.8s;-o-transition-duration:0.8s;transition-duration:0.8s;
-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;transition-property:transform;
overflow:hidden;
}
.services-one:hover #lg_ring, .services-one:hover #sm_ring
{
-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);
}
.services-one:hover #md_ring
{
-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg);
}
Here is my JSFiddle: http://jsfiddle.net/bcdxmpyc/
The top example is the SVG one that I'm attempting to rotate, I want it too rotate just like example below it, but obviously the rings in different directions! What am I doing wrong?


You need to specify the transform-origin
.services-one {
width: 100px; height: 100px;
}
.services-one #lg_ring, .services-one #sm_ring, .services-one #md_ring {
-webkit-transition-duration:0.8s;
-moz-transition-duration:0.8s;
-o-transition-duration:0.8s;
transition-duration:0.8s;
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-o-transition-property:-o-transform;
transition-property:transform;
overflow:hidden;
transform-origin:center center; /* here */
}
.services-one:hover #lg_ring, .services-one:hover #sm_ring {
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
transform:rotate(360deg);
}
.services-one:hover #md_ring {
-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
-o-transform:rotate(-360deg);
transform:rotate(-360deg);
}
<div class="services-one">
<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 35 35" enable-background="new 0 0 35 35" xml:space="preserve">
<g id="sm_ring">
<path fill="#F1B91B" d="M17.495,15.592c-0.969,0-1.769,0.727-1.891,1.662H14.1c0.125-1.765,1.596-3.158,3.395-3.158c0.532,0,1.036,0.122,1.483,0.34l-0.75,1.303C18.003,15.645,17.755,15.592,17.495,15.592z" />
<path fill="#626363" d="M17.495,19.407c0.26,0,0.508-0.052,0.733-0.147l0.75,1.305c-0.447,0.219-0.951,0.34-1.483,0.34c-1.798,0-3.269-1.394-3.395-3.157h1.504C15.726,18.682,16.526,19.407,17.495,19.407z" />
<path fill="#626363" d="M19.402,17.506c-0.01-0.617-0.313-1.16-0.773-1.501l0.732-1.316c0.91,0.599,1.521,1.622,1.537,2.794c0.019,1.173-0.559,2.215-1.449,2.841l-0.773-1.293C19.126,18.675,19.413,18.123,19.402,17.506z" />
</g>
<g id="md_ring">
<path fill="#F1B91B" d="M17.488,13.011c-2.279,0-4.163,1.709-4.447,3.912l-3.54,0.001c0.296-4.154,3.758-7.434,7.987-7.434c1.253,0,2.438,0.288,3.495,0.802l-1.77,3.065C18.684,13.135,18.102,13.011,17.488,13.011z" />
<path fill="#626363" d="M17.488,21.989c0.612,0,1.194-0.124,1.727-0.347l1.77,3.064c-1.057,0.514-2.242,0.802-3.495,0.802c-4.229,0-7.691-3.278-7.987-7.433l3.54-0.001C13.325,20.279,15.209,21.989,17.488,21.989z" />
<path fill="#626363" d="M21.979,17.501c0-1.452-0.695-2.741-1.769-3.561l1.772-3.071c2.121,1.441,3.517,3.873,3.517,6.632c0,2.758-1.396,5.188-3.517,6.63l-1.772-3.068C21.282,20.241,21.979,18.951,21.979,17.501z" />
</g>
<g id="lg_ring">
<path fill="#F1B91B" d="M17.476,7.925c-4.862,0-8.88,3.646-9.488,8.345H0.437C1.068,7.409,8.453,0.413,17.476,0.413c2.674,0,5.204,0.615,7.458,1.71l-3.776,6.54C20.021,8.189,18.779,7.925,17.476,7.925z" />
<path fill="#626363" d="M17.476,27.075c1.303,0,2.547-0.263,3.682-0.738l3.775,6.54c-2.254,1.096-4.783,1.71-7.458,1.71c-9.023,0-16.408-6.994-17.039-15.856h7.551C8.595,23.43,12.613,27.075,17.476,27.075z" />
<path fill="#626363" d="M27.052,17.501c0-3.095-1.483-5.846-3.77-7.597l3.778-6.549c4.528,3.075,7.502,8.262,7.502,14.146c0,5.883-2.974,11.069-7.5,14.144l-3.78-6.547C25.568,23.346,27.052,20.596,27.052,17.501z" />
</g>
</svg>
</div>
Transform-origin does not work very well in Firefox and does nothing in Internet Explorer. You can however get around this problem with using the JavaScript libraries svgjs or gsap.

Related

Problems with controlling SVG colors from outside through CSS

I got an SVG from a designer of which I'd like to set the color through CSS from outside of the SVG. I managed to overwrite part of the colors, but not all. What would I need to do to have the icon unfilled, with red lines over the grey background? Ideally without modifying the SVG because there are plenty of them with similar structure.
html {
background-color: #eeeeee;
}
.icon{
height: 6rem;
width: 6rem;
}
svg {
fill:red;
}
<html>
<div class="icon">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" baseProfile="basic" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 76.5 76.5" xml:space="preserve">
<style type="text/css">
.st0{display:none;}
.st1{fill:none;stroke:#000000;stroke-width:2;}
.st2{fill:#FFFFFF;}
.st3{fill:none;stroke:#FFFFFF;stroke-width:5;}
.st4{fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st5{display:inline;}
.st6{font-family:'Akkurat-Bold';}
.st7{font-size:7.0024px;}
.st8{display:inline;fill:#2B3427;}
.st9{fill:none;stroke:#2B3427;stroke-width:2;}
.st10{fill:none;stroke:#2B3427;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.st11{display:inline;fill:#FFFFFF;}
.st12{fill:#2B3427;}
</style>
<g id="Vorlagen" class="st0">
</g>
<g id="Kreis_Black">
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
</g>
<g id="Illu">
<g>
<path class="st1" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st1" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st4" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st2" width="32.6" height="8.1"/>
</g>
<g id="Typo" class="st0">
<text transform="matrix(1 0 0 1 25.4238 53.8332)" class="st5 st6 st7">VEGAN</text>
</g>
<g id="Typo_Gepfadet">
<g>
<path d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
<g id="Ikons_x5F_Grün" class="st0">
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<path class="st8" d="M38.3,4.8c18.4,0,33.4,15,33.4,33.4s-15,33.4-33.4,33.4S4.8,56.7,4.8,38.3S19.8,4.8,38.3,4.8 M38.3,2.8
C18.7,2.8,2.8,18.7,2.8,38.3s15.9,35.4,35.4,35.4s35.4-15.9,35.4-35.4S57.8,2.8,38.3,2.8L38.3,2.8z"/>
<g class="st5">
<path class="st9" d="M35.2,43.3c-1.5,1-9.1,3.6-14.7-1.1c-4-3.3-4.4-8.7-3.6-24.9c9.5-0.9,17.4,0.9,22,5c4.1,3.6,3.9,8.6,4.3,11.2
C43.6,36.5,39.5,40.4,35.2,43.3z"/>
<path class="st2" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st3" d="M44.8,41.6c9.7,6,18.3-7.2,20.2-15.9c-5.5-3.6-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st2" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6"/>
<path class="st9" d="M44.8,41.6C57.2,51.9,63,36.7,64.9,25.7c-8.2-3.9-13-2.3-17.7,0.6C43.8,28.5,39.2,35,44.8,41.6z"/>
<path class="st10" d="M22.7,22.6c0,0,14.8,6,11.3,43.2c0,0,12.4-31.6,24-36.1"/>
</g>
<rect x="21.1" y="47.3" class="st11" width="32.6" height="8.1"/>
<g class="st5">
<path class="st12" d="M28.1,53.8h-1l-1.6-5h1l1.2,3.8l1.2-3.8h0.9L28.1,53.8z"/>
<path class="st12" d="M30.8,53.8v-5h3.5v0.8h-2.6v1.2H34v0.8h-2.3V53h2.6v0.8H30.8z"/>
<path class="st12" d="M38.9,53.8l-0.1-0.5c-0.1,0.3-0.6,0.6-1.2,0.6c-0.6,0-1.1-0.1-1.5-0.6c-0.5-0.5-0.6-1.2-0.6-2s0.1-1.5,0.6-2
c0.4-0.4,0.9-0.6,1.5-0.6c0.6,0,1.1,0.2,1.5,0.6c0.2,0.3,0.4,0.6,0.5,1h-0.9c0-0.2-0.1-0.3-0.2-0.5c-0.2-0.2-0.4-0.3-0.8-0.3
c-0.3,0-0.6,0.1-0.8,0.3c-0.3,0.4-0.4,1-0.4,1.4s0,1.1,0.4,1.5c0.2,0.2,0.5,0.3,0.8,0.3c0.3,0,0.6-0.1,0.7-0.3
c0.3-0.3,0.3-0.6,0.3-1h-1.2v-0.8h2.1v2.7H38.9z"/>
<path class="st12" d="M44,53.8l-0.3-1h-2l-0.3,1h-0.9l1.7-5h1l1.7,5H44z M42.7,50L42,52.1h1.4L42.7,50z"/>
<path class="st12" d="M49.1,53.8l-2.2-3.4v3.4H46v-5h1l2.1,3.4v-3.4H50v5H49.1z"/>
</g>
</g>
</svg>
</div>
</html>

why not simply remove the style part inside the SVG ?
(and create your own css [in the html HEAD] with the colors you want)
other just use css !impotant in your css
html { background-color: #eeeeee; }
.icon{
height: 6rem;
width: 6rem;
}
svg { fill:red; }
/* add: */
.st1 { stroke:blue !important; }
path { stroke:orange !important; }

SVG is a regular HTML element. Therefore it takes background-color: white or transparent instead of fill to stylize its background.

How to change Icon when holding mouse over

I have two svg icons, and i want to change from one to another in html when holding mouse pointer over, but am i quite new with icons, can somebody help?
I want to make the white icon become black when pointing at it with my mouse.
I am trying to make a "setting icon" with a link ;)
I have the svg code here:
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<g id="settings-on_1_">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</svg>

I've putted the icons in a defs element. Also since the elements, as you draw them, have a different position on the svg canvas, I'm translaling them back to the same position. I'm using the first icon with a <use> element. Next I'm using javascript in order to change the value of the xlink:href on mouseover and mouseleaave. I hope it helps
const SVG_XLINK = "http://www.w3.org/1999/xlink";
navigation.addEventListener("mouseover",(e)=>{
elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_on_1_');
})
navigation.addEventListener("mouseleave",(e)=>{
elUse.setAttributeNS(SVG_XLINK, 'xlink:href', '#settings_1_');
})
body{background:white;}
svg{border:solid}
<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" viewBox="0 0 24 24" >
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<defs>
<g id="settings_on_1_" transform="translate(-30,-86)">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_" transform="translate(-2,-86)">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</defs>
<use id="elUse" xlink:href="#settings_1_" />
</svg>

You can just use one svg, and then use svg:hover and the color you want it to show when you point the mouse over it.
svg:hover {
fill: red/black/...;
}

enter link description here
Please refer to above example and pass your image dynamically !!
<!DOCTYPE html>
<html>
<body>
<img onmouseover="changeImg(this)" id="myImage" onmouseout="normalImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="62" height="62">
<p>On Image hover Example</p>
<script>
var image = document.getElementById('myImage');
function changeImg(x) {
image.src = "https://cdn.pixabay.com/photo/2015/03/04/22/35/head-659652_1280.png";
}
function normalImg(x) {
image.src = "https://www.w3schools.com/jsref/smiley.gif";
}
</script>
</body>
</html>
Please try to change to SVG i have done for the PNG .
Step to Do.
Try to implement onHover Event
Implement two function onHover and normal Function
Now Add permanent Image to Normal Function by getting Id using document.getElementById('myImage')
Same do for the other image

<svg version="1.1" id="navigation" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="56px" height="532px" viewBox="0 0 56 532" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<style type="text/css">
.st0 {
fill: #393B3D;
}
.st1 {
fill: #7B7C7D;
}
.st2 {
fill: #767879;
}
</style>
<g id="settings-on_1_">
<path class="st0" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9
c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0
l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2
c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2
c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4
l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6
S45.3,104,42,104z"></path>
</g>
<g id="settings_1_">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105
c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6
l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87
c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4
l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9
c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5
C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4
l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8
c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1
c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4
l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8
c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1
c0.5,0.1,0.8,0.5,0.8,1V108z"></path>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4
S16.2,94,14,94z"></path>
</g>
</g>
</svg>
Here is the new code you asked for "johannchopin" setting_1_
<style type="text/css">
</style>
<g id="settings_1_" transform="translate(-2,-86)">
<g>
<path class="st0" d="M16,110h-4c-0.6,0-1-0.4-1-1v-1.5c-0.6-0.2-1.1-0.4-1.6-0.7l-0.9,0.9c-0.4,0.4-1,0.4-1.4,0L4.2,105 c-0.4-0.4-0.4-1,0-1.4l0.9-0.9c-0.3-0.5-0.5-1.1-0.7-1.6H3c-0.6,0-1-0.4-1-1v-4c0-0.6,0.4-1,1-1h1.5c0.2-0.6,0.4-1.1,0.7-1.6 l-0.9-0.9c-0.4-0.4-0.4-1,0-1.4l2.7-3c0.2-0.2,0.4-0.3,0.7-0.3l0,0c0.3,0,0.5,0.1,0.7,0.3l0.9,0.9c0.5-0.3,1.1-0.5,1.6-0.7V87 c0-0.6,0.4-1,1-1h4c0.6,0,1,0.4,1,1v1.5c0.6,0.2,1.1,0.4,1.6,0.7l0.9-0.9c0.4-0.4,1-0.4,1.4,0l2.8,2.8c0.4,0.4,0.4,1,0,1.4 l-0.9,0.9c0.3,0.5,0.5,1.1,0.7,1.6H25c0.6,0,1,0.4,1,1v4c0,0.6-0.4,1-1,1h-1.5c-0.2,0.6-0.4,1.1-0.7,1.6l0.9,0.9 c0.4,0.4,0.4,1,0,1.4l-2.8,2.8c-0.2,0.2-0.4,0.3-0.7,0.3l0,0c-0.3,0-0.5-0.1-0.7-0.3l-0.9-0.9c-0.5,0.3-1.1,0.5-1.6,0.7v1.5 C17,109.6,16.6,110,16,110z M13,108h2v-1.2c0-0.5,0.3-0.9,0.8-1c0.9-0.2,1.7-0.5,2.5-1c0.4-0.2,0.9-0.2,1.2,0.1l0.8,0.8l1.4-1.4 l-0.8-0.8c-0.3-0.3-0.4-0.8-0.1-1.2c0.5-0.8,0.8-1.6,1-2.5c0.1-0.5,0.5-0.8,1-0.8H24v-2h-1.2c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.9-0.5-1.7-1-2.5c-0.2-0.4-0.2-0.9,0.1-1.2l0.8-0.8l-1.4-1.4l-0.8,0.8c-0.3,0.3-0.8,0.4-1.2,0.1c-0.8-0.5-1.6-0.8-2.5-1 c-0.5-0.1-0.8-0.5-0.8-1V88h-2v1.2c0,0.5-0.3,0.9-0.8,1c-0.9,0.2-1.7,0.5-2.5,1c-0.4,0.2-0.9,0.2-1.2-0.1l-0.8-0.8l-1.4,1.4 l0.8,0.8c0.3,0.3,0.4,0.8,0.1,1.2c-0.5,0.8-0.8,1.6-1,2.5c-0.1,0.5-0.5,0.8-1,0.8H4v2h1.2c0.5,0,0.9,0.3,1,0.8 c0.2,0.9,0.5,1.7,1,2.5c0.2,0.4,0.2,0.9-0.1,1.2l-0.8,0.8l1.4,1.4l0.8-0.8c0.3-0.3,0.8-0.4,1.2-0.1c0.8,0.5,1.6,0.8,2.5,1 c0.5,0.1,0.8,0.5,0.8,1V108z"/>
</g>
<g>
<path class="st0" d="M14,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S17.3,104,14,104z M14,94c-2.2,0-4,1.8-4,4s1.8,4,4,4s4-1.8,4-4 S16.2,94,14,94z"/>
</g>
</g>
<use id="elUse" xlink:href="#settings_1_"/>
</svg> ```And here is setting_on_1.svg ```<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="navigation" x="1px" y="1px" width="27px" height="27px" viewBox="0 0 1 9,5" style="enable-background:new 0 0 56 532;" xml:space="preserve" preserveAspectRatio="none">
<g id="settings-on_1_">
<g transform="translate(-29,-85)" id="settings_on_1_">
<path id="setting" d="M53,96h-1.2c-0.3-1.3-0.8-2.5-1.5-3.5l0.9-0.9c0.4-0.4,0.4-1,0-1.4l-1.4-1.4c-0.4-0.4-1-0.4-1.4,0l-0.9,0.9 c-1-0.7-2.2-1.2-3.5-1.5V87c0-0.6-0.4-1-1-1h-2c-0.6,0-1,0.4-1,1v1.2c-1.3,0.3-2.5,0.8-3.5,1.5l-0.9-0.9c-0.4-0.4-1-0.4-1.4,0 l-1.4,1.4c-0.4,0.4-0.4,1,0,1.4l0.9,0.9c-0.7,1-1.2,2.2-1.5,3.5H31c-0.6,0-1,0.4-1,1v2c0,0.6,0.4,1,1,1h1.2 c0.3,1.3,0.8,2.5,1.5,3.5l-0.9,0.9c-0.4,0.4-0.4,1,0,1.4l1.4,1.4c0.4,0.4,1,0.4,1.4,0l0.9-0.9c1,0.7,2.2,1.2,3.5,1.5v1.2 c0,0.6,0.4,1,1,1h2c0.6,0,1-0.4,1-1v-1.2c1.3-0.3,2.5-0.8,3.5-1.5l0.9,0.9c0.4,0.4,1,0.4,1.4,0l1.4-1.4c0.4-0.4,0.4-1,0-1.4 l-0.9-0.9c0.7-1,1.2-2.2,1.5-3.5H53c0.6,0,1-0.4,1-1v-2C54,96.4,53.6,96,53,96z M42,104c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6 S45.3,104,42,104z"/>
</g></g></svg>```

How change path and polyline in SVG?

I have two icons in svg.
Updated:
one
two
First of all, is it possible to make this icons using same markup?
For example:
<g>
<circle ... />
<path ... />
</g>?
Because i can operate only with classes. That mean that i want to change their styles in css and that why i want same markup for both icons.
Also i want remove cx="9" cy="9" from both icons, because this icon is part of the <rect /> and should be placed strictly on the verge of this <rect />. And this cx and cy move it sideways. If i just remove them, then icon become broken a bit. I need to change attributes of path and polyline also. How i can do it? Thank you

As for your re-use of SVG that part already has an answer here:
Inline SVG in CSS
You can do a lot with this using just CSS for example:
.firstxxx,
.secondxxx {
position: relative;
display: block;
top: -1.1em;
left: 6em;
}
.secondxxx circle{fill:blue;}
.containerthing {
height: 4em;
}
<div class="containerthing">1. One
<svg class="firstxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>
<div class="containerthing">2. Two
<svg class="secondxxx" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" cx="9" cy="9" r="9"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>
</div>

I don't know why, but if you want to remove cx="9" cy="9", you can use transform: translate()
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="311.7px" height="311.5px" viewBox="0 0 311.7 311.5" enable-background="new 0 0 311.7 311.5"
xml:space="preserve">
<defs>
</defs>
<g>
<circle magnet="true" fill="#E88585" r="9" transform="translate(9, 9)"></circle>
<g transform="translate(5.625000, 5.625000)" stroke="#F8F9FC">
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062" transform="translate(3.444609, 3.175632) scale(-1, 1) translate(-3.444609, -3.175632) "></path>
<path d="M0.548779871,6.31256521 L6.34043825,0.0386997062"></path>
</g>
</g>
</svg>

You can position the shape where you want and reference the SVG through xlink:href in the shape's attributes definition along with a specific markup through the JointJS Devs plugin. E.g.:
joint.shapes.devs.Model.define('app.MyWindow', {
markup: `<image/><text/>`,
position: {
x: 100,
y: 100
},
size: {
width: 10,
height: 10
},
attrs: {
image: {
width: 8,
height: 8,
'xlink:href': 'assets/my_svg.svg'
},
}
});

How do I use SVG icons in HTML?

I have an svg file with 3 icons.
When I import it via the <img> tag, I get the 3 icons one below each other.
I want to use the icons in a row, one next to the other.
How can I use them separately?
The .svg file:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.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" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.3px"
height="26.9px" viewBox="0 0 16.3 26.9" enable-background="new 0 0 16.3 26.9" xml:space="preserve">
<g id="bg">
</g>
<g id="ui">
<g>
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3 "/>
<polygon fill="none" stroke="#000000" stroke-miterlimit="10" points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8
3.8,26 4.6,21.3 1.1,18 6,17.3 "/>
</g>
</g>
<g id="pop_ups">
</g>
</svg>
Thanks!

Use the SVG file as a sprite.
Create an icon-sized element, hiding the overflow:
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
Position the SVG within the element so the icon shows through:
.icon > img {
position: relative;
}
.darkStar > img {
top: 0;
}
.lightStar > img {
top: -13.45px;
}
Demo (using inline SVG instead of a linked <img>, which defeats the purpose, but is easier to demo here):
.icon {
display: inline-block;
width: 16.3px;
height: 13.45px;
overflow: hidden;
}
.icon > svg {
position: relative;
}
.darkStar > svg {
top: 0;
}
.lightStar > svg {
top: -13.45px;
}
<span class="icon lightStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>
<span class="icon darkStar">
<svg width="16.3px" height="26.9px">
<polygon points="8.1,0 10.3,4.3 15.2,5 11.7,8.3 12.5,13 8.1,10.8 3.8,13 4.6,8.3 1.1,5 6,4.3" />
<polygon points="8.1,13 10.3,17.3 15.2,18 11.7,21.3 12.5,26 8.1,23.8 3.8,26 4.6,21.3 1.1,18 6,17.3" fill="none" stroke="#000000" stroke-miterlimit="10" />
</svg>
</span>

You can use fragment identifiers to display only part of the SVG file in any particular img element.
The advantage of this approach is that the "individual sprites" in your SVG file are defined in your SVG file, so when using it elsewhere you don't need to know anything of the internal structure, you can just ask for what you want by name:
<button>
<img src="x.svg#star1" alt="*">
</button>
The most cross-platform-compatible solution is add some SVG views which define which part of the image to show for which ID fragment. The view syntax is similar to the global viewBox attribute of the root SVG element*:
<view id="star1" viewBox="0 0 10 10"/>
Here's a good blog post (with a live example) which explains the technique in great detail.
*note that I haven't calculated that viewBox value for your SVG, you'll have to figure it out yourself.

I'm not sure if you mean vertically or horizontally, but here's something I found from Codepen.io which has a lot of SVG samples you might want to go through.
http://codepen.io/jonnowitts/pen/waONVV
Here he has SVG's lined up vertically in a row.
<button type="button" id="positive">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="check" fill="none" d="M0 20 L8 28 L25 10" stroke="white" stroke-width="3"/>
</svg>
<span>Positive</span>
</div>
</button>
<button id="negative">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="42" viewBox="-9 0 38 40" preserveAspectRatio="xMidYMid meet">
<path class="cross-1" fill="none" d="M0 10 L20 30" stroke="white" stroke-width="3"/>
<path class="cross-2" fill="none" d="M20 10 L0 30" stroke="white" stroke-width="3"/>
</svg>
<span>Negative</span>
</div>
</button>
<button id="warning">
<div class="content">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="42" viewBox="-3 0 38 40" preserveAspectRatio="xMidYMid meet">
<polygon class="triangle"
stroke="white"
stroke-width="2"
fill="none"
points="15,4 0,34 30,34"
/>
<path class="exclaim-1" d="M15 14 L15 22 Z" stroke-width="4" stroke="white" fill="none" />
<path class="exclaim-2" d="M15 24 L15 29 Z" stroke-width="4" stroke="white" fill="none" />
</svg>
<span>Warning</span>
</div>
</button>

Apply similar Fill Effect with 2 SVG icons

I'm new to SVG and I am trying to apply my first hover effect icon on the other two icons.
Here's what I have: http://jsfiddle.net/uhkwLuph/20/
Now my problem is I need to apply this effect on the other 2 icons but for some reason I got stuck and can't figure it out. For some reason it just wont work.
Here's the svg codes files that I have.
<!---ICON LIST--->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px"
height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
<style type="text/css">
.st0{display:inline;fill:#FFFFFF;stroke:#000000;stroke-miterlimit:10;}
.st1{display:inline;fill:none;stroke:#E6E6E6;stroke-width:4;stroke-miterlimit:10;}
.st2{fill:none;stroke:#E6E6E6;stroke-width:4;stroke-miterlimit:10;}
.st3{display:inline;fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}
.st4{fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}
</style>
<g id="Layer_1" class="st5">
<path class="st0" d="M247,180"/>
</g>
<g id="icon_2_">
<path class="st2" d="M155.5,70.5c0,5.799-4.701,10.5-10.5,10.5H55.5C49.701,81,45,76.299,45,70.5l0,0C45,64.701,49.701,60,55.5,60
H145C150.799,60,155.5,64.701,155.5,70.5L155.5,70.5z"/>
<path class="st2" d="M155.5,100.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
C45,94.701,49.701,90,55.5,90H145C150.799,90,155.5,94.701,155.5,100.5L155.5,100.5z"/>
<path class="st2" d="M155.5,130.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
c0-5.799,4.701-10.5,10.5-10.5H145C150.799,120,155.5,124.701,155.5,130.5L155.5,130.5z"/>
</g>
<g id="icon_1_" class="st5">
<rect x="45.25" y="71.5" class="st1" width="111.5" height="58"/>
<polyline class="st1" points="45.25,74.167 101,101.167 156.75,73.5 "/>
</g>
<g id="container">
<circle class="st4" cx="101" cy="99" r="89.333"/>
</g>
<g id="icon" class="st5">
<path class="st3" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
<circle class="st3" cx="77.843" cy="72.434" r="33.331"/>
<circle class="st3" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>
<!---ICON ENVELOPE --->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" id="icon2">
<style type="text/css">
.st2{display:inline;fill:none;stroke:#F2F2F2;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:none;stroke:#ffffff;stroke-width:4;stroke-miterlimit:10;}
</style>
<g id="container">
<circle class="st3" cx="101" cy="99" r="89.333"/>
</g>
<g id="icon" class="st4">
<path class="st2" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z"/>
<circle class="st2" cx="77.843" cy="72.434" r="33.331"/>
<circle class="st2" cx="77.844" cy="72.434" r="22.343"/>
</g>
</svg>
You can check the JSFIDDLE of these two here:
http://jsfiddle.net/21at30qm/ - List Icon
http://jsfiddle.net/fnq0zwsu/ - Envelope Icon
Thanks in advance.

You have to apply the class st0 to all path, circle, polygon and rect elements and add the .fill circle element that grows on :hover to all icons.
You have ids that are not unique, I've changed them to classes. ids must be unqiue.
Updated Fiddle
body {
background: #27ae60;
}
.st0 {
fill: none;
stroke: #F2F2F2;
stroke-width: 4;
stroke-miterlimit: 10;
}
.icon .st0 {
-webkit-transition: .5s;
transition: .5s;
}
.icon .fill {
-webkit-transition: .5s;
transition: .5s;
fill: #ffffff;
}
.icon:hover {
cursor: pointer;
}
.icon:hover .st0 {
stroke: #1f8a4c;
}
.icon:hover .fill {
-webkit-transform: scale(893, 893);
transform: scale(893, 893);
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
<g transform="translate(101,99)">
<circle class="fill" r="0.1" />
</g>
<g class="container">
<circle class="st0" cx="101" cy="99" r="89.333" />
</g>
<g class="icon-details">
<path class="st0" d="M146.899,134.202c3.856,4.702,2.772,11.963-2.418,16.218l0,0c-5.192,4.258-12.523,3.896-16.38-0.806
l-30.004-36.594c-3.855-4.701-2.772-11.964,2.418-16.22l0,0c5.19-4.256,12.523-3.895,16.377,0.808L146.899,134.202z" />
<circle class="st0" cx="77.843" cy="72.434" r="33.331" />
<circle class="st0" cx="77.844" cy="72.434" r="22.343" />
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
<g transform="translate(101,99)">
<circle class="fill" r="0.1" />
</g>
<g class="Layer_1">
<path class="st0" d="M247,180" />
</g>
<g class="icon_1_">
<rect class="st0" x="45.25" y="71.5" class="st1" width="111.5" height="58" />
<polyline class="st0" points="45.25,74.167 101,101.167 156.75,73.5 " />
</g>
<g class="container">
<circle class="st0" cx="101" cy="99" r="89.333" />
</g>
</svg>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve" class="icon">
<g transform="translate(101,99)">
<circle class="fill" r="0.1" />
</g>
<g class="Layer_1" class="st5">
<path class="h0" d="M247,180" />
</g>
<g class="icon_2_">
<path class="st0" d="M155.5,70.5c0,5.799-4.701,10.5-10.5,10.5H55.5C49.701,81,45,76.299,45,70.5l0,0C45,64.701,49.701,60,55.5,60
H145C150.799,60,155.5,64.701,155.5,70.5L155.5,70.5z" />
<path class="st0" d="M155.5,100.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
C45,94.701,49.701,90,55.5,90H145C150.799,90,155.5,94.701,155.5,100.5L155.5,100.5z" />
<path class="st0" d="M155.5,130.5c0,5.799-4.701,10.5-10.5,10.5H55.5c-5.799,0-10.5-4.701-10.5-10.5l0,0
c0-5.799,4.701-10.5,10.5-10.5H145C150.799,120,155.5,124.701,155.5,130.5L155.5,130.5z" />
</g>
<g class="container">
<circle class="st0" cx="101" cy="99" r="89.333" />
</g>
</svg>