This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance. Maybe 1,000 icons is a little bit of an edge case, but hey, 250 rows of data with four icons in each gets you there. Tyler covers the nuances carefully in the post. The different techniques tested: inline <svg>, same-document sprite <symbol>s, external-document sprite <symbol>s, <img> with an external source, <img> with a data URL, <img> with a filter, <div> with a background-image of an external source, <div> with a background-image of a data URL, and a <div> with a mask. Phew! That’s a lot — and they are all useful techniques in their own right.
Which technique won? Inline <svg>, unless the SVGs are rather complex, then <img> is better. That’s what I would have put my money on. I’ve been on that train for a while now.
To Shared Link — Permalink on CSS-Tricks
The post Which SVG technique performs best for way too many icons? appeared first on CSS-Tricks. You can support CSS-Tricks by being an MVP Supporter.
This content originally appeared on CSS-Tricks and was authored by Chris Coyier
Chris Coyier | Sciencx (2021-11-23T19:21:28+00:00) Which SVG technique performs best for way too many icons?. Retrieved from https://www.scien.cx/2021/11/23/which-svg-technique-performs-best-for-way-too-many-icons/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.