fill property not working for SVGs

Question

I get my SVGs from thenounproject.com, however i cannot change their color as fill does nothing.

I am using Ruby on Rails, so I used <%= image_tag('#'), :class => "tomatoe" %>

and my css looks like this

.tomatoe{
    @include transition-property(all);  
    @include transition-duration(1s);
    fill: white;
    width: 100px;
    margin-top: 1em;
}

Fill never works, tried it on several SVGs but no luck and I have no clue why.

score 10 · Accepted Answer · edited May 23 '17 at 11:58

10

You can't customize a SVG with CSS by importing it through an img tag, you'll have to embed the SVG code in your HTML in order to achieve this.

The accepted answer for this question has an interesting approach, by replacing every img tag by inline SVG to allow CSS styling.

edited May 23 '17 at 11:58

Community

answered Jan 14 '14 at 03:32

Alcides Queiroz

Never thought it would be this complicated. Was kind of hoping for a pure CSS way of doing this but this will have to do. Thanks! – Jan 14 '14 at 03:54
1

It is a pure CSS approach. It is just that CSS does not apply across object boundaries. The external SVG file is a different object to the HTML file. You resolve that by embedding the SVG as Alcides says. – Paul LeBeau Jan 14 '14 at 16:45

1 Answers1