Geek Answers Handbook

Best practice for using SVG images?

In my research, there were several ways to insert SVG images inside an html page. Use <img>is the simplest but unable to colorize the icons, which is my basic need. So I read about usage <object>, but that still doesn't allow me to style it with the css fill command. Putting the bulk of the data is <svg>also unacceptable, since I want to use images as recorded images.

I also read about jQuery solution, but I am using angularJS.

So, I read a lot about the capabilities of SVG Icons and how much better they are than about legacy PNG-Sprite or IconFonts scripts. but unfortunately I can’t find a good link to use it. Can someone help me here?

tried this already, it doesn't work:

HTML:

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

CSS

#myImage {
    fill: #fff;
}
+3
source share
2 answers

For <img>manupulation, read How do I change the color of an SVG image using CSS (replacing a jQuery SVG image)?

For investment you have 3 options: -

  • <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 what image.svgthis circle contains in red:<circle id="redcircle" cx="100" cy="100" r="50" fill="transparent" stroke="red" stroke-width="3""/>

To manage this color, try to fulfill this function: ColObj('myObj','blue'), ColObj('myEmb','blue')orColObj('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);

}
+1
source

CSS - , .

, , , CSS SVG, . SVG , SVG.

CSS .

JSFiddle, CSS.

:

  • CSS :

    <?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>
  • css, mysvg.css:


    .demo-content {
      fill: #FF0000;
    }

SVG, , , , .

0

More articles:


All Articles