Best practice for using SVG images?

Question

My research came up with a several ways to insert SVG images inside an html page. Using <img> is the most simple one but lack of ability as coloring the icons, which is my main need. So, I've read about using <object> but this still doesn't let me styling it using css fill command. Putting the bulk of <svg> data is also non acceptable since I want to use the images as a refernced images.

I've also read about jQuery solution but I use angularJS.

So, I've read a lot about the ability of SVG Icons, and how better they are rather than the old PNG-Sprite or the IconFonts hype. but unfortunatelly, I cant find any good reference for using it. Can anyone help me here?

tried this already, this doesn't work:

html:

<object data="your.svg" type="image/svg+xml" id="myImage"></object>

css:

#myImage {
    fill: #fff;
}

Answer 1

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

} 

Answer 2

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.