1

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?

closed as off-topic by John Conde Jan 11 '17 at 12:01

  • This question does not appear to be about webmastering within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    Yes this is possible and I'm pretty sure, it's already answered on StackOverflow – Clijsters Jan 11 '17 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 Jan 11 '17 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 Jan 11 '17 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 Jan 11 '17 at 12:01
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
$.ajax({
    url: './mysvgFile.svg',
    success: function(data) {
        if (data.childNodes.length > 0) { //should be one, _could_ be more
            $('.myDiv').append(data.childNodes[0]);
        } 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.