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

This guide from CSS tricks is the best reference I've found so far.

Your options are, unfortunately, pretty limited to use CSS to style an SVG that's not inlined. It involves either embedding the styles inside the SVG file or linking to the stylesheet from within the SVG itself.

Both techniques are discussed in the CSS tricks guide.

Here's a JSFiddle demonstrating the linked CSS technique.

Here's how it works:

• Link to the stylesheet from within the CSS and add classes to the individual paths:

    <?xml-stylesheet type="text/css" href="mysvg.css"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48">
        <path class="demo-content" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" fill="rgb(98.34%, 88.24%, 32.2%)"/>
        <path class="demo-border" d="M11.31 44.5l12.69-12.3 12.691 12.3 7.809-8.2-12.69-12.3 12.69-12.3-7.809-8.2-12.691 12.3-12.69-12.3-7.81 8.2 12.691 12.3-12.691 12.3 7.81 8.2z" stroke="#ccc" stroke-linecap="square" fill="none"/>
    </svg>

• Create the css file, in this case mysvg.css:

    .demo-content {
      fill: #FF0000;
    }

If you're trying to conditionally style the SVG, though, you may have no chose other than embed it.

Answer 2

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

For embedding you have 3 choices:-

1. <object id="myObj" data="image.svg" width="200px" height="200px" type="image/svg+xml"></object>

2. <embed id="myEmb" src="image.svg" type="image/svg+xml" width="200px" height="200px" ></embed>

3. <iframe id="myIfr" src="image.svg" width="200" height="200" style="border:0" ></iframe>

Say the image.svg contains this circle in red: <circle id="redcircle" cx="100" cy="100" r="50" fill="transparent" stroke="red" stroke-width="3""/>

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);

}