Hello,
Is there a preferred method for using svg symbols.
I am in favour of injecting the svg symbol code directly into the html mark up. And then using the <use>
tag reference the symbols id.
<i class="icon icon--icon-email">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-email"></use>
</svg>
</i>
My colleague references an external svg symbol file, with the symbol id appended on the end of the file name. He then uses svg4everybody to give styling support for ie.
<i class="icon icon--icon-email">
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/_assets/image/svg-symbols.svg#icon-email"></use>
</svg>
</i>
I’m thinking inline is probably better. less requests and no need for the extra js.
Any thoughts
Cheers