SVG tags (although can be included within HTML) are XML tags, notHTML tags.
to create SVG elements with JavaScript, can’t usecreateElement(), must use createElementNS(), which takes an XML namespace string (for SVG, it's "http://www.w3.org/2000/svg") as its first argument.
<!-- ⭐️
`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>
.icon {/* ⭐️ match font-size */width:1em;height:1em;/* ⭐️ match text color */fill:currentColor; }