Javascript – modify stroke and fill of svg image with javascript


I am trying to modify the stroke and fill of an .svg image.
I have been getting some information from Is it possible to manipulate an SVG document embedded in an HTML doc with JavaScript?.

I used javascript to manipulate it, the javascript in the header:

function svgMod(){
    var s = document.getElementById("svg_img");

the html:

<body onload="svgMod();">
<img id="svg_img" src="image.svg">  

Any help appreciated!

I think the main problem here is how to display an svg image as an svg element, an actual image that instead of an ending like .png or .jpeg, uses an ending of .svg, and furthermore how the fill and stroke of it can then be manipulated!

Best Solution

If you use an img tag then for security reasons you will not be able to access the DOM of the image data. The image is effectively the same as an animated bitmap as far as the container is concerned.

Using an <iframe> or <object> tag will allow you to manipulate the embedded object's DOM.