Best practice for using SVG images?

Question

My research came up with a several ways to insert SVG images inside an html page. Using is the most simple one but lack of ability as coloring the i

Answer 1

For manupulation, read How to change color of SVG image using CSS (jQuery SVG image replacement)?

For embedding you have 3 choices:-

Say the image.svg contains this circle in red:

To manipulate this color, try this function: ColObj('myObj','blue'), ColObj('myEmb','blue') or ColObj('myIfr','blue')

function getSubDocument(embedding_element)
{
    if (embedding_element.contentDocument) 
    {
        return embedding_element.contentDocument;
    } 
    else 
    {
        var subdoc = null;
        try {
            subdoc = embedding_element.getSVGDocument();
        } catch(e) {}
        return subdoc;
    }
}

function ColObj(elem, color)
{
    var elms = document.getElementById(elem);
    var subdoc = getSubDocument(elms);
    if (subdoc) 
        subdoc.getElementById("redcircle").setAttribute("stroke", color);

}