SVG CSS var demo

by Scott Kaye

HTML

<svg style="display:none">
	<symbol id="test-symbol" viewBox="0 0 100 100">
		<rect width="100" height="100" style="fill:var(--outer-fill, #000)"/>
		<rect width="50" height="75" fill="lime" x="25" style="fill:var(--inner-fill, lime)"/>
	</symbol>
</svg>

<svg id="thing">
	<use xlink:href="#test-symbol" />
</svg>

CSS

svg#thing {
	width: 100px;
	height: 100px;
	--outer-fill: red;
	--inner-fill: blue;
}