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