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