Wrong fill color

[majakovacevic]

trafficstars

Sometimes when I add new icon to my project there is a problem with SVG output. For some reason I am getting the wrong fill color when icon has it fill color defined in class, and not like inline style. Also, I am missing <g> element in output.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="42px" height="42px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
<style type="text/css">
    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#3C7057;}
</style>
<path class="st0" d="M34,25c-1.841,0-3.55,0.555-4.976,1.503C29.63,25.294,30,23.946,30,22.5c0-0.828-0.672-1.5-1.5-1.5
    c-0.828,0-1.5,0.672-1.5,1.5c0,3.314-2.686,6-6,6c-3.314,0-6-2.686-6-6c0-0.828-0.672-1.5-1.5-1.5c-0.828,0-1.5,0.672-1.5,1.5
    c0,4.458,3.245,8.15,7.5,8.865V34h3v-2.635c1.272-0.214,2.435-0.719,3.467-1.406C25.353,31.175,25,32.545,25,34
    c0,2.297,0.868,4.387,2.285,5.977C25.307,40.632,23.198,41,21,41C9.954,41,1,32.046,1,21S9.954,1,21,1s20,8.954,20,20
    c0,2.198-0.368,4.307-1.023,6.285C38.387,25.868,36.297,25,34,25z M25.5,21h-2.25c-0.414,0-0.75-0.336-0.75-0.75
    c0-0.414,0.336-0.75,0.75-0.75h2.25V18h-2.25c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h2.25V15h-2.25
    c-0.414,0-0.75-0.336-0.75-0.75c0-0.414,0.336-0.75,0.75-0.75h1.974c-0.62-1.744-2.268-3-4.225-3c-1.956,0-3.604,1.256-4.224,3
    h1.975c0.414,0,0.75,0.336,0.75,0.75c0,0.414-0.336,0.75-0.75,0.75H16.5v1.5h2.25c0.414,0,0.75,0.336,0.75,0.75S19.164,18,18.75,18
    H16.5v1.5h2.25c0.414,0,0.75,0.336,0.75,0.75c0,0.414-0.336,0.75-0.75,0.75H16.5v1.5c0,2.485,2.015,4.5,4.5,4.5
    c2.485,0,4.5-2.015,4.5-4.5V21z M34,27c3.866,0,7,3.134,7,7s-3.134,7-7,7s-7-3.134-7-7S30.134,27,34,27z M34,39c2.761,0,5-2.239,5-5
    s-2.238-5-5-5c-2.761,0-5,2.239-5,5S31.239,39,34,39z M33,30.969h2v2h2v2h-2v2h-2v-2h-2v-2h2V30.969z"/>
</svg>

For me, only solution is to implement class style to inline stile and add <g> element in every icon that has wrong output. After applying this changes I am getting the right color:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.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="42px" height="42px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">

<g>
<path style="fill-rule:evenodd;clip-rule:evenodd;fill:#3C7057;" d="M34,25c-1.841,0-3.55,0.555-4.976,1.503C29.63,25.294,30,23.946,30,22.5c0-0.828-0.672-1.5-1.5-1.5
    c-0.828,0-1.5,0.672-1.5,1.5c0,3.314-2.686,6-6,6c-3.314,0-6-2.686-6-6c0-0.828-0.672-1.5-1.5-1.5c-0.828,0-1.5,0.672-1.5,1.5
    c0,4.458,3.245,8.15,7.5,8.865V34h3v-2.635c1.272-0.214,2.435-0.719,3.467-1.406C25.353,31.175,25,32.545,25,34
    c0,2.297,0.868,4.387,2.285,5.977C25.307,40.632,23.198,41,21,41C9.954,41,1,32.046,1,21S9.954,1,21,1s20,8.954,20,20
    c0,2.198-0.368,4.307-1.023,6.285C38.387,25.868,36.297,25,34,25z M25.5,21h-2.25c-0.414,0-0.75-0.336-0.75-0.75
    c0-0.414,0.336-0.75,0.75-0.75h2.25V18h-2.25c-0.414,0-0.75-0.336-0.75-0.75s0.336-0.75,0.75-0.75h2.25V15h-2.25
    c-0.414,0-0.75-0.336-0.75-0.75c0-0.414,0.336-0.75,0.75-0.75h1.974c-0.62-1.744-2.268-3-4.225-3c-1.956,0-3.604,1.256-4.224,3
    h1.975c0.414,0,0.75,0.336,0.75,0.75c0,0.414-0.336,0.75-0.75,0.75H16.5v1.5h2.25c0.414,0,0.75,0.336,0.75,0.75S19.164,18,18.75,18
    H16.5v1.5h2.25c0.414,0,0.75,0.336,0.75,0.75c0,0.414-0.336,0.75-0.75,0.75H16.5v1.5c0,2.485,2.015,4.5,4.5,4.5
    c2.485,0,4.5-2.015,4.5-4.5V21z M34,27c3.866,0,7,3.134,7,7s-3.134,7-7,7s-7-3.134-7-7S30.134,27,34,27z M34,39c2.761,0,5-2.239,5-5
    s-2.238-5-5-5c-2.761,0-5,2.239-5,5S31.239,39,34,39z M33,30.969h2v2h2v2h-2v2h-2v-2h-2v-2h2V30.969z"/>
</g>
</svg>

[ed1nh0]

I had this same issue on my nav links with SVG inline (but color filled via CSS). I solved it by removing the CSS transitions which was just to fade colors on :hover effect.