Which SVG method carries out finest for method a lot of icons?


Tyler Sticka digs in here in the very best possible method: by making a test page and actually determining efficiency. Maybe 1,000 icons is a bit of an edge case, however hey, 250 rows of information with 4 icons in each gets you there. Tyler covers the subtleties thoroughly in the post. The various methods checked: inline <svg>, same-document sprite <sign>s, external-document sprite <sign>s, <img> with an external source, <img> with an information URL, <img> with a filter, <div> with a background-image of an external source, <div> with a background-image of an information URL, and a <div> with a mask. Phew! That’s a lot — and they are all beneficial methods in their own right.

Which method won? Inline <svg>, unless the SVGs are rather intricate, then <img> is much better. That’s what I would have put my cash on. I’ve been on that train for a while now.

Direct Link →

Synesy.org