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

here are 10 reasons to use svg icons rather than icon fonts http://ianfeather.co.uk/ten-reasons-we-switched-from-an-icon-font-to-svg/ — Yaniv, Jul 28 '14 at 19:23

score 2 · Answer 1 · edited May 23 '17 at 12:30

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

For embedding you have 3 choices:-

<object id="myObj" data="image.svg" width="200px" height="200px" type="image/svg+xml"></object>
<embed id="myEmb" src="image.svg" type="image/svg+xml" width="200px" height="200px" ></embed>
<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);

}

score 0 · Answer 2 · answered Jul 28 '14 at 19:59

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.

so you're saying that all I need to do is to add the href to the tag, and add classes to the paths? sounds like a lot of work when im working on a huge amount of images. isn't it? — Yaniv, Jul 28 '14 at 20:30
@Yaniv, yes it may be a lot of work depending on the complexity of your SVGs but this is all that's currently supported. — Scott, Aug 26 '14 at 20:29

Best practice for using SVG images?

2 Answers2

Linked