External SVG fails to apply internal CSS

[holodoc]

I already made a thread about the issue on stackoverflow.com so I’ll just leave a brief explanation here and if you are interested in more details please head over there.

The issue I am facing is that all my attempts to load an external SVG file with internal CSS styles (all the styles are stored in the external file inside a <style> block at the top) result in black and white graphics as if the styles are not applied at all.

I’ve tried literally everything I could come up with on the web in the last couple of days without success. Here is once again a link to a DEMO which contains combined code of the external SVG file and the code that tries to load the symbols through <use> (please make note that the external file already has all the required namespaces defined).

[Chris Coyier]

I think the issue is that when you reference a symbol, you’re just referencing that chunk and that’s it.

<svg>
  <style></style>
  <symbol id="this"></symbol>
</svg>

This will go get the symbol, but not the styles:

<svg>
  <use xlink:href="this"></use>
</svg>

You might try putting the style block inside the symbol. I’ve never tried that but it stands to reason it might work. Or, move the style block to the document where you are using <use>

[holodoc]

I tried embedding the styles into the symbols and many other variations but ultimately all my attempts failed. After I’ve spent a decent amount of time trying to figure out the issue I came to the following conclusions (they are backed up by multiple sources, although none authoritative):

1) If an external SVG file contains styles which are put inside a separate <style> block and then the content of that file is supposed to be reused with <use>, browsers are simply going to ignore anything that is inside the <style> block of that external SVG, completely irrelevant of the way the <style> block is positioned.

2) Putting the code from an external SVG file containing a separate <style> block directly into an HTML file and then reusing it with <use> from within the same file works flawlessly.

3) [bonus point] Trying to <use> any kind of graphics from an external SVG file which contains gradients will result in either unpredictable behavior or the gradients will be completely ignored by browsers (again this seems to be the result of a specification “gray area” and browser inconsistency).

4) All the issues regarding the reuse of resources from external SVG files are present no matter how the files are loaded (directly from HTML, AJAX etc.)

What I’ve learned from this small adventure is that despite SVG showing huge potential it still is really inconsistent and painful to use unless it’s used for simple things like monochromatic icons (SVG icon systems) or the content of the SVG is put directly into the HTML file using it.

[Author]

Posts