Adding an SVG with HTML5

Few ways to use an svg in your page:

Using the tag

Just embed an svg into the page by requesting it as a resource from the server and embedding it into the page as a document.

Example



Known issue
On being a different document (like using an iframe) your styles won’t reach it. That may not be an issue to you but if you are planning to adapt its size or filling colors contextually or reactively then it can be. To sort it out you have different solutions, from accessing the element on runtime with javascript and override its styles directly to attach a link inside the SVG file that loads the required stylesheet file along the doc. Still, contextual styling can be a problem.

Using an tag

Example



Embedding the entire svg

You can actually paste the entire SVG into the code.

Con: This makes the code dirtier and forces the browser to download it every single time, also can be much dirtier if the SVG it’s a complex one with many tags in it.

Example


<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 59.9 60" style="enable-background:new 0 0 59.9 60;" xml:space="preserve">
<polygon class="st0" points="47.8,30 18.6,0.8 14.4,5 39.4,30 14.4,55.1 18.5,59.2 "/>



Using svg symbols

Another alternative is using an svg with symbols, this allows the browser to cache the svg file but only display the right symbol when loading an icon, it’s similar to an old-school sprite but much easier to handle/maintain.

Example. Note that each symbol has an id!


<defs>

<symbol id="twitch" viewBox="0 0 24 24">
<path d="M21 2H3v16h5v4l4-4h5l4-4V2zM11 11V7M16 11V7" />
</symbol>

<symbol id="tiktok" viewBox="0 0 24 24">
<path d="M12.53.02C13.84 0 15.14.01 16.44 0c.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/>
</symbol>

</defs>


Then in your HTML use these tags to load the svg and the required symbol, the sharp (#) works similar to an HTML anchor and will load the set symbol, allowing you to pick between different svgs inside the single file. Great for performance.


<use xlink:href="sprite.svg#tiktok" />


Cache Reminder: When using this approach I got an issue with Chrome mega caching the svg file, even using DevTools and Hard reload or rebuilding the entire project wouldn’t reload it. Even loading the file on a diff tab to refresh it (would refresh in that tab, but still kept it cached on my site somehow). Only thing that seemed to work was opening the site in an incognito window (and closing/reopening each time I made changes). Very important to double check your browser isn’t caching your svg when tweaking as you may feel like your changes made nothing when in reality it’s Chrome ultra-caching it.

More info

W3C

Stackoverflow

Understanding SVG ViewBox