--- title: What the heck is an SVG sprite sheet? | daily.dev description: SVG sprite sheets combine the power of SVG with the concept of sprite sheets to deliver graphics, like icons, to users. SVGs are XML-based graphics that stay... canonical: https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: What the heck is an SVG sprite sheet? | daily.dev og:description: SVG sprite sheets combine the power of SVG with the concept of sprite sheets to deliver graphics, like icons, to users. SVGs are XML-based graphics that stay... og:url: https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv og:image: https://api.daily.dev/og/posts/tgWt7dUgv.png og:image:alt: What the heck is an SVG sprite sheet? og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # What the heck is an SVG sprite sheet? **[Piccalilli](https://daily.dev/sources/piccalilli)** · 5 min read · 19 upvotes · 2 comments ## Summary SVG sprite sheets combine the power of SVG with the concept of sprite sheets to deliver graphics, like icons, to users. SVGs are XML-based graphics that stay crisp at any size, and sprite sheets allow for multiple graphics to be stored in one resource. Using SVG sprite sheets can improve performance and ease of managing icons. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Community discussion Top comments from developers on daily.dev. **@pallasn** · 2 upvotes > Why continue to use sprite sheet in http 2 ? **@random\_user** · 2 upvotes > I though sprite sheets were now an anti-pattern that has been discouraged for some time? no? > > My understanding of sprite sheets was they were a workaround for the early HTTP protocol versions not having connection streaming. Combining all the images into a sprite reduced requests giving a slight performance gain. It was also my understanding that the opposite was true today, with HTTP 2 and HTTP 3 sprite sheets are actually slower and less efficient as they force the images to load in serial instead of parallel and reduce catchability in the face of change. > > Is there a reason you encourage... --- Tags: [#webdev](https://daily.dev/tags/webdev), [#svg](https://daily.dev/tags/svg) [View this post on daily.dev](https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"What the heck is an SVG sprite sheet?","url":"https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv"},"datePublished":"2024-05-10T18:18:28.253Z","dateModified":"2024-05-10T18:18:27.399Z","description":"SVG sprite sheets combine the power of SVG with the concept of sprite sheets to deliver graphics, like icons, to users. SVGs are XML-based graphics that stay...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/fb2d5a4e77b038a3463087c6484ec1f9?_a=AQAEuiZ","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/fb2d5a4e77b038a3463087c6484ec1f9?_a=AQAEuiZ","isAccessibleForFree":true,"articleSection":"Piccalilli","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Piccalilli","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/6864a3872e444ed8a46d4e28a71883e3","url":"https://daily.dev/sources/piccalilli"},"commentCount":2,"discussionUrl":"https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":19},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":2}],"keywords":"webdev,svg","timeRequired":"PT5M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Piccalilli","item":"https://daily.dev/sources/piccalilli"},{"@type":"ListItem","position":3,"name":"What the heck is an SVG sprite sheet?"}]} {"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/what-the-heck-is-an-svg-sprite-sheet--tgwt7dugv","comment":[{"@type":"Comment","text":"Why continue to use sprite sheet in http 2 ?","datePublished":"2024-05-15T07:58:02.894Z","url":"https://daily.dev/posts/tgWt7dUgv#c-jY6r8q9Aj","author":{"@type":"Person","name":"Nicolas PALLAS","url":"https://daily.dev/pallasn","image":"https://lh3.googleusercontent.com/a/AGNmyxamy7eT4d4xkKUFxV8O2OMKfkTwwjoQvt2F0Y_C=s96-c"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"I though sprite sheets were now an anti-pattern that has been discouraged for some time? no?\nMy understanding of sprite sheets was they were a workaround for the early HTTP protocol versions not having connection streaming. Combining all the images into a sprite reduced requests giving a slight performance gain. It was also my understanding that the opposite was true today, with HTTP 2 and HTTP 3 sprite sheets are actually slower and less efficient as they force the images to load in serial instead of parallel and reduce catchability in the face of change.\nIs there a reason you encourage this pattern and lean towards this? I read the article and it didn’t really explain why this extra effort and overhead was worth it or how you countered the drawbacks of such an approach. Thanks!","datePublished":"2024-05-21T14:21:08.812Z","dateModified":"2024-05-21T14:23:39.023Z","url":"https://daily.dev/posts/tgWt7dUgv#c-NfImiHwh0","author":{"@type":"Person","name":"Joshua Jarman","url":"https://daily.dev/random_user","image":"https://media.daily.dev/image/upload/f_auto/v1632349791/avatars/f857f24c9be64a05bcc33d248c2e9b23"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]} ```