Created
July 23, 2026 10:26
-
-
Save tistre/daa797beb4626452e06e3ff2c998f447 to your computer and use it in GitHub Desktop.
Styling an SVG icon with “use” and CSS custom properties
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Looks like this:
