2

I am experimenting with the idea of creating an SVG icon set. What I would like to do is define a color palette and have stroke, fill, and gradient color stop colors refer to colors in the palette, which would be imported somehow by each of the SVG files. This way, if I wanted to create a grayscale version of the icon set, or adapt the colors for a particular kind of colorblindness, then I could just change the palette.

Is something like this possible?

Daniel Trebbien
  • 38,421
  • 18
  • 121
  • 193

1 Answers1

2

Like any XML file, SVG supports CSS.

mystyle.css

rect {
  fill: red;
  stroke: blue;
  stroke-width: 3
}

SVG file referencing mystyle.css

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="mystyle.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="10cm" height="5cm" viewBox="0 0 1000 500">
  <rect x="200" y="100" width="600" height="300"/>
</svg>
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • Please help with this - http://stackoverflow.com/questions/23319537/html-5-inline-svg-and-namespace-awareness-for-svg-dom – Patt Mehta Apr 27 '14 at 06:51
  • +1 This is a good solution, and it works well in Chrome, Firefox, and Safari. However, Mac's file preview, GIMP, and Inkscape don't understand the stylesheet, so everything appears black. – Daniel Trebbien Apr 27 '14 at 17:55
  • You could also try using an @import in a ` – Paul LeBeau Apr 27 '14 at 19:05
  • @BigBadaboom: Yes, you are right. `@import` in a ` – Daniel Trebbien Apr 28 '14 at 10:59