Skip to content

Instantly share code, notes, and snippets.

@tistre

tistre/circle.svg

Created July 23, 2026 10:26
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tistre/daa797beb4626452e06e3ff2c998f447 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tistre/daa797beb4626452e06e3ff2c998f447 to your computer and use it in GitHub Desktop.
Download ZIP
Styling an SVG icon with “use” and CSS custom properties
Display the source blob
Display the rendered blob
Raw
circle.svg
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg" id="root">
<circle cx="5" cy="5" r="4" fill="var(--circle-fill, pink)" stroke="var(--circle-stroke, blue)"/>
</svg>
Raw
test.html
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<p>SVG via <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/use">“use”</a>, can be styled:</p>
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg" style="--circle-fill: blue; --circle-stroke: black;">
<use href="circle.svg#root"></use>
</svg>
<p>SVG via “img”, cannot be styled (?):</p>
<img src="circle.svg"/>
</body>
</html>
@tistre

tistre commented Jul 23, 2026

Copy link
Copy Markdown
Author

Looks like this:
browser-screenshot

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment