SVG Symbol is an unvisited technique for reusing inlined SVGs elements. They seem redundant while using popular component-based frameworks/libraries like React, Vue, Svelte, hence you don’t see it a lot on the web. By @Bart.
The whole idea builds around declaring your SVG element ONCE (per page), and reusing it as many times as you want without losing any performance. Every website has some kind of SVGs, some of them are most likely inlined (to prevent flicking) and some are not. But the point is, you will find a lot of occurrences that are repeatable, once, twice, three times, or even one hundred times.
When it comes to repeatable SVGs, most people would create a component and reuse it anywhere they want. It is a valid solution. But there’s a high chance, that you would be missing some performance freebies. If you’re striving for that bang-for-the-buck kind of performance, this article might be interesting for you.
The more fancy looking, the more complex your SVG is. And so, it increases the size of your HTML document and the number of elements the browser will have to parse and put in DOM. What we can observe is the fact that the bigger the document, the more benefits we get from using symbols. In this case, we improved our FCP score by approximately 60ms. Interesting read!
[Read More]