{"id":357412,"date":"2021-11-23T11:21:28","date_gmt":"2021-11-23T19:21:28","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357412"},"modified":"2021-11-23T11:21:30","modified_gmt":"2021-11-23T19:21:30","slug":"which-svg-technique-performs-best-for-way-too-many-icons","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/which-svg-technique-performs-best-for-way-too-many-icons\/","title":{"rendered":"Which SVG technique performs best for way too many icons?"},"content":{"rendered":"\n<p>Tyler Sticka <a href=\"https:\/\/cloudfour.com\/thinks\/svg-icon-stress-test\/\" rel=\"noopener\">digs in<\/a> here in the best possible way: by <a href=\"https:\/\/svg-icon-stress-test.netlify.app\/\" rel=\"noopener\">making a test page<\/a> and literally measuring performance. Maybe 1,000 icons is <em>a little bit<\/em> 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 <code>&lt;svg&gt;<\/code>, same-document sprite <code>&lt;symbol&gt;<\/code>s, external-document sprite <code>&lt;symbol&gt;<\/code>s, <code>&lt;img&gt;<\/code> with an external source, <code>&lt;img&gt;<\/code> with a data URL, <code>&lt;img&gt;<\/code> with a <code>filter<\/code>, <code>&lt;div&gt;<\/code> with a <code>background-image<\/code> of an external source, <code>&lt;div&gt;<\/code> with a <code>background-image<\/code> of a data URL, and a <code>&lt;div&gt;<\/code> with a <code>mask<\/code>. Phew! That&#8217;s a lot \u2014 and they are all useful techniques in their own right.<\/p>\n\n\n\n<p>Which technique won? Inline <code>&lt;svg&gt;<\/code>, unless the SVGs are rather complex, then <code>&lt;img&gt;<\/code> is better. That&#8217;s what I would have put my money on. <a href=\"https:\/\/css-tricks.com\/pretty-good-svg-icon-system\/\">I&#8217;ve been on that train<\/a> for a while now. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":357448,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"Tyler Sticka: Which SVG technique performs best for way too many icons?","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Tyler Sticka digs in here in the best possible way: by making a test page and literally measuring performance.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[469,660],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-22-at-9.12.58-AM.png?fit=2024%2C1250&ssl=1","jetpack-related-posts":[{"id":195363,"url":"https:\/\/css-tricks.com\/inline-svg-grunticon-fallback\/","url_meta":{"origin":357412,"position":0},"title":"Inline SVG with Grunticon Fallback","date":"February 9, 2015","format":false,"excerpt":"In which we look at Grunticon and how it can be used as the fallback system even if you want to start with inline SVG in the document.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":192219,"url":"https:\/\/css-tricks.com\/ajaxing-svg-sprite\/","url_meta":{"origin":357412,"position":1},"title":"Ajaxing for your SVG Sprite","date":"January 5, 2015","format":false,"excerpt":"Say you're building an SVG icon system. You're building a SVG sprite full of symbols by hand, or using a build tool like IcoMoon or grunt-svgstore to create it for you. What do you do with that sprite.svg? One option is to include it right at the top of the\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":340692,"url":"https:\/\/css-tricks.com\/svg-loader-a-different-way-to-work-with-external-svg\/","url_meta":{"origin":357412,"position":2},"title":"svg-loader: A Different Way to Work With External SVG","date":"May 19, 2021","format":false,"excerpt":"SVGs are awesome: they are small, look sharp on any scale, and can be customized without creating a separate file. However, there is something I feel is missing in web standards today: a way to include them as an external file that also retains the format\u2019s customization powers. For instance,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/svg-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325632,"url":"https:\/\/css-tricks.com\/svgbox\/","url_meta":{"origin":357412,"position":3},"title":"SVGBOX","date":"November 12, 2020","format":false,"excerpt":"I've been saying for years that a pretty good icon system is just dropping in icons with inline <svg> where you need them. This is simple to do, offers full design control, has (generally) good performance, and means you aren't smurfing around with caching and browser support stuff. Along those\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/uisystem-icons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":317398,"url":"https:\/\/css-tricks.com\/a-font-like-svg-icon-system-for-vue\/","url_meta":{"origin":357412,"position":4},"title":"A Font-Like SVG Icon System for Vue","date":"July 24, 2020","format":false,"excerpt":"Managing a custom collection of icons in a Vue app can be challenging at times. An icon font is easy to use, but for customization, you have to rely on third-party font generators, and merge conflicts can be painful to resolve since fonts are binary files. Using SVG files instead\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/vue-svg-icons.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373111,"url":"https:\/\/css-tricks.com\/how-i-made-an-icon-system-out-of-css-custom-properties\/","url_meta":{"origin":357412,"position":5},"title":"How I Made an Icon System Out of CSS Custom Properties","date":"September 22, 2022","format":false,"excerpt":"SVG is the best format for icons on a website, there is no doubt about that. It allows you to have sharp icons no matter the screen pixel density, you can change the styles of the SVG on hover and you can even animate the icons with CSS or JavaScript.\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/icon-svg-custom-property.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357412"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=357412"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357412\/revisions"}],"predecessor-version":[{"id":357534,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357412\/revisions\/357534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/357448"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=357412"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=357412"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=357412"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}