How can I color fill an SVG image that is a background?

Question

I have an SVG image as a background for an element. I need to set the color of the image, but I can't seem to figure out how to do that. My CSS code is:

.myclass {
    background-image:url(path/to/my/image) no-repeat;
    display: block;
    width: 5em;
    height: 5em;
}

You pretty much can't. SVG used in an image context works pretty much like as a raster image so how would you do it if you had a .png file? — Robert Longson, Jun 22 '14 at 17:25
You can set the fill color on **inline** SVG... **not** when used as image. — Paulie_D, Jun 22 '14 at 19:08
I just upvoted you, so not to worry - you're now back to zero. "Ut nothi non te conterant" — TimSPQR, Jun 22 '14 at 20:25

score 1 · Answer 1 · answered Jun 22 '14 at 20:36

1

Did you try simply doing it in CSS? Not sure if this will work for you as I don't have a fiddle to fiddle with.

.myclass {
    background: red (path/to/my/image) no-repeat;
    display: block;
    width: 5em;
    height: 5em;
}

answered Jun 22 '14 at 20:36

Michael

6,895
3
23
19

I did, but it just changes the background color. – vintorg Jun 22 '14 at 20:47

score 0 · Answer 2 · edited May 23 '17 at 12:10

Ok, I have very little experience with svg, but I found this great link from SO - LINK.

I must say @Drew Baker IS THE MAN!!! I've changed his code from "look at all the svgs on a page" (.each) to just "a single one".

Here is the FIDDLE.

Hover over the dragon for a second or two the first time and you'll see the eyes turn red, like in the CSS.

JS

   var $img = $('img.svg');
   var imgID = $img.attr('id');
   var imgClass = $img.attr('class');
   var imgURL = $img.attr('src');
   $.get(imgURL, function(data) {
   var $svg = $(data).find('svg');
   $.get(imgURL, function(data) {
                                 var $svg = $(data).find('svg');
                                 if(typeof imgID !== 'undefined')
                                   {
                                    $svg = $svg.attr('id', imgID);
                                    }
                                 if(typeof imgClass !== 'undefined')
                                   {
                                    $svg = $svg.attr('class', imgClass+' replaced-svg');
                                    }
                                 $svg = $svg.removeAttr('xmlns:a');
                                 $img.replaceWith($svg);
                                 }, 'xml');
                               });

How can I color fill an SVG image that is a background?

2 Answers2