SVG Path Fill Colour with CSS

Question

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

Answer 1

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.

Answer 2

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.

Answer 3

There's two ways to get it done.

1. Delete the value inside the fill attribute (fill="") and modify it via external CSS
2. 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