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
  •  | 
  •  

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?

有帮助吗?

解决方案

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>
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top