🔰SVG
Scalable Vector Graphics
browser ⟩ SVG
SVG tags (although can be included within HTML) are XML tags, not HTML tags.
to create SVG elements with JavaScript, can’t use createElement(), must use createElementNS(), which takes an XML namespace string (for SVG, it's
"http://www.w3.org/2000/svg"
) as its first argument.
Code Snippet
💾 https://replit.com/@pegasusroe/SVG-sprite
<!-- ⭐️
`width="0" height="0"` or
`display="none"`
prevent SVG from being rendered
-->
<svg width="0" height="0">
<!-- ⭐️ definitions to be used later -->
<defs>
<!-- ⭐️ `g` for group, much like `div` in HTML -->
<g id="xxx">
<path d="">
<path d="">
</g>
</defs>
<!-- ⭐️ SVG will NOT draw `symbol`, it's just a definition -->
<symbol id="twitter" viewBox="0 0 100 100">
<title>@CoolCompany on Twitter</title>
<path d="...">
</symbol>
<symbol id="codepen" viewBox="0 0 200 175">
<title>See Our CodePen Profile</title>
<path d="...">
<path d="...">
</symbol>
</svg>
<!-- ⭐️ this will draw an icon here. -->
<svg class="icon" viewBox="0 0 100 100">
<!-- `title` is for screen reader -->
<title>@CoolCompany on Twitter</title>
<!-- ⭐️ use icon with ID "twitter" in definitions -->
<use xlink:href="#twitter" />
</svg>
Last updated
Was this helpful?