Looking to use the SVG + JS method to get your icon Sprites to make repeated icons more performant on your page? We’ve got your back.
We’ll cover the basics of when, and how, to use SVG Sprites to improve load time on sites that repeat the same icons.
Our testing shows that for the typical number of icons most people use on a site, the loading and rendering time for SVG+JS method is faster than Web Fonts.
A Case for SVG Symbols
The case below is a great one for SVG Symbols – there are a bunch of the same icon repeated on the page, so you'll get a big performance boost by loading each of them only once using the step-by-step method below.
We'll define these icons as symbols: pencil, trash, and star.
Make Sure to Add Some CSS
One of the downsides to SVG sprites is that extra styling is necessary to make them behave. When using symbols you will need to handle this yourself.
What about xlink:href? What happened to that?
The MDN docs tell us that using
xlink: is no longer
needed(opens new window)
for modern browsers.
SVG 2 removed the need for the xlink namespace, so instead of xlink:href you should use href.
However if you do need to support an older browser that requires it, it's
recommended to use both
xlink:href. This way, when modern browsers
do eventually remove support for
xlink:href things will continue working.