Home > Designing, Others > Which SVG technique performs best for way too many icons?

Which SVG technique performs best for way too many icons?

November 23rd, 2021 Leave a comment Go to comments

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 , same-document sprite s, external-document sprite s, with an external source, with a data URL, with a filter,

with a background-image of an external source,

with a background-image of a data URL, and a

with a mask. Phew! That’s a lot — and they are all useful techniques in their own right.

Which technique won? Inline , unless the SVGs are rather complex, then 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.

Categories: Designing, Others Tags:
  1. No comments yet.
  1. No trackbacks yet.
You must be logged in to post a comment.