I have an SVG file and I want to include it in an HTML page. I want to style it using an external CSS file, but I don't want to include the stylesheet reference in the SVG itself.

Is this possible? Then how would you accomplish this?

  • 1
    Yes this is possible and I'm pretty sure, it's already answered on StackOverflow
    – Clijsters
    Commented Jan 11, 2017 at 7:01
  • @Clijsters The answers you link to appear to suggest this is not really possible: "the CSS needs to be defined inside of the SVG file" ... "the paths within your symbol can't be styled independently via external CSS -- you can only set the properties for the entire symbol with this method." (?)
    – MrWhite
    Commented Jan 11, 2017 at 8:58
  • "Your main.css file would only have an effect on the content of the SVG if the SVG file is included inline in the HTML:" I suggested a question. not an answer, didn't I? I'll answer this one.
    – Clijsters
    Commented Jan 11, 2017 at 9:31
  • 1
    This question appears to be off-topic because it is about web development which is off-topic at Pro Webmasters. Web development questions may be asked at Stack Overflow but be sure to read their FAQ before posting to ensure your question meets their guidelines.
    – John Conde
    Commented Jan 11, 2017 at 12:01

1 Answer 1


As already answered in this SO question, it is possible to style an SVG only if it's part of your DOM. If you load it using e.g. an <img> tag, as a background or so, only CSS code which is direct in your SVG-File would have effect.

Like described in the question's first answer this MDN article illustrates how you can use inline SVG.

However, if you want your SVG to stay in an external ressource, and not have to copy&paste it in your template, every time it changes (I hope you didn't think about this kind of 'solution'), you could load it dynamically into your DOM with a simple (untested) AJAX call:

//Assuming you have jQuery available
    url: './mysvgFile.svg',
    success: function(data) {
        if (data.childNodes.length > 0) { //should be one, _could_ be more
        } else {
            console.log('invalid SVG');
    error: function(data) {
        console.error('Error loading SVG!');

At this point your stylesheets can manipulate elements in your SVG.

Not the answer you're looking for? Browse other questions tagged or ask your own question.