Using SVG file in HTML5 and change color

Question

I want to use a svg file as image in my website. I am using this:

<object id="mysvg" type="image/svg+xml" data="logo.svg">Your browser does not support SVG</object>

It shows the image in page. But now I want to modify the image. This is a one color(black) image. and I want to make it white. Like fill with white. What is the best way to do that? Can I also achieve the same result on hover of the image? Thanks

Can you check : http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement — Roy M J, Sep 02 '13 at 16:00
See http://stackoverflow.com/questions/1619600/consistently-change-background-colour-upon-hovering-over-an-svg-link. — Erik Dahlström, Sep 03 '13 at 07:08

score 2 · Answer 1 · answered Sep 02 '13 at 15:58

You can modify the image from the html container using something like this:

var svgdoc = document.getElementById("mysvg").contentDocument;
var svgElement = svgdoc.getElementById("whatever the Id is of the black image");
svgElement.setAttribute("fill", "white");

For hover you'll need to put the logic in the logo.svg file itself i.e. create a <style> element and make a hover pseudo class rule to change the colour on hover.

Using SVG file in HTML5 and change color

1 Answers1