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:

• 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.