How to use external CSS with an external SVG symbol library

Question

I am attempting to create a library of SVG symbols for use throughout a website, and to style the symbols using a CSS file.

I can reference a CSS file from within an SVG file just fine. For example, this SVG file (icons.svg)

<?xml-stylesheet href="aqua-icons.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     version="1.1" xml:space="preserve">
  <defs>
    <symbol id="my-icon" height="48" width="48" viewbox="0 0 48 48">
      <circle class="filled" cx="24" cy="24" r="24"/>
    </symbol>
  </defs>
  <use xlink:href="#my-icon" x="0" y="0" width="48" height="48"/>
</svg>

combined with this CSS file (aqua-icons.css)

.filled {
  fill: aqua;
  stroke: black;
}

displays as an aqua circle in Chrome:

(and also Firefox)

The I tried to reference the symbol from another file. (icons_1.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
</head>
<body>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="icons.svg#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

The styling disappears. It seems that the stylesheet specification of an external SVG file is ignored in both Chrome and Firefox. As one possible workaround, I added a stylesheet reference to the HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
  <link rel="stylesheet" href="aqua-icons.css">
</head>
<body>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="icons.svg#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

This brings the aqua styling back in Firefox, but not in Chrome. In this case, it appears that Chrome's behavior is correct according to the standard

CSS2 selectors cannot be applied to the (conceptually) cloned DOM tree because its contents are not part of the formal document structure.2

So is there any way to style externally referenced SVG symbols from an external CSS file?

I don't think so. [If you want to keep your svg in files, the CSS needs to be defined inside of the svg file.](http://stackoverflow.com/a/20720935/2908724) — bishop, Jul 30 '15 at 17:55

score 0 · Answer 1 · answered Jul 30 '15 at 17:49

I have found one potential answer, but I am not sure it is ideal. I run a simple Ajax routine to load the SVG library into the DOM, and then use internal references on my <use> elements. Here is what the HTML looks like now:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Storage icons</title>
  <link rel="stylesheet" href="aqua-icons.css">
  <script src="/ext/jquery-1.11.3.js"></script>
  <script>
  $(document).ready(function(){
      $("#svg-libs").load("icons.svg");
  })
  </script>
</head>
<body>
  <div id="svg-libs" style="display:none"></div>
  <svg width="0.5in" height="0.5in" viewbox="0 0 48 48">
    <use xlink:href="#my-icon" x="0" y="0" width="48" height="48"/>
  </svg>
</body>
</html>

How to use external CSS with an external SVG symbol library

1 Answers1