SVG has been around for a long time, but it’s being talked about a lot recently because of the advantages it has for high-resolution screens. Furthermore, browser support has come a long way for SVG and is widely supported in all modern browsers with decent performance back to IE9.
I have recently been exploring how to use inline SVG for the best possible browser support. If you’re not familiar with inline SVG, it is the method of adding SVG code directly into the markup as opposed to linking to a file such as example.svg. Inline SVG is preferable for two main reasons: it eliminates the need for a separate HTTP request and allows you to style the SVG using CSS. Pretty cool, huh?
There are a number of ways to approach this, most of which include adding big chunks of code right into the middle of your document. Personally, I’m not a fan of these methods as they hinder the readability of your code. This is certainly true if you are using multiple SVGs within the document.
A better alternative would be to implement the use tag and reference an SVG located elsewhere in the document. This effectively reduces the clutter and helps to better organize your code. The result would look something like this:
<svg style="display:none;">
<defs>
<symbol id="facebook-icon" viewBox="0 0 95 95">
<path d="M75.2-0.3L62.2-0.4c-14.6 0-24 9.7-24 24.7v11.4H25.1c-1.1 0-2 0.9-2 2v16.5c0 1.1 0.9 2 2 2h13.1v41.6c0 1.1 0.9 2 2 2h17c1.1 0 2-0.9 2-2V56.2h15.3c1.1 0 2-0.9 2-2l0-16.5c0-0.5-0.2-1.1-0.6-1.4 -0.4-0.4-0.9-0.6-1.4-0.6H59.3v-9.6c0-4.6 1.1-7 7.1-7l8.8 0c1.1 0 2-0.9 2-2V1.7C77.2 0.6 76.3-0.3 75.2-0.3z"/>
</symbol>
<symbol id="twitter-icon" viewBox="0 0 16 16">
<path d="M16 3c-0.6 0.3-1.2 0.4-1.9 0.5 0.7-0.4 1.2-1 1.4-1.8 -0.6 0.4-1.3 0.6-2.1 0.8C12.9 1.9 12 1.5 11.1 1.5c-1.8 0-3.3 1.5-3.3 3.3 0 0.3 0 0.5 0.1 0.7C5.2 5.4 2.7 4.1 1.1 2.1 0.8 2.6 0.7 3.1 0.7 3.8c0 1.1 0.6 2.1 1.5 2.7C1.6 6.5 1.1 6.3 0.6 6.1v0c0 1.6 1.1 2.9 2.6 3.2C3 9.4 2.7 9.4 2.4 9.4c-0.2 0-0.4 0-0.6-0.1 0.4 1.3 1.6 2.3 3.1 2.3 -1.1 0.9-2.5 1.4-4.1 1.4 -0.3 0-0.5 0-0.8 0C1.5 14 3.2 14.5 5 14.5c6 0 9.3-5 9.3-9.3L14.4 4.7C15 4.3 15.6 3.7 16 3z"/>
</symbol>
</defs>
</svg>
<div class="container">
<svg class="facebook-icon">
<use xlink:href="#facebook-icon"></use>
</svg>
<svg class="twitter-icon">
<use xlink:href="#twitter-icon"></use>
</svg>
</div>
In the above example, we are adding multiple vector paths to a single SVG element by using the defs tag. Then we can reference each path elsewhere in the document by using the attached id. To prevent our reference SVG from showing up in the browser, we can simply add display:none; to the element.
Note:
It may be tempting to add your SVG definitions to the bottom of the document as this would be optimal for eliminating clutter. However, I discovered that Safari can’t reference SVGs that are defined later in the document. The best place to define them for cross-browser support is just after the opening body tag.