[{"data":1,"prerenderedAt":1162},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img":3,"surroundings:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img":1154},{"id":4,"title":5,"body":6,"description":1133,"extension":1134,"meta":1135,"navigation":1147,"path":1148,"seo":1149,"stem":1152,"__hash__":1153},"content\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002Findex.md","Inline SVG vs Sprite vs img",{"type":7,"value":8,"toc":1116},"minimark",[9,14,38,41,228,233,269,273,279,287,293,302,366,370,375,378,382,393,508,720,724,738,742,745,877,881,884,888,891,895,918,922,950,954,963,971,980,986,990,1002,1022,1031,1040,1053,1062,1074,1078,1101,1106,1109,1112],[10,11,13],"h1",{"id":12},"inline-svg-vs-sprite-vs-img-how-to-deliver-svg-icons-and-graphics","Inline SVG vs Sprite vs img: How to Deliver SVG Icons and Graphics",[15,16,17,18,23,24,28,29,33,34,37],"p",{},"This comparison sits within ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002F","SVG & Icon Optimization"," in ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". Once an SVG is optimised, it still has to reach the page, and there are three common ways: paste the markup inline into the HTML; put many icons into one sprite file and reference them with ",[30,31,32],"code",{},"\u003Cuse href=\"sprite.svg#icon\">","; or reference a standalone file with ",[30,35,36],{},"\u003Cimg src=\"icon.svg\">",". Each is fast in some situations and wasteful in others.",[15,39,40],{},"The variables that decide are repetition (how many times the graphic appears per page), styling (whether it must follow text colour, hover states or themes), caching (whether it appears across many pages), and size (a 300-byte icon versus a 40KB illustration). Getting it wrong shows up as bloated HTML and DOM, unnecessary requests, or icons that cannot be themed.",[15,42,43],{},[44,45,51,52,51,59,51,63,51,66,51,75,51,81,51,87,51,94,51,98,51,103,51,106,51,110,51,113,51,116,51,120,51,124,51,129,51,133,51,137,51,140,51,142,51,145,51,148,51,152,51,154,51,157,51,159,51,162,51,164,51,166,51,169,51,173,51,175,51,178,51,180,51,183,51,185,51,187,51,190,51,194,51,196,51,199,51,201,51,203,51,205,51,207,51,210,51,214,51,216,51,218,51,220,51,223,51,225,51],"svg",{"viewBox":46,"width":47,"role":48,"ariaLabel":49,"style":50},"0 0 760 258","100%","img","Comparison of inline SVG, sprite with use, and img for SVG delivery across HTML cost, DOM cost, caching and styling.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[53,54],"rect",{"className":55,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],"svg-canvas","0","#ffffff",[60,61,62],"title",{},"Delivery methods compared",[64,65,49],"desc",{},[53,67],{"x":68,"y":68,"width":69,"height":70,"rx":71,"fill":72,"stroke":73,"style":74},"1","758","256","10","none","currentColor","stroke-opacity:0.18",[76,77,62],"text",{"x":78,"y":79,"fill":73,"style":80},"28.0","34.0","font-size:16px;font-weight:700",[53,82],{"x":78,"y":83,"width":84,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},"56.0","144.5","30.0","fill-opacity:0.06;stroke-opacity:0.4",[76,88,93],{"x":89,"y":90,"fill":73,"style":91,"textAnchor":92},"38.0","75.5","font-size:12.5px;font-weight:700","start","Aspect",[53,95],{"x":96,"y":83,"width":97,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},"172.5","186.5",[76,99,102],{"x":100,"y":90,"fill":73,"style":91,"textAnchor":101},"265.7","middle","Inline",[53,104],{"x":105,"y":83,"width":97,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},"359.0",[76,107,109],{"x":108,"y":90,"fill":73,"style":91,"textAnchor":101},"452.2","Sprite + use",[53,111],{"x":112,"y":83,"width":97,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},"545.5",[76,114,48],{"x":115,"y":90,"fill":73,"style":91,"textAnchor":101},"638.7",[53,117],{"x":78,"y":118,"width":84,"height":85,"rx":57,"fill":72,"stroke":73,"style":119},"86.0","stroke-opacity:0.35",[76,121,123],{"x":89,"y":122,"fill":73,"style":91,"textAnchor":92},"105.5","HTML bytes per use",[53,125],{"x":96,"y":118,"width":97,"height":85,"rx":57,"fill":126,"stroke":127,"style":128},"#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[76,130,132],{"x":100,"y":122,"fill":73,"style":131,"textAnchor":101},"font-size:12px","full markup",[53,134],{"x":105,"y":118,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},"#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[76,138,139],{"x":108,"y":122,"fill":73,"style":131,"textAnchor":101},"~80 bytes",[53,141],{"x":112,"y":118,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,143,144],{"x":115,"y":122,"fill":73,"style":131,"textAnchor":101},"~60 bytes",[53,146],{"x":78,"y":147,"width":84,"height":85,"rx":57,"fill":72,"stroke":73,"style":119},"116.0",[76,149,151],{"x":89,"y":150,"fill":73,"style":91,"textAnchor":92},"135.5","DOM nodes per use",[53,153],{"x":96,"y":147,"width":97,"height":85,"rx":57,"fill":126,"stroke":127,"style":128},[76,155,156],{"x":100,"y":150,"fill":73,"style":131,"textAnchor":101},"all paths",[53,158],{"x":105,"y":147,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,160,161],{"x":108,"y":150,"fill":73,"style":131,"textAnchor":101},"2",[53,163],{"x":112,"y":147,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,165,68],{"x":115,"y":150,"fill":73,"style":131,"textAnchor":101},[53,167],{"x":78,"y":168,"width":84,"height":85,"rx":57,"fill":72,"stroke":73,"style":119},"146.0",[76,170,172],{"x":89,"y":171,"fill":73,"style":91,"textAnchor":92},"165.5","Cached across pages",[53,174],{"x":96,"y":168,"width":97,"height":85,"rx":57,"fill":126,"stroke":127,"style":128},[76,176,177],{"x":100,"y":171,"fill":73,"style":131,"textAnchor":101},"no",[53,179],{"x":105,"y":168,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,181,182],{"x":108,"y":171,"fill":73,"style":131,"textAnchor":101},"yes",[53,184],{"x":112,"y":168,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,186,182],{"x":115,"y":171,"fill":73,"style":131,"textAnchor":101},[53,188],{"x":78,"y":189,"width":84,"height":85,"rx":57,"fill":72,"stroke":73,"style":119},"176.0",[76,191,193],{"x":89,"y":192,"fill":73,"style":91,"textAnchor":92},"195.5","CSS colour \u002F hover",[53,195],{"x":96,"y":189,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,197,198],{"x":100,"y":192,"fill":73,"style":131,"textAnchor":101},"full",[53,200],{"x":105,"y":189,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,202,73],{"x":108,"y":192,"fill":73,"style":131,"textAnchor":101},[53,204],{"x":112,"y":189,"width":97,"height":85,"rx":57,"fill":126,"stroke":127,"style":128},[76,206,72],{"x":115,"y":192,"fill":73,"style":131,"textAnchor":101},[53,208],{"x":78,"y":209,"width":84,"height":85,"rx":57,"fill":72,"stroke":73,"style":119},"206.0",[76,211,213],{"x":89,"y":212,"fill":73,"style":91,"textAnchor":92},"225.5","Extra request",[53,215],{"x":96,"y":209,"width":97,"height":85,"rx":57,"fill":135,"stroke":135,"style":136},[76,217,72],{"x":100,"y":212,"fill":73,"style":131,"textAnchor":101},[53,219],{"x":105,"y":209,"width":97,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},[76,221,222],{"x":108,"y":212,"fill":73,"style":131,"textAnchor":101},"one per sprite",[53,224],{"x":112,"y":209,"width":97,"height":85,"rx":57,"fill":73,"stroke":73,"style":86},[76,226,227],{"x":115,"y":212,"fill":73,"style":131,"textAnchor":101},"one per file",[229,230,232],"h2",{"id":231},"rapid-diagnosis","Rapid Diagnosis",[234,235,236,244,250,260],"ul",{},[237,238,239,243],"li",{},[240,241,242],"strong",{},"Count repetitions."," Search rendered HTML for a common icon path's first few characters; dozens of matches means inline repetition.",[237,245,246,249],{},[240,247,248],{},"Measure HTML and DOM."," Compare HTML size and DOM node count on icon-heavy templates (listing pages, tables) with simpler ones.",[237,251,252,255,256,259],{},[240,253,254],{},"List requests for SVG files."," Many small ",[30,257,258],{},"\u003Cimg>"," SVG requests on first load suggest a sprite would be better.",[237,261,262,265,266,268],{},[240,263,264],{},"Check theming needs."," Icons that must change colour in dark mode or on hover cannot be plain ",[30,267,258],{},".",[229,270,272],{"id":271},"root-cause-analysis","Root Cause Analysis",[15,274,275,278],{},[240,276,277],{},"1. Inline everything."," Component libraries often render icons inline by default; fine for a handful, costly at scale.",[15,280,281,51,284,286],{},[240,282,283],{},"2. One request per icon.",[30,285,258],{}," icons in a navigation menu produce many tiny requests on first load.",[15,288,289,292],{},[240,290,291],{},"3. Sprites with every icon."," A sprite containing the whole icon library is a large first download for a few icons.",[15,294,295,298,299,301],{},[240,296,297],{},"4. Mismatched method for the job."," A 40KB illustration inlined in HTML delays the rest of the document; a theme-coloured icon delivered as ",[30,300,258],{}," cannot follow the theme.",[15,303,304],{},[44,305,51,308,51,311,51,314,51,316,51,319,51,321,51,328,51,335,51,340,51,344,51,349,51,353,51,357,51,362,51],{"viewBox":306,"width":47,"role":48,"ariaLabel":307,"style":50},"0 0 760 163","Bar chart comparing HTML size for a category page whose card icons are delivered inline versus as sprite references.",[53,309],{"className":310,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],[60,312,313],{},"Category page with 48 cards, 4 icons each",[64,315,307],{},[53,317],{"x":68,"y":68,"width":69,"height":318,"rx":71,"fill":72,"stroke":73,"style":74},"161",[76,320,313],{"x":78,"y":79,"fill":73,"style":80},[76,322,327],{"x":323,"y":324,"fill":73,"style":325,"textAnchor":326},"263.9","70.0","font-size:13px","end","Inline icons (uncompressed HTML)",[53,329],{"x":330,"y":83,"width":331,"height":332,"rx":333,"fill":126,"stroke":127,"style":334},"275.9","392.1","19","3","fill-opacity:0.7;stroke-opacity:0.9",[76,336,339],{"x":337,"y":324,"fill":73,"style":338},"674.0","font-size:12px;font-weight:600","214KB",[76,341,343],{"x":323,"y":342,"fill":73,"style":325,"textAnchor":326},"101.0","Sprite references (uncompressed HTML)",[53,345],{"x":330,"y":346,"width":347,"height":332,"rx":333,"fill":135,"stroke":135,"style":348},"87.0","175.9","fill-opacity:0.55;stroke-opacity:0.9",[76,350,352],{"x":351,"y":342,"fill":73,"style":338},"457.8","96KB",[76,354,356],{"x":323,"y":355,"fill":73,"style":325,"textAnchor":326},"132.0","Sprite file (once, cached)",[53,358],{"x":330,"y":359,"width":360,"height":332,"rx":333,"fill":73,"stroke":73,"style":361},"118.0","12.8","fill-opacity:0.7;stroke-opacity:0.4",[76,363,365],{"x":364,"y":355,"fill":73,"style":338},"294.7","7KB",[229,367,369],{"id":368},"step-by-step-choosing-per-context","Step-by-Step: Choosing Per Context",[371,372,374],"h3",{"id":373},"_1-inline-small-unique-styled-icons","1. Inline small, unique, styled icons",[15,376,377],{},"A few icons in the header that need hover colours and theme support are good inline candidates — the bytes are small and there is no request.",[371,379,381],{"id":380},"_2-use-a-sprite-for-icons-that-repeat-or-appear-site-wide","2. Use a sprite for icons that repeat or appear site-wide",[15,383,384,385,388,389,392],{},"Build a sprite of the icons used, as ",[30,386,387],{},"\u003Csymbol>"," elements with ",[30,390,391],{},"viewBox","es, and reference them.",[394,395,400],"pre",{"className":396,"code":397,"language":398,"meta":399,"style":399},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003C!-- sprite.3f2a.svg contains: \u003Csymbol id=\"star\" viewBox=\"0 0 24 24\">…\u003C\u002Fsymbol> per icon -->\n\u003Cbutton class=\"rate\" aria-label=\"Rate 4 stars\">\n  \u003Cspan class=\"icon\" data-icon=\"star\">\u003C\u002Fspan>\n\u003C\u002Fbutton>\n\u003C!-- The component renders the reference markup (an svg element wrapping\n     \u003Cuse href=\"\u002Ficons\u002Fsprite.3f2a.svg#star\">) once per use.\n     trade-off: external sprite references are not supported in some very old\n     browsers, and the sprite must be same-origin (or CORS) to be referenced. -->\n","html","",[30,401,402,411,444,474,484,490,496,502],{"__ignoreMap":399},[403,404,407],"span",{"class":405,"line":406},"line",1,[403,408,410],{"class":409},"sjfSM","\u003C!-- sprite.3f2a.svg contains: \u003Csymbol id=\"star\" viewBox=\"0 0 24 24\">…\u003C\u002Fsymbol> per icon -->\n",[403,412,414,418,422,426,429,433,436,438,441],{"class":405,"line":413},2,[403,415,417],{"class":416},"saISM","\u003C",[403,419,421],{"class":420},"sZBmE","button",[403,423,425],{"class":424},"sPXB4"," class",[403,427,428],{"class":416},"=",[403,430,432],{"class":431},"sZ8jY","\"rate\"",[403,434,435],{"class":424}," aria-label",[403,437,428],{"class":416},[403,439,440],{"class":431},"\"Rate 4 stars\"",[403,442,443],{"class":416},">\n",[403,445,447,450,452,454,456,459,462,464,467,470,472],{"class":405,"line":446},3,[403,448,449],{"class":416},"  \u003C",[403,451,403],{"class":420},[403,453,425],{"class":424},[403,455,428],{"class":416},[403,457,458],{"class":431},"\"icon\"",[403,460,461],{"class":424}," data-icon",[403,463,428],{"class":416},[403,465,466],{"class":431},"\"star\"",[403,468,469],{"class":416},">\u003C\u002F",[403,471,403],{"class":420},[403,473,443],{"class":416},[403,475,477,480,482],{"class":405,"line":476},4,[403,478,479],{"class":416},"\u003C\u002F",[403,481,421],{"class":420},[403,483,443],{"class":416},[403,485,487],{"class":405,"line":486},5,[403,488,489],{"class":409},"\u003C!-- The component renders the reference markup (an svg element wrapping\n",[403,491,493],{"class":405,"line":492},6,[403,494,495],{"class":409},"     \u003Cuse href=\"\u002Ficons\u002Fsprite.3f2a.svg#star\">) once per use.\n",[403,497,499],{"class":405,"line":498},7,[403,500,501],{"class":409},"     trade-off: external sprite references are not supported in some very old\n",[403,503,505],{"class":405,"line":504},8,[403,506,507],{"class":409},"     browsers, and the sprite must be same-origin (or CORS) to be referenced. -->\n",[394,509,513],{"className":510,"code":511,"language":512,"meta":399,"style":399},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F Render sprite references from JS without inlining paths.\nfunction icon(name, size = 16) {\n  const NS = 'http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg';\n  const el = document.createElementNS(NS, 'svg');\n  el.setAttribute('width', size); el.setAttribute('height', size); el.setAttribute('aria-hidden', 'true');\n  const use = document.createElementNS(NS, 'use');\n  use.setAttribute('href', `\u002Ficons\u002Fsprite.3f2a.svg#${name}`);\n  el.append(use);\n  return el;\n}\n\u002F\u002F trade-off: client-created icons are not in the server HTML; for above-the-fold\n\u002F\u002F icons, render the same markup on the server to avoid them popping in.\n","javascript",[30,514,515,520,552,568,596,635,659,683,693,702,708,714],{"__ignoreMap":399},[403,516,517],{"class":405,"line":406},[403,518,519],{"class":409},"\u002F\u002F Render sprite references from JS without inlining paths.\n",[403,521,522,526,530,533,537,540,543,546,549],{"class":405,"line":413},[403,523,525],{"class":524},"sPARh","function",[403,527,529],{"class":528},"smZ65"," icon",[403,531,532],{"class":416},"(",[403,534,536],{"class":535},"sQw3B","name",[403,538,539],{"class":416},", ",[403,541,542],{"class":535},"size",[403,544,545],{"class":524}," =",[403,547,548],{"class":424}," 16",[403,550,551],{"class":416},") {\n",[403,553,554,557,560,562,565],{"class":405,"line":446},[403,555,556],{"class":524},"  const",[403,558,559],{"class":424}," NS",[403,561,545],{"class":524},[403,563,564],{"class":431}," 'http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg'",[403,566,567],{"class":416},";\n",[403,569,570,572,575,577,580,583,585,588,590,593],{"class":405,"line":476},[403,571,556],{"class":524},[403,573,574],{"class":424}," el",[403,576,545],{"class":524},[403,578,579],{"class":416}," document.",[403,581,582],{"class":528},"createElementNS",[403,584,532],{"class":416},[403,586,587],{"class":424},"NS",[403,589,539],{"class":416},[403,591,592],{"class":431},"'svg'",[403,594,595],{"class":416},");\n",[403,597,598,601,604,606,609,612,614,616,619,621,623,625,628,630,633],{"class":405,"line":486},[403,599,600],{"class":416},"  el.",[403,602,603],{"class":528},"setAttribute",[403,605,532],{"class":416},[403,607,608],{"class":431},"'width'",[403,610,611],{"class":416},", size); el.",[403,613,603],{"class":528},[403,615,532],{"class":416},[403,617,618],{"class":431},"'height'",[403,620,611],{"class":416},[403,622,603],{"class":528},[403,624,532],{"class":416},[403,626,627],{"class":431},"'aria-hidden'",[403,629,539],{"class":416},[403,631,632],{"class":431},"'true'",[403,634,595],{"class":416},[403,636,637,639,642,644,646,648,650,652,654,657],{"class":405,"line":492},[403,638,556],{"class":524},[403,640,641],{"class":424}," use",[403,643,545],{"class":524},[403,645,579],{"class":416},[403,647,582],{"class":528},[403,649,532],{"class":416},[403,651,587],{"class":424},[403,653,539],{"class":416},[403,655,656],{"class":431},"'use'",[403,658,595],{"class":416},[403,660,661,664,666,668,671,673,676,678,681],{"class":405,"line":498},[403,662,663],{"class":416},"  use.",[403,665,603],{"class":528},[403,667,532],{"class":416},[403,669,670],{"class":431},"'href'",[403,672,539],{"class":416},[403,674,675],{"class":431},"`\u002Ficons\u002Fsprite.3f2a.svg#${",[403,677,536],{"class":416},[403,679,680],{"class":431},"}`",[403,682,595],{"class":416},[403,684,685,687,690],{"class":405,"line":504},[403,686,600],{"class":416},[403,688,689],{"class":528},"append",[403,691,692],{"class":416},"(use);\n",[403,694,696,699],{"class":405,"line":695},9,[403,697,698],{"class":524},"  return",[403,700,701],{"class":416}," el;\n",[403,703,705],{"class":405,"line":704},10,[403,706,707],{"class":416},"}\n",[403,709,711],{"class":405,"line":710},11,[403,712,713],{"class":409},"\u002F\u002F trade-off: client-created icons are not in the server HTML; for above-the-fold\n",[403,715,717],{"class":405,"line":716},12,[403,718,719],{"class":409},"\u002F\u002F icons, render the same markup on the server to avoid them popping in.\n",[371,721,723],{"id":722},"_3-use-img-for-large-standalone-graphics-and-logos","3. Use img for large standalone graphics and logos",[15,725,726,727,729,730,733,734,737],{},"Logos, illustrations and diagrams that do not need CSS styling belong in ",[30,728,258],{}," with ",[30,731,732],{},"width"," and ",[30,735,736],{},"height",". They cache across pages, load in parallel, and keep the HTML and DOM lean.",[371,739,741],{"id":740},"_4-keep-sprites-small-and-versioned","4. Keep sprites small and versioned",[15,743,744],{},"Build sprites from icons actually used (per site area if needed), version the filename by content hash, and serve with immutable caching.",[15,746,747],{},[44,748,51,751,51,754,51,757,51,759,51,776,51,779,51,781,51,786,51,792,51,795,51,800,51,808,51,813,51,817,51,822,51,825,51,829,51,831,51,834,51,836,51,839,51,842,51,845,51,848,51,852,51,854,51,857,51,860,51,863,51,867,51,870,51,873,51],{"viewBox":749,"width":47,"role":48,"ariaLabel":750,"style":50},"0 0 760 325","Decision sequence for choosing inline SVG, sprite or img for a given graphic.",[53,752],{"className":753,"x":57,"y":57,"width":47,"height":47,"fill":58},[56],[60,755,756],{},"Which method for this SVG?",[64,758,750],{},[760,761,762],"defs",{},[763,764,771],"marker",{"id":765,"viewBox":766,"refX":767,"refY":768,"markerWidth":769,"markerHeight":769,"orient":770},"fa59f753b8","0 0 10 10","9","5","7","auto-start-reverse",[772,773],"path",{"d":774,"fill":73,"style":775},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[53,777],{"x":68,"y":68,"width":69,"height":778,"rx":71,"fill":72,"stroke":73,"style":74},"323",[76,780,756],{"x":78,"y":79,"fill":73,"style":80},[53,782],{"x":78,"y":83,"width":783,"height":784,"rx":785,"fill":73,"stroke":73,"style":86},"320.0","35.0","6",[76,787,791],{"x":788,"y":789,"fill":73,"style":790,"textAnchor":101},"188.0","78.0","font-size:13px;font-weight:700","Larger than a few KB, no CSS styling needed?",[53,793],{"x":794,"y":83,"width":783,"height":784,"rx":785,"fill":135,"stroke":135,"style":136},"412.0",[76,796,799],{"x":797,"y":789,"fill":73,"style":798,"textAnchor":101},"572.0","font-size:12.5px","img with width and height",[405,801],{"x1":802,"y1":803,"x2":804,"y2":803,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},"348.0","73.5","410.0","1.5","stroke-opacity:0.6","url(#fa59f753b8)",[76,809,182],{"x":810,"y":811,"fill":135,"style":812,"textAnchor":101},"380.0","66.5","font-size:11.5px;font-weight:700",[405,814],{"x1":788,"y1":815,"x2":788,"y2":816,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},"91.0","125.0",[76,818,177],{"x":819,"y":820,"fill":821,"style":812},"196.0","113.0","#51617a",[53,823],{"x":78,"y":824,"width":783,"height":784,"rx":785,"fill":73,"stroke":73,"style":86},"127.0",[76,826,828],{"x":788,"y":827,"fill":73,"style":790,"textAnchor":101},"149.0","Repeated on the page or used on most pages?",[53,830],{"x":794,"y":824,"width":783,"height":784,"rx":785,"fill":135,"stroke":135,"style":136},[76,832,833],{"x":797,"y":827,"fill":73,"style":798,"textAnchor":101},"Sprite with use references",[405,835],{"x1":802,"y1":84,"x2":804,"y2":84,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},[76,837,182],{"x":810,"y":838,"fill":135,"style":812,"textAnchor":101},"137.5",[405,840],{"x1":788,"y1":841,"x2":788,"y2":819,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},"162.0",[76,843,177],{"x":819,"y":844,"fill":821,"style":812},"184.0",[53,846],{"x":78,"y":847,"width":783,"height":784,"rx":785,"fill":73,"stroke":73,"style":86},"198.0",[76,849,851],{"x":788,"y":850,"fill":73,"style":790,"textAnchor":101},"220.0","Unique small icon needing hover\u002Ftheme colour?",[53,853],{"x":794,"y":847,"width":783,"height":784,"rx":785,"fill":135,"stroke":135,"style":136},[76,855,856],{"x":797,"y":850,"fill":73,"style":798,"textAnchor":101},"Inline SVG",[405,858],{"x1":802,"y1":859,"x2":804,"y2":859,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},"215.5",[76,861,182],{"x":810,"y":862,"fill":135,"style":812,"textAnchor":101},"208.5",[405,864],{"x1":788,"y1":865,"x2":788,"y2":866,"stroke":73,"strokeWidth":805,"style":806,"markerEnd":807},"233.0","267.0",[76,868,177],{"x":819,"y":869,"fill":821,"style":812},"255.0",[53,871],{"x":78,"y":872,"width":783,"height":79,"rx":785,"fill":126,"stroke":127,"style":128},"269.0",[76,874,876],{"x":788,"y":875,"fill":73,"style":798,"textAnchor":101},"290.5","Sprite (default for icon systems)",[229,878,880],{"id":879},"verification","Verification",[15,882,883],{},"Measure HTML size, DOM node count and number of SVG requests per template before and after. Check icons render with correct colours in both themes and on hover. Validate that no duplicate IDs exist (inline repetition) using the a11y or HTML validator.",[229,885,887],{"id":886},"worked-example-a-data-table-with-status-icons","Worked Example: A Data Table With Status Icons",[15,889,890],{},"An admin dashboard rendered a 500-row table with three inline status icons per row — 1,500 inline SVGs, 18,000 extra DOM nodes. Sorting the table took 380ms on a mid-tier laptop, mostly style and layout. Switching to sprite references reduced the icons to 3,000 DOM nodes and sorting to 160ms; INP for table interactions fell below 200ms. Combined with row virtualisation later, sorting dropped under 50ms.",[229,892,894],{"id":893},"how-the-methods-affect-core-web-vitals","How the Methods Affect Core Web Vitals",[15,896,897,900,901,903,904,907,908,910,911,914,915,917],{},[240,898,899],{},"LCP:"," inline SVG makes HTML larger, delaying everything in the document slightly; for a heavy illustration that is LCP, an ",[30,902,258],{}," can load in parallel and paint sooner. ",[240,905,906],{},"CLS:"," every method needs explicit dimensions; ",[30,909,258],{}," without width\u002Fheight and unsized inline SVGs both shift. ",[240,912,913],{},"INP:"," inline SVG inflates the DOM, increasing style and layout cost for interactions that re-render or restyle large regions; sprites and ",[30,916,258],{}," keep node counts low. On icon-heavy, interactive pages, the DOM effect is usually the most important.",[229,919,921],{"id":920},"common-mistakes","Common Mistakes",[234,923,924,930,936,944],{},[237,925,926,929],{},[240,927,928],{},"Inlining large illustrations."," They delay HTML and cannot be cached separately.",[237,931,932,935],{},[240,933,934],{},"Sprites with the entire library."," First-load bytes for icons never used.",[237,937,938,943],{},[240,939,940,942],{},[30,941,258],{}," icons that need theming."," They stay the same colour in dark mode.",[237,945,946,949],{},[240,947,948],{},"Missing dimensions."," Any method without explicit size risks layout shift.",[229,951,953],{"id":952},"edge-cases","Edge Cases",[15,955,956,51,959,962],{},[240,957,958],{},"Shadow DOM and web components.",[30,960,961],{},"\u003Cuse>"," references inside shadow roots resolve against the document; inline sprites in the main document may not be reachable from shadow trees, while external sprite URLs are.",[15,964,965,51,968,970],{},[240,966,967],{},"Cross-origin sprites.",[30,969,961],{}," cannot reference sprites on other origins without CORS; host sprites on your origin.",[15,972,973,976,977,979],{},[240,974,975],{},"Print and email."," Sprite references may not render in email clients; use inline or ",[30,978,258],{}," there.",[15,981,982,985],{},[240,983,984],{},"Animation."," Animating individual parts of an icon requires inline SVG; sprite references expose limited styling.",[229,987,989],{"id":988},"faq","FAQ",[991,992,995,999],"details",{"className":993},[994],"faq-item",[996,997,998],"summary",{},"Is an inline sprite (hidden in the HTML) a good compromise?",[15,1000,1001],{},"It avoids a request and keeps per-use markup small, but it adds the sprite to every page's HTML (uncacheable across pages). Useful for small sprites on single-page apps; an external sprite is better for multi-page sites.",[991,1003,1005,1008],{"className":1004},[994],[996,1006,1007],{},"Does currentColor work with external sprites?",[15,1009,1010,1011,1013,1014,1017,1018,1021],{},"Yes. Symbols referenced with ",[30,1012,961],{}," inherit ",[30,1015,1016],{},"color"," from the referencing element, so ",[30,1019,1020],{},"fill=\"currentColor\""," inside the symbol follows text colour.",[991,1023,1025,1028],{"className":1024},[994],[996,1026,1027],{},"Are many small img requests a problem on HTTP\u002F2?",[15,1029,1030],{},"Less than on HTTP\u002F1.1, but each still has overhead and its own cache entry. For dozens of icons, a single sprite is more efficient.",[991,1032,1034,1037],{"className":1033},[994],[996,1035,1036],{},"What about icon components in React or Vue?",[15,1038,1039],{},"Many libraries render inline SVG per use. That is fine for a few icons; for repeated icons, choose libraries or configurations that output sprite references, or wrap them yourself.",[991,1041,1043,1046],{"className":1042},[994],[996,1044,1045],{},"Can CSS mask-image replace icon SVGs?",[15,1047,1048,1049,1052],{},"Yes: a monochrome icon as a CSS mask with ",[30,1050,1051],{},"background-color: currentColor"," themes easily, adds one DOM node and caches the SVG file. It is a good option for decorative icons; accessibility must be handled with text or ARIA on the element.",[991,1054,1056,1059],{"className":1055},[994],[996,1057,1058],{},"How do I avoid duplicate IDs with inline SVG?",[15,1060,1061],{},"Avoid internal IDs in icons (use simple paths), generate unique IDs per instance, or use sprites where IDs live once in the sprite file.",[991,1063,1065,1068],{"className":1064},[994],[996,1066,1067],{},"Can I mix methods on one page?",[15,1069,1070,1071,1073],{},"Yes, and most well-optimised sites do: a sprite for the icon system, ",[30,1072,258],{}," for logos and illustrations, and a few inline SVGs for animated or part-styled graphics. Consistency matters per component, not per page.",[229,1075,1077],{"id":1076},"related","Related",[234,1079,1080,1087,1094],{},[237,1081,1082,1086],{},[19,1083,1085],{"href":1084},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002F","Optimizing SVG files with SVGO"," — shrinking whatever method you choose.",[237,1088,1089,1093],{},[19,1090,1092],{"href":1091},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Fmigrating-from-icon-fonts-to-svg\u002F","Migrating from icon fonts to SVG"," — moving an existing icon system.",[237,1095,1096,1100],{},[19,1097,1099],{"href":1098},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002Ffixing-the-excessive-dom-size-warning\u002F","Fixing the excessive DOM size warning"," — the DOM cost of inline repetition.",[1102,1103,1105],"script",{"type":1104},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"Inline SVG vs Sprite vs img: How to Deliver SVG Icons and Graphics\",\n  \"description\": \"A decision framework for delivering SVG icons and graphics, with the performance trade-offs of each method on real pages.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Inline small, unique, styled icons\",\n      \"text\": \"A few icons in the header that need hover colours and theme support are good inline candidates — the bytes are small and there is no request.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Use a sprite for icons that repeat or appear site-wide\",\n      \"text\": \"Build a sprite of the icons used, as elements with viewBoxes, and reference them.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Use img for large standalone graphics and logos\",\n      \"text\": \"Logos, illustrations and diagrams that do not need CSS styling belong in with width and height.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Keep sprites small and versioned\",\n      \"text\": \"Build sprites from icons actually used (per site area if needed), version the filename by content hash, and serve with immutable caching.\"\n    }\n  ]\n}\n",[1102,1107,1108],{"type":1104},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"Inline SVG vs Sprite vs img: How to Deliver SVG Icons and Graphics\",\n  \"description\": \"A decision framework for delivering SVG icons and graphics, with the performance trade-offs of each method on real pages.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F\"\n  }\n}\n",[1102,1110,1111],{"type":1104},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"SVG & Icon Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"Inline SVG vs Sprite vs img\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F\"\n    }\n  ]\n}\n",[1113,1114,1115],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .smZ65, html code.shiki .smZ65{--shiki-default:#622CBC;--shiki-dark:#DBB7FF;--shiki-light:#622CBC}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":399,"searchDepth":413,"depth":413,"links":1117},[1118,1119,1120,1126,1127,1128,1129,1130,1131,1132],{"id":231,"depth":413,"text":232},{"id":271,"depth":413,"text":272},{"id":368,"depth":413,"text":369,"children":1121},[1122,1123,1124,1125],{"id":373,"depth":446,"text":374},{"id":380,"depth":446,"text":381},{"id":722,"depth":446,"text":723},{"id":740,"depth":446,"text":741},{"id":879,"depth":413,"text":880},{"id":886,"depth":413,"text":887},{"id":893,"depth":413,"text":894},{"id":920,"depth":413,"text":921},{"id":952,"depth":413,"text":953},{"id":988,"depth":413,"text":989},{"id":1076,"depth":413,"text":1077},"A decision framework for delivering SVG icons and graphics, with the performance trade-offs of each method on real pages.","md",{"slug":1136,"type":1137,"breadcrumb":1138,"datePublished":1146,"dateModified":1146},"inline-svg-vs-sprite-vs-img","article",[1139,1142,1143,1144],{"name":1140,"url":1141},"Home","\u002F",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1145},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img",{"title":1150,"description":1151},"Inline SVG vs Sprite vs img: Choosing Icon Delivery","Compare inline SVG, external sprites with use, and img-referenced SVG by HTML size, DOM cost, caching, styling and CLS — and pick the right one per context.","image-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002Findex","Ft9l3W9waj40vERg7VN5v2sHJOQYkNrLl8X3-69JUwY",[1155,1158],{"title":22,"path":1156,"stem":1157,"children":-1},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization","image-media-optimization\u002Fsvg-and-icon-optimization\u002Findex",{"title":1159,"path":1160,"stem":1161,"children":-1},"Migrating from Icon Fonts to SVG","\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Fmigrating-from-icon-fonts-to-svg","image-media-optimization\u002Fsvg-and-icon-optimization\u002Fmigrating-from-icon-fonts-to-svg\u002Findex",1791308077278]