Inline External SVG

Question

I'd like to use an external SVG image for social media links that I can use the CSS fill property for. HTML looks like this:

<a><svg width="30" height="30">
     <use xlink:href="image/svg/instagram.svg" class="insta"></use>
</svg>Instagram</a>

but the SVG is not showing up. Further, my CSS looks like this:

.insta {
     fill: blue;
}

Any help on how to include inline SVG files would be really appreciated. Website is here.

Answer 1

You need to wrap your SVG icon inside the svg file element inside a symbol element

<symbol id="item">
...
</symbol>

and reference that in your href for this to work.

<a><svg width="30" height="30">
     <use xlink:href="image/svg/instagram.svg#item" class="insta"></use>
</svg>Instagram</a>