Is it possible to import a color palette and have stroke, fill, and gradient color stop colors refer to the palette?

StackOverflow https://stackoverflow.com/questions/23317134

  •  10-07-2023
  •  | 
  •  

Question

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?

Was it helpful?

Solution

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top