Few ways to use an svg in your page:
Using the <object> 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
<object type="image/svg+xml" data="images/logo.svg" id="logo"></object>
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 <img> tag
Example
<img type="image/svg+xml" src="images/icons/icon_arrow.svg" alt="Arrow" class="svg-icon svg-icon-arrow" />
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
<div>
<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 "/>
</svg>
</div>
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!
<svg xmlns="http://www.w3.org/2000/svg">
<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>
</svg>
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.
<svg class="icon">
<use xlink:href="sprite.svg#tiktok" />
</svg>
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.
