[{"data":1,"prerenderedAt":1626},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization":3,"surroundings:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization":1617},{"id":4,"title":5,"body":6,"description":1598,"extension":1599,"meta":1600,"navigation":1610,"path":1611,"seo":1612,"stem":1615,"__hash__":1616},"content\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Findex.md","SVG & Icon Optimization",{"type":7,"value":8,"toc":1576},"minimark",[9,14,24,44,138,143,146,175,250,254,295,299,302,306,309,313,319,453,457,499,503,608,739,743,749,755,765,779,788,792,795,938,942,949,953,956,960,963,967,970,1080,1185,1245,1249,1258,1279,1288,1292,1295,1299,1367,1371,1395,1399,1411,1420,1429,1442,1451,1463,1472,1488,1497,1501,1527,1531,1561,1566,1569,1572],[10,11,13],"h1",{"id":12},"svg-icon-optimization-small-graphics-real-costs","SVG & Icon Optimization: Small Graphics, Real Costs",[15,16,17,18,23],"p",{},"This topic extends ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002F","Image & Media Optimization"," to vector graphics. SVG is usually the right format for logos, icons, illustrations and diagrams: it is resolution-independent, styleable with CSS, accessible when marked up correctly, and often tiny. But \"often tiny\" hides a lot of variation. Design tools export SVGs with editor metadata, redundant groups, excessive coordinate precision and embedded raster images; icon systems ship hundreds of unused glyphs; inline SVG repeated across a page inflates HTML and DOM size; and complex vector illustrations with filters and masks can be surprisingly expensive to rasterise.",[15,25,26,27,31,32,35,36,39,40,43],{},"Icons in particular sit on the critical path of almost every page: in the header, the navigation, buttons and form fields. How they are delivered — icon fonts, inline SVG, sprites, or ",[28,29,30],"code",{},"\u003Cimg>"," — affects render-blocking resources, layout shift, HTML size, caching and even INP when large DOMs are re-rendered. The thresholds are the usual ones: LCP under ",[28,33,34],{},"2.5s",", CLS under ",[28,37,38],{},"0.1",", and INP under ",[28,41,42],{},"200ms"," at p75.",[15,45,46],{},[47,48,54,55,54,62,54,66,54,69,54,78,54,84,54,92,54,99,54,104,54,108,54,112,54,115,54,121,54,125,54,128,54,131,54,135,54],"svg",{"viewBox":49,"width":50,"role":51,"ariaLabel":52,"style":53},"0 0 760 268","100%","img","Layers of cost for SVG graphics and icon systems, from file bytes to DOM size and rendering.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[56,57],"rect",{"className":58,"x":60,"y":60,"width":50,"height":50,"fill":61},[59],"svg-canvas","0","#ffffff",[63,64,65],"title",{},"Where SVG and icon costs land",[67,68,52],"desc",{},[56,70],{"x":71,"y":71,"width":72,"height":73,"rx":74,"fill":75,"stroke":76,"style":77},"1","758","266","10","none","currentColor","stroke-opacity:0.18",[79,80,65],"text",{"x":81,"y":82,"fill":76,"style":83},"28.0","34.0","font-size:16px;font-weight:700",[56,85],{"x":81,"y":86,"width":87,"height":88,"rx":89,"fill":90,"stroke":90,"style":91},"56.0","704.0","40.0","6","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[79,93,98],{"x":94,"y":95,"fill":76,"style":96,"textAnchor":97},"42.0","80.5","font-size:13px;font-weight:700","start","File bytes",[79,100,103],{"x":101,"y":95,"fill":76,"style":102,"textAnchor":97},"179.1","font-size:12px","editor metadata, precision, unused defs — removed by SVGO",[56,105],{"x":81,"y":106,"width":87,"height":88,"rx":89,"fill":76,"stroke":76,"style":107},"106.0","fill-opacity:0.06;stroke-opacity:0.4",[79,109,111],{"x":94,"y":110,"fill":76,"style":96,"textAnchor":97},"130.5","Delivery method",[79,113,114],{"x":101,"y":110,"fill":76,"style":102,"textAnchor":97},"inline (HTML + DOM), sprite (one request), img (cacheable, isolated)",[56,116],{"x":81,"y":117,"width":87,"height":88,"rx":89,"fill":118,"stroke":119,"style":120},"156.0","#ffc300","#b8860b","fill-opacity:0.24;stroke-opacity:0.9",[79,122,124],{"x":94,"y":123,"fill":76,"style":96,"textAnchor":97},"180.5","Icon system design",[79,126,127],{"x":101,"y":123,"fill":76,"style":102,"textAnchor":97},"icon fonts block text and shift layout; SVG icons do not",[56,129],{"x":81,"y":130,"width":87,"height":88,"rx":89,"fill":118,"stroke":119,"style":120},"206.0",[79,132,134],{"x":94,"y":133,"fill":76,"style":96,"textAnchor":97},"230.5","Rasterisation",[79,136,137],{"x":101,"y":133,"fill":76,"style":102,"textAnchor":97},"filters, masks, huge path counts cost paint time",[139,140,142],"h2",{"id":141},"the-degradation-this-topic-addresses","The Degradation This Topic Addresses",[15,144,145],{},"SVG and icon problems usually present as one of these:",[147,148,149,157,163,169],"ul",{},[150,151,152,156],"li",{},[153,154,155],"strong",{},"Bloated HTML."," Inline SVG icons repeated dozens of times per page (every product card's rating stars, every list item's chevron) inflate the HTML by tens or hundreds of kilobytes and add thousands of DOM nodes.",[150,158,159,162],{},[153,160,161],{},"Icon fonts on the critical path."," An icon font stylesheet and font file are render-blocking or late; icons appear as empty boxes or fallback glyphs, then pop in — sometimes shifting layout.",[150,164,165,168],{},[153,166,167],{},"Unoptimised exports."," A logo SVG of 80KB where 4KB would do, often the largest asset in the header.",[150,170,171,174],{},[153,172,173],{},"Expensive illustrations."," Large decorative SVGs with blur filters or thousands of paths that take tens of milliseconds to paint, especially when animated.",[15,176,177],{},[47,178,54,181,54,184,54,187,54,189,54,192,54,194,54,201,54,208,54,213,54,217,54,222,54,226,54,230,54,234,54,238,54,242,54,246,54],{"viewBox":179,"width":50,"role":51,"ariaLabel":180,"style":53},"0 0 760 194","Bar chart comparing critical-path bytes for a site header's icons delivered as an icon font, repeated inline SVG, an SVG sprite, and optimised inline SVG.",[56,182],{"className":183,"x":60,"y":60,"width":50,"height":50,"fill":61},[59],[63,185,186],{},"Header icon delivery: bytes on the critical path",[67,188,180],{},[56,190],{"x":71,"y":71,"width":72,"height":191,"rx":74,"fill":75,"stroke":76,"style":77},"192",[79,193,186],{"x":81,"y":82,"fill":76,"style":83},[79,195,200],{"x":196,"y":197,"fill":76,"style":198,"textAnchor":199},"191.8","70.0","font-size:13px","end","Icon font (CSS + WOFF2)",[56,202],{"x":203,"y":86,"width":204,"height":205,"rx":206,"fill":118,"stroke":119,"style":207},"203.8","464.2","19","3","fill-opacity:0.7;stroke-opacity:0.9",[79,209,212],{"x":210,"y":197,"fill":76,"style":211},"674.0","font-size:12px;font-weight:600","96KB",[79,214,216],{"x":196,"y":215,"fill":76,"style":198,"textAnchor":199},"101.0","Inline SVG, unoptimised",[56,218],{"x":203,"y":219,"width":220,"height":205,"rx":206,"fill":90,"stroke":90,"style":221},"87.0","183.8","fill-opacity:0.55;stroke-opacity:0.9",[79,223,225],{"x":224,"y":215,"fill":76,"style":211},"393.5","38KB",[79,227,229],{"x":196,"y":228,"fill":76,"style":198,"textAnchor":199},"132.0","External sprite (cached)",[56,231],{"x":203,"y":232,"width":233,"height":205,"rx":206,"fill":90,"stroke":90,"style":221},"118.0","29.0",[79,235,237],{"x":236,"y":228,"fill":76,"style":211},"238.8","6KB",[79,239,241],{"x":196,"y":240,"fill":76,"style":198,"textAnchor":199},"163.0","Inline SVG, SVGO-optimised",[56,243],{"x":203,"y":244,"width":245,"height":205,"rx":206,"fill":90,"stroke":90,"style":221},"149.0","33.9",[79,247,249],{"x":248,"y":240,"fill":76,"style":211},"243.6","7KB",[139,251,253],{"id":252},"prerequisites","Prerequisites",[147,255,256,274,280,286],{},[150,257,258,261,262,265,266,269,270,273],{},[153,259,260],{},"SVGO"," (directly or via build plugins such as ",[28,263,264],{},"vite-plugin-svgr",", ",[28,267,268],{},"svgo-loader"," or ",[28,271,272],{},"unplugin-icons",") for automated optimisation.",[150,275,276,279],{},[153,277,278],{},"An inventory of icon usage",": which icons are used, where, and how often per page.",[150,281,282,285],{},[153,283,284],{},"DevTools Rendering tools",": Paint flashing and the Performance panel's paint events, to identify expensive vector rendering.",[150,287,288,291,292,294],{},[153,289,290],{},"A decision on icon delivery"," per context — inline for small sets and styling flexibility, sprites for repeated icons, ",[28,293,30],{}," for large standalone illustrations.",[139,296,298],{"id":297},"_1-environment-setup-inventory-svg-usage","1. Environment Setup: Inventory SVG Usage",[15,300,301],{},"List every SVG source: logo files, icon libraries, illustrations, charts and inline SVG in templates. For icons, note the library (and whether it is an icon font), the number of distinct icons used, and how many times each appears per page.",[139,303,305],{"id":304},"_2-capture-a-baseline","2. Capture a Baseline",[15,307,308],{},"Record HTML size, DOM node count, the size of SVG files and icon fonts on the critical path, and paint timings for pages with large illustrations. Lighthouse's DOM size audit and the Coverage panel (for icon font CSS) help quantify the starting point.",[139,310,312],{"id":311},"_3-isolate-the-bottleneck","3. Isolate the Bottleneck",[15,314,315,316,318],{},"Bytes problems are solved by optimisation and subsetting; repetition problems by sprites or ",[28,317,30],{},"; icon-font problems by migration to SVG; rendering problems by simplifying graphics or rasterising them. The guides in this topic cover each.",[15,320,321],{},[47,322,54,325,54,328,54,331,54,333,54,350,54,353,54,355,54,359,54,365,54,368,54,373,54,382,54,388,54,392,54,398,54,401,54,404,54,406,54,409,54,412,54,415,54,418,54,421,54,424,54,428,54,430,54,433,54,436,54,439,54,443,54,446,54,449,54],{"viewBox":323,"width":50,"role":51,"ariaLabel":324,"style":53},"0 0 760 325","Decision sequence for choosing inline SVG, a sprite reference, an img element or a raster image for a vector graphic.",[56,326],{"className":327,"x":60,"y":60,"width":50,"height":50,"fill":61},[59],[63,329,330],{},"How should this graphic be delivered?",[67,332,324],{},[334,335,336],"defs",{},[337,338,345],"marker",{"id":339,"viewBox":340,"refX":341,"refY":342,"markerWidth":343,"markerHeight":343,"orient":344},"fa1330297f","0 0 10 10","9","5","7","auto-start-reverse",[346,347],"path",{"d":348,"fill":76,"style":349},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[56,351],{"x":71,"y":71,"width":72,"height":352,"rx":74,"fill":75,"stroke":76,"style":77},"323",[79,354,330],{"x":81,"y":82,"fill":76,"style":83},[56,356],{"x":81,"y":86,"width":357,"height":358,"rx":89,"fill":76,"stroke":76,"style":107},"320.0","35.0",[79,360,364],{"x":361,"y":362,"fill":76,"style":96,"textAnchor":363},"188.0","78.0","middle","Small icon needing CSS colour\u002Fhover control?",[56,366],{"x":367,"y":86,"width":357,"height":358,"rx":89,"fill":90,"stroke":90,"style":91},"412.0",[79,369,372],{"x":370,"y":362,"fill":76,"style":371,"textAnchor":363},"572.0","font-size:12.5px","Inline SVG (or sprite \u003Cuse> if repeated)",[374,375],"line",{"x1":376,"y1":377,"x2":378,"y2":377,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"348.0","73.5","410.0","1.5","stroke-opacity:0.6","url(#fa1330297f)",[79,383,387],{"x":384,"y":385,"fill":90,"style":386,"textAnchor":363},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[374,389],{"x1":361,"y1":390,"x2":361,"y2":391,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"91.0","125.0",[79,393,397],{"x":394,"y":395,"fill":396,"style":386},"196.0","113.0","#51617a","no",[56,399],{"x":81,"y":400,"width":357,"height":358,"rx":89,"fill":76,"stroke":76,"style":107},"127.0",[79,402,403],{"x":361,"y":244,"fill":76,"style":96,"textAnchor":363},"Same icon repeated many times on a page?",[56,405],{"x":367,"y":400,"width":357,"height":358,"rx":89,"fill":90,"stroke":90,"style":91},[79,407,408],{"x":370,"y":244,"fill":76,"style":371,"textAnchor":363},"Sprite with \u003Cuse> references",[374,410],{"x1":376,"y1":411,"x2":378,"y2":411,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"144.5",[79,413,387],{"x":384,"y":414,"fill":90,"style":386,"textAnchor":363},"137.5",[374,416],{"x1":361,"y1":417,"x2":361,"y2":394,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"162.0",[79,419,397],{"x":394,"y":420,"fill":396,"style":386},"184.0",[56,422],{"x":81,"y":423,"width":357,"height":358,"rx":89,"fill":76,"stroke":76,"style":107},"198.0",[79,425,427],{"x":361,"y":426,"fill":76,"style":96,"textAnchor":363},"220.0","Large standalone illustration or logo?",[56,429],{"x":367,"y":423,"width":357,"height":358,"rx":89,"fill":90,"stroke":90,"style":91},[79,431,432],{"x":370,"y":426,"fill":76,"style":371,"textAnchor":363},"img with width\u002Fheight — cacheable, isolated",[374,434],{"x1":376,"y1":435,"x2":378,"y2":435,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"215.5",[79,437,387],{"x":384,"y":438,"fill":90,"style":386,"textAnchor":363},"208.5",[374,440],{"x1":361,"y1":441,"x2":361,"y2":442,"stroke":76,"strokeWidth":379,"style":380,"markerEnd":381},"233.0","267.0",[79,444,397],{"x":394,"y":445,"fill":396,"style":386},"255.0",[56,447],{"x":81,"y":448,"width":357,"height":82,"rx":89,"fill":118,"stroke":119,"style":120},"269.0",[79,450,452],{"x":361,"y":451,"fill":76,"style":371,"textAnchor":363},"290.5","Very complex art: consider a raster (AVIF) export",[139,454,456],{"id":455},"_4-apply-the-fixes","4. Apply the Fixes",[458,459,460,471,481,490],"ol",{},[150,461,462,465,466,470],{},[153,463,464],{},"Optimise every SVG with SVGO"," in the build — ",[19,467,469],{"href":468},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002F","optimizing SVG files with SVGO",".",[150,472,473,476,477,470],{},[153,474,475],{},"Choose delivery per context"," — ",[19,478,480],{"href":479},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F","inline SVG vs sprite vs img",[150,482,483,476,486,470],{},[153,484,485],{},"Migrate icon fonts to SVG",[19,487,489],{"href":488},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Fmigrating-from-icon-fonts-to-svg\u002F","migrating from icon fonts to SVG",[150,491,492,476,495,470],{},[153,493,494],{},"Reduce rendering cost of complex graphics",[19,496,498],{"href":497},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002F","reducing SVG rendering cost",[139,500,502],{"id":501},"deconstructing-the-cost-of-an-icon-system","Deconstructing the Cost of an Icon System",[504,505,506,527],"table",{},[507,508,509],"thead",{},[510,511,512,516,519,522,525],"tr",{},[513,514,515],"th",{},"Cost",[513,517,518],{},"Icon font",[513,520,521],{},"Inline SVG",[513,523,524],{},"Sprite + use",[513,526,51],{},[528,529,530,548,563,579,593],"tbody",{},[510,531,532,536,539,542,545],{},[533,534,535],"td",{},"Critical-path request",[533,537,538],{},"CSS + font file",[533,540,541],{},"none (in HTML)",[533,543,544],{},"one cacheable file",[533,546,547],{},"one per icon",[510,549,550,553,556,559,561],{},[533,551,552],{},"HTML size",[533,554,555],{},"small",[533,557,558],{},"grows with repetition",[533,560,555],{},[533,562,555],{},[510,564,565,568,571,574,577],{},[533,566,567],{},"DOM nodes",[533,569,570],{},"1 per icon",[533,572,573],{},"many per icon",[533,575,576],{},"2 per icon",[533,578,570],{},[510,580,581,584,586,588,591],{},[533,582,583],{},"CSS colour control",[533,585,387],{},[533,587,387],{},[533,589,590],{},"yes (currentColor)",[533,592,397],{},[510,594,595,598,601,604,606],{},[533,596,597],{},"Layout shift risk",[533,599,600],{},"high (font swap)",[533,602,603],{},"none if sized",[533,605,603],{},[533,607,603],{},[15,609,610],{},[47,611,54,614,54,617,54,620,54,622,54,625,54,627,54,631,54,637,54,641,54,645,54,648,54,652,54,655,54,659,54,663,54,666,54,668,54,671,54,673,54,676,54,678,54,681,54,684,54,687,54,689,54,691,54,693,54,696,54,698,54,701,54,704,54,708,54,710,54,712,54,714,54,716,54,718,54,720,54,723,54,726,54,728,54,730,54,732,54,735,54,737,54],{"viewBox":612,"width":50,"role":51,"ariaLabel":613,"style":53},"0 0 760 228","Comparison of icon fonts, inline SVG, SVG sprites and img for icon delivery.",[56,615],{"className":616,"x":60,"y":60,"width":50,"height":50,"fill":61},[59],[63,618,619],{},"Icon delivery methods compared",[67,621,613],{},[56,623],{"x":71,"y":71,"width":72,"height":624,"rx":74,"fill":75,"stroke":76,"style":77},"226",[79,626,619],{"x":81,"y":82,"fill":76,"style":83},[56,628],{"x":81,"y":86,"width":629,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},"105.3","30.0",[79,632,636],{"x":633,"y":634,"fill":76,"style":635,"textAnchor":97},"38.0","75.5","font-size:12.5px;font-weight:700","Method",[56,638],{"x":639,"y":86,"width":640,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},"133.3","199.6",[79,642,644],{"x":643,"y":634,"fill":76,"style":635,"textAnchor":363},"233.1","Render blocking",[56,646],{"x":647,"y":86,"width":640,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},"332.9",[79,649,651],{"x":650,"y":634,"fill":76,"style":635,"textAnchor":363},"432.7","Repetition cost",[56,653],{"x":654,"y":86,"width":640,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},"532.4",[79,656,658],{"x":657,"y":634,"fill":76,"style":635,"textAnchor":363},"632.2","Styling",[56,660],{"x":81,"y":661,"width":629,"height":630,"rx":60,"fill":75,"stroke":76,"style":662},"86.0","stroke-opacity:0.35",[79,664,518],{"x":633,"y":665,"fill":76,"style":635,"textAnchor":97},"105.5",[56,667],{"x":639,"y":661,"width":640,"height":630,"rx":60,"fill":118,"stroke":119,"style":120},[79,669,670],{"x":643,"y":665,"fill":76,"style":102,"textAnchor":363},"font + CSS",[56,672],{"x":647,"y":661,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,674,675],{"x":650,"y":665,"fill":76,"style":102,"textAnchor":363},"low",[56,677],{"x":654,"y":661,"width":640,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},[79,679,680],{"x":657,"y":665,"fill":76,"style":102,"textAnchor":363},"color only",[56,682],{"x":81,"y":683,"width":629,"height":630,"rx":60,"fill":75,"stroke":76,"style":662},"116.0",[79,685,521],{"x":633,"y":686,"fill":76,"style":635,"textAnchor":97},"135.5",[56,688],{"x":639,"y":683,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,690,75],{"x":643,"y":686,"fill":76,"style":102,"textAnchor":363},[56,692],{"x":647,"y":683,"width":640,"height":630,"rx":60,"fill":118,"stroke":119,"style":120},[79,694,695],{"x":650,"y":686,"fill":76,"style":102,"textAnchor":363},"high",[56,697],{"x":654,"y":683,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,699,700],{"x":657,"y":686,"fill":76,"style":102,"textAnchor":363},"full",[56,702],{"x":81,"y":703,"width":629,"height":630,"rx":60,"fill":75,"stroke":76,"style":662},"146.0",[79,705,707],{"x":633,"y":706,"fill":76,"style":635,"textAnchor":97},"165.5","Sprite + \u003Cuse>",[56,709],{"x":639,"y":703,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,711,75],{"x":643,"y":706,"fill":76,"style":102,"textAnchor":363},[56,713],{"x":647,"y":703,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,715,675],{"x":650,"y":706,"fill":76,"style":102,"textAnchor":363},[56,717],{"x":654,"y":703,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,719,76],{"x":657,"y":706,"fill":76,"style":102,"textAnchor":363},[56,721],{"x":81,"y":722,"width":629,"height":630,"rx":60,"fill":75,"stroke":76,"style":662},"176.0",[79,724,51],{"x":633,"y":725,"fill":76,"style":635,"textAnchor":97},"195.5",[56,727],{"x":639,"y":722,"width":640,"height":630,"rx":60,"fill":90,"stroke":90,"style":91},[79,729,75],{"x":643,"y":725,"fill":76,"style":102,"textAnchor":363},[56,731],{"x":647,"y":722,"width":640,"height":630,"rx":60,"fill":76,"stroke":76,"style":107},[79,733,734],{"x":650,"y":725,"fill":76,"style":102,"textAnchor":363},"per request",[56,736],{"x":654,"y":722,"width":640,"height":630,"rx":60,"fill":118,"stroke":119,"style":120},[79,738,75],{"x":657,"y":725,"fill":76,"style":102,"textAnchor":363},[139,740,742],{"id":741},"advanced-diagnostics-and-edge-cases","Advanced Diagnostics and Edge Cases",[15,744,745,748],{},[153,746,747],{},"SVG in CSS backgrounds."," Data-URI SVGs in CSS bloat render-blocking stylesheets and are re-parsed per use; prefer external files for anything beyond tiny glyphs.",[15,750,751,754],{},[153,752,753],{},"Inline SVG IDs."," Repeating inline SVGs with internal IDs (gradients, clip paths) on one page creates duplicate IDs, which breaks references and accessibility checks; sprites or unique IDs avoid it.",[15,756,757,760,761,764],{},[153,758,759],{},"Accessibility."," Decorative icons need ",[28,762,763],{},"aria-hidden=\"true\"","; meaningful icons need accessible names. Icon fonts often fail both, which is another reason to migrate.",[15,766,767,770,771,774,775,778],{},[153,768,769],{},"Animated SVG."," SMIL or CSS animations on SVG properties that trigger repaint can be costly; animate ",[28,772,773],{},"transform"," and ",[28,776,777],{},"opacity"," where possible.",[15,780,781,784,785,787],{},[153,782,783],{},"SVG as LCP."," An ",[28,786,30],{}," with an SVG source can be the LCP element (common for logo-heavy or illustration heroes); optimise and preload it like any LCP image.",[139,789,791],{"id":790},"validation-and-budgeting","Validation and Budgeting",[15,793,794],{},"Add SVGO to the build so unoptimised SVG cannot ship, budget HTML size and DOM node count for templates with many icons, and assert that no icon font is requested on key templates after migration.",[796,797,802],"pre",{"className":798,"code":799,"language":800,"meta":801,"style":801},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F ci\u002Fsvg-budget.mjs — fail if any SVG asset exceeds 20KB after optimisation.\nimport { globSync, statSync } from 'node:fs';\nconst big = globSync('dist\u002F**\u002F*.svg').filter((f) => statSync(f).size > 20_000);\nif (big.length) { console.error('Oversized SVGs:', big); process.exit(1); }\n\u002F\u002F trade-off: complex illustrations may legitimately exceed 20KB; give them an\n\u002F\u002F explicit allow-list entry rather than raising the global limit.\n","javascript","",[28,803,804,812,833,890,926,932],{"__ignoreMap":801},[805,806,808],"span",{"class":374,"line":807},1,[805,809,811],{"class":810},"sjfSM","\u002F\u002F ci\u002Fsvg-budget.mjs — fail if any SVG asset exceeds 20KB after optimisation.\n",[805,813,815,819,823,826,830],{"class":374,"line":814},2,[805,816,818],{"class":817},"sPARh","import",[805,820,822],{"class":821},"saISM"," { globSync, statSync } ",[805,824,825],{"class":817},"from",[805,827,829],{"class":828},"sZ8jY"," 'node:fs'",[805,831,832],{"class":821},";\n",[805,834,836,839,843,846,850,853,856,859,862,865,869,872,875,878,881,884,887],{"class":374,"line":835},3,[805,837,838],{"class":817},"const",[805,840,842],{"class":841},"sPXB4"," big",[805,844,845],{"class":817}," =",[805,847,849],{"class":848},"smZ65"," globSync",[805,851,852],{"class":821},"(",[805,854,855],{"class":828},"'dist\u002F**\u002F*.svg'",[805,857,858],{"class":821},").",[805,860,861],{"class":848},"filter",[805,863,864],{"class":821},"((",[805,866,868],{"class":867},"sQw3B","f",[805,870,871],{"class":821},") ",[805,873,874],{"class":817},"=>",[805,876,877],{"class":848}," statSync",[805,879,880],{"class":821},"(f).size ",[805,882,883],{"class":817},">",[805,885,886],{"class":841}," 20_000",[805,888,889],{"class":821},");\n",[805,891,893,896,899,902,905,908,910,913,916,919,921,923],{"class":374,"line":892},4,[805,894,895],{"class":817},"if",[805,897,898],{"class":821}," (big.",[805,900,901],{"class":841},"length",[805,903,904],{"class":821},") { console.",[805,906,907],{"class":848},"error",[805,909,852],{"class":821},[805,911,912],{"class":828},"'Oversized SVGs:'",[805,914,915],{"class":821},", big); process.",[805,917,918],{"class":848},"exit",[805,920,852],{"class":821},[805,922,71],{"class":841},[805,924,925],{"class":821},"); }\n",[805,927,929],{"class":374,"line":928},5,[805,930,931],{"class":810},"\u002F\u002F trade-off: complex illustrations may legitimately exceed 20KB; give them an\n",[805,933,935],{"class":374,"line":934},6,[805,936,937],{"class":810},"\u002F\u002F explicit allow-list entry rather than raising the global limit.\n",[139,939,941],{"id":940},"worked-example-an-e-commerce-design-system","Worked Example: An E-Commerce Design System",[15,943,944,945,948],{},"A retailer's design system used an icon font with 600 glyphs (a 98KB WOFF2 and a 40KB stylesheet), and product cards rendered star ratings as five inline SVGs each with gradients and IDs. Category pages with 48 products had 240 rating SVGs, 9,000 extra DOM nodes and duplicate-ID warnings. The team migrated to an SVGO-optimised sprite of the 70 icons actually used, referenced with ",[28,946,947],{},"\u003Cuse>",", and rendered ratings with a single sprite symbol plus a CSS clip for partial stars. Critical-path bytes for icons dropped by 130KB, DOM size on category pages fell by 35%, CLS from icon-font swaps disappeared, and INP for filter interactions improved by 40ms because re-renders touched far fewer nodes.",[139,950,952],{"id":951},"a-rollout-plan-for-icon-systems","A Rollout Plan for Icon Systems",[15,954,955],{},"Icon changes touch every page, so stage them. Start with SVGO in the build — zero visual change, immediate byte savings. Next, introduce the sprite (or per-icon components) alongside the existing system and migrate high-traffic templates first, measuring HTML size, DOM size and CLS. Then remove the icon font once no template references it, and add a CI check that fails if its stylesheet reappears. Finally, audit large illustrations for rendering cost. Each step is independently shippable and measurable, and the order puts the cheapest, safest wins first.",[139,957,959],{"id":958},"measuring-svg-impact-in-the-field","Measuring SVG Impact in the Field",[15,961,962],{},"SVG costs rarely appear by name in field data, so measure their proxies: HTML transfer size and DOM node count per template (both easy to add to a RUM beacon), CLS attributed to icon containers, and LoAF render time for interactions on icon-heavy views. Compare templates before and after migration. For illustration-heavy pages, Element Timing on the main illustration tells you when it actually painted, which catches the rare case where a complex SVG, not a network request, is the LCP bottleneck.",[139,964,966],{"id":965},"code-examples-three-delivery-patterns","Code Examples: Three Delivery Patterns",[15,968,969],{},"The same icon can be delivered three ways; each snippet shows the pattern and when not to use it.",[796,971,975],{"className":972,"code":973,"language":974,"meta":801,"style":801},"language-jsx shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F 1. Inline via a build-time import (vite-plugin-svgr \u002F unplugin-icons): full CSS\n\u002F\u002F    control and no request, but every use adds HTML bytes and DOM nodes.\nimport SearchIcon from '.\u002Ficons\u002Fsearch.svg?react';\n\u003Cbutton className=\"icon-btn\" aria-label=\"Search\">\u003CSearchIcon aria-hidden=\"true\" width={20} height={20} \u002F>\u003C\u002Fbutton>\n\u002F\u002F trade-off: repeat this 50 times per page and the HTML and DOM grow fast;\n\u002F\u002F use a sprite for icons that repeat.\n","jsx",[28,976,977,982,987,1001,1070,1075],{"__ignoreMap":801},[805,978,979],{"class":374,"line":807},[805,980,981],{"class":810},"\u002F\u002F 1. Inline via a build-time import (vite-plugin-svgr \u002F unplugin-icons): full CSS\n",[805,983,984],{"class":374,"line":814},[805,985,986],{"class":810},"\u002F\u002F    control and no request, but every use adds HTML bytes and DOM nodes.\n",[805,988,989,991,994,996,999],{"class":374,"line":835},[805,990,818],{"class":817},[805,992,993],{"class":821}," SearchIcon ",[805,995,825],{"class":817},[805,997,998],{"class":828}," '.\u002Ficons\u002Fsearch.svg?react'",[805,1000,832],{"class":821},[805,1002,1003,1006,1010,1013,1016,1019,1022,1024,1027,1030,1033,1036,1038,1041,1044,1047,1050,1053,1056,1058,1060,1062,1065,1067],{"class":374,"line":892},[805,1004,1005],{"class":821},"\u003C",[805,1007,1009],{"class":1008},"sZBmE","button",[805,1011,1012],{"class":841}," className",[805,1014,1015],{"class":817},"=",[805,1017,1018],{"class":828},"\"icon-btn\"",[805,1020,1021],{"class":841}," aria-label",[805,1023,1015],{"class":817},[805,1025,1026],{"class":828},"\"Search\"",[805,1028,1029],{"class":821},">\u003C",[805,1031,1032],{"class":1008},"SearchIcon",[805,1034,1035],{"class":841}," aria-hidden",[805,1037,1015],{"class":817},[805,1039,1040],{"class":828},"\"true\"",[805,1042,1043],{"class":841}," width",[805,1045,1046],{"class":817},"={",[805,1048,1049],{"class":841},"20",[805,1051,1052],{"class":817},"}",[805,1054,1055],{"class":841}," height",[805,1057,1046],{"class":817},[805,1059,1049],{"class":841},[805,1061,1052],{"class":817},[805,1063,1064],{"class":821}," \u002F>\u003C\u002F",[805,1066,1009],{"class":1008},[805,1068,1069],{"class":821},">\n",[805,1071,1072],{"class":374,"line":928},[805,1073,1074],{"class":810},"\u002F\u002F trade-off: repeat this 50 times per page and the HTML and DOM grow fast;\n",[805,1076,1077],{"class":374,"line":934},[805,1078,1079],{"class":810},"\u002F\u002F use a sprite for icons that repeat.\n",[796,1081,1083],{"className":972,"code":1082,"language":974,"meta":801,"style":801},"\u002F\u002F 2. Sprite reference: one cached file, two DOM nodes per use, currentColor works.\nconst Icon = ({ name, size = 20 }) =>\n  React.createElement('svg', { width: size, height: size, 'aria-hidden': true },\n    React.createElement('use', { href: `\u002Ficons\u002Fsprite.3f2a.svg#${name}` }));\n\u002F\u002F trade-off: external sprites need a request on first use and cannot be\n\u002F\u002F styled per-path from page CSS beyond inherited properties.\n",[28,1084,1085,1090,1121,1149,1175,1180],{"__ignoreMap":801},[805,1086,1087],{"class":374,"line":807},[805,1088,1089],{"class":810},"\u002F\u002F 2. Sprite reference: one cached file, two DOM nodes per use, currentColor works.\n",[805,1091,1092,1094,1097,1099,1102,1105,1107,1110,1112,1115,1118],{"class":374,"line":814},[805,1093,838],{"class":817},[805,1095,1096],{"class":848}," Icon",[805,1098,845],{"class":817},[805,1100,1101],{"class":821}," ({ ",[805,1103,1104],{"class":867},"name",[805,1106,265],{"class":821},[805,1108,1109],{"class":867},"size",[805,1111,845],{"class":817},[805,1113,1114],{"class":841}," 20",[805,1116,1117],{"class":821}," }) ",[805,1119,1120],{"class":817},"=>\n",[805,1122,1123,1126,1129,1131,1134,1137,1140,1143,1146],{"class":374,"line":835},[805,1124,1125],{"class":821},"  React.",[805,1127,1128],{"class":848},"createElement",[805,1130,852],{"class":821},[805,1132,1133],{"class":828},"'svg'",[805,1135,1136],{"class":821},", { width: size, height: size, ",[805,1138,1139],{"class":828},"'aria-hidden'",[805,1141,1142],{"class":821},": ",[805,1144,1145],{"class":841},"true",[805,1147,1148],{"class":821}," },\n",[805,1150,1151,1154,1156,1158,1161,1164,1167,1169,1172],{"class":374,"line":892},[805,1152,1153],{"class":821},"    React.",[805,1155,1128],{"class":848},[805,1157,852],{"class":821},[805,1159,1160],{"class":828},"'use'",[805,1162,1163],{"class":821},", { href: ",[805,1165,1166],{"class":828},"`\u002Ficons\u002Fsprite.3f2a.svg#${",[805,1168,1104],{"class":821},[805,1170,1171],{"class":828},"}`",[805,1173,1174],{"class":821}," }));\n",[805,1176,1177],{"class":374,"line":928},[805,1178,1179],{"class":810},"\u002F\u002F trade-off: external sprites need a request on first use and cannot be\n",[805,1181,1182],{"class":374,"line":934},[805,1183,1184],{"class":810},"\u002F\u002F styled per-path from page CSS beyond inherited properties.\n",[796,1186,1190],{"className":1187,"code":1188,"language":1189,"meta":801,"style":801},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003C!-- 3. img: cacheable, isolated from page CSS and DOM, ideal for logos and illustrations. -->\n\u003Cimg src=\"\u002Fbrand\u002Flogo.9b1c.svg\" width=\"132\" height=\"32\" alt=\"Acme\">\n\u003C!-- trade-off: no CSS styling of internals (no hover recolouring); use inline\n     or sprite when the icon must follow text colour. -->\n","html",[28,1191,1192,1197,1235,1240],{"__ignoreMap":801},[805,1193,1194],{"class":374,"line":807},[805,1195,1196],{"class":810},"\u003C!-- 3. img: cacheable, isolated from page CSS and DOM, ideal for logos and illustrations. -->\n",[805,1198,1199,1201,1203,1206,1208,1211,1213,1215,1218,1220,1222,1225,1228,1230,1233],{"class":374,"line":814},[805,1200,1005],{"class":821},[805,1202,51],{"class":1008},[805,1204,1205],{"class":841}," src",[805,1207,1015],{"class":821},[805,1209,1210],{"class":828},"\"\u002Fbrand\u002Flogo.9b1c.svg\"",[805,1212,1043],{"class":841},[805,1214,1015],{"class":821},[805,1216,1217],{"class":828},"\"132\"",[805,1219,1055],{"class":841},[805,1221,1015],{"class":821},[805,1223,1224],{"class":828},"\"32\"",[805,1226,1227],{"class":841}," alt",[805,1229,1015],{"class":821},[805,1231,1232],{"class":828},"\"Acme\"",[805,1234,1069],{"class":821},[805,1236,1237],{"class":374,"line":835},[805,1238,1239],{"class":810},"\u003C!-- trade-off: no CSS styling of internals (no hover recolouring); use inline\n",[805,1241,1242],{"class":374,"line":892},[805,1243,1244],{"class":810},"     or sprite when the icon must follow text colour. -->\n",[139,1246,1248],{"id":1247},"svg-and-core-web-vitals-metric-by-metric","SVG and Core Web Vitals, Metric by Metric",[15,1250,1251,1254,1255,1257],{},[153,1252,1253],{},"LCP."," SVGs are rarely the LCP element, but large illustration heroes and logo-led landing pages can make them one. Then they follow image rules: discoverable in HTML, appropriately sized, not lazy-loaded, ideally preloaded. Inline SVG heroes paint with the HTML but add parse time; for large art, an ",[28,1256,30],{}," that streams in parallel is often faster.",[15,1259,1260,1263,1264,1266,1267,1270,1271,1274,1275,1278],{},[153,1261,1262],{},"CLS."," Every SVG needs a known size before it renders. ",[28,1265,30],{}," SVGs need ",[28,1268,1269],{},"width","\u002F",[28,1272,1273],{},"height","; inline SVGs need explicit dimensions or a ",[28,1276,1277],{},"viewBox"," with CSS sizing; icon fonts cause shifts when the glyph metrics differ from the fallback. Sizing is the single most common SVG-related CLS fix.",[15,1280,1281,1284,1285,1287],{},[153,1282,1283],{},"INP."," Large inline SVGs add DOM nodes that style recalculation and layout must traverse on every interaction that changes classes above them. Icon-heavy lists, data visualisations with thousands of elements, and repeated inline icons all inflate the work behind each interaction. Sprites, ",[28,1286,30],{}," and canvas rendering for large charts keep the DOM small.",[139,1289,1291],{"id":1290},"charts-and-data-visualisations","Charts and Data Visualisations",[15,1293,1294],{},"Charts are the most demanding SVG on many sites: hundreds or thousands of elements, frequent updates, tooltips on hover. For a few hundred elements, SVG is fine and accessible. Beyond a few thousand, or with frequent animated updates, rendering to canvas (or WebGL) is usually much cheaper on the main thread, at the cost of building accessibility separately (a data table or ARIA description). Decide per chart based on element count and update frequency, and measure paint and layout time in a throttled trace before and after.",[139,1296,1298],{"id":1297},"common-pitfalls","Common Pitfalls",[147,1300,1301,1311,1317,1323,1339,1345,1351,1361],{},[150,1302,1303,1306,1307,1310],{},[153,1304,1305],{},"Exporting SVGs with embedded bitmaps."," Design tools sometimes embed PNG data inside an SVG; the file looks like a vector but is a large base64 raster. Inspect for ",[28,1308,1309],{},"\u003Cimage"," elements with data URIs.",[150,1312,1313,1316],{},[153,1314,1315],{},"Keeping editor metadata."," Sketch, Figma and Illustrator exports carry IDs, comments and namespaces that SVGO removes safely.",[150,1318,1319,1322],{},[153,1320,1321],{},"Excessive coordinate precision."," Six decimal places on every path point add bytes with no visible difference at screen sizes; SVGO's precision settings trim them.",[150,1324,1325,1330,1331,1270,1333,1335,1336,1338],{},[153,1326,1327,1328,470],{},"Removing the ",[28,1329,1277],{}," Some optimisation presets remove it when ",[28,1332,1269],{},[28,1334,1273],{}," exist, which breaks responsive scaling. Keep ",[28,1337,1277],{}," and remove fixed dimensions instead if needed.",[150,1340,1341,1344],{},[153,1342,1343],{},"Duplicate IDs from repeated inline SVG."," Gradients and clip paths referenced by ID break when the same SVG is inlined several times.",[150,1346,1347,1350],{},[153,1348,1349],{},"Icons without dimensions."," Unsized SVGs render at default sizes (often 300×150) until CSS applies, causing visible jumps.",[150,1352,1353,1356,1357,1360],{},[153,1354,1355],{},"Decorative icons announced by screen readers."," Missing ",[28,1358,1359],{},"aria-hidden"," makes assistive technology read meaningless path data or file names.",[150,1362,1363,1366],{},[153,1364,1365],{},"Sprite files that include every icon in the library."," Build sprites from the icons actually used, not the full set.",[139,1368,1370],{"id":1369},"dark-mode-and-theming-without-duplicate-assets","Dark Mode and Theming Without Duplicate Assets",[15,1372,1373,1374,1377,1378,1381,1382,1385,1386,1388,1389,1392,1393,470],{},"Themed sites often ship two versions of every icon and illustration — light and dark — doubling bytes and maintenance. SVG avoids that: icons drawn with ",[28,1375,1376],{},"fill=\"currentColor\""," inherit text colour, and illustrations can use CSS custom properties for their palette (",[28,1379,1380],{},"fill: var(--illustration-accent)",") so a single file serves both themes. This works for inline SVG and sprite references (which inherit ",[28,1383,1384],{},"color","), not for ",[28,1387,30],{}," SVGs, which are isolated from page CSS — those need either a ",[28,1390,1391],{},"prefers-color-scheme"," media query inside the SVG file itself or separate files. Plan the theming approach before choosing the delivery method, because it often decides between inline\u002Fsprite and ",[28,1394,30],{},[139,1396,1398],{"id":1397},"faq","FAQ",[1400,1401,1404,1408],"details",{"className":1402},[1403],"faq-item",[1405,1406,1407],"summary",{},"Is SVG always smaller than PNG or AVIF?",[15,1409,1410],{},"For icons, logos and flat illustrations, almost always. For complex artwork with gradients, textures or photographic detail, a raster AVIF can be smaller and cheaper to render. Compare both for large illustrations.",[1400,1412,1414,1417],{"className":1413},[1403],[1405,1415,1416],{},"Does inline SVG block rendering?",[15,1418,1419],{},"No — it is part of the HTML and renders with it. Its cost is in HTML bytes and DOM size, which matter when SVGs repeat many times.",[1400,1421,1423,1426],{"className":1422},[1403],[1405,1424,1425],{},"Are icon fonts still acceptable?",[15,1427,1428],{},"They work, but they add render-blocking or late-loading resources, risk layout shift and invisible icons, and have accessibility pitfalls. SVG-based systems avoid all of these and are the modern default.",[1400,1430,1432,1435],{"className":1431},[1403],[1405,1433,1434],{},"Should SVGs be gzipped or brotli-compressed?",[15,1436,1437,1438,1441],{},"Yes. SVG is text and compresses very well; make sure your server and CDN compress ",[28,1439,1440],{},"image\u002Fsvg+xml"," responses, which some default configurations miss.",[1400,1443,1445,1448],{"className":1444},[1403],[1405,1446,1447],{},"How do I keep designers' exports optimised?",[15,1449,1450],{},"Automate it: run SVGO in the build (or on commit) with a shared configuration, so manual exports are cleaned regardless of how they were produced.",[1400,1452,1454,1457],{"className":1453},[1403],[1405,1455,1456],{},"Should the logo be inline or an img?",[15,1458,1459,1460,1462],{},"If it must change colour with themes (dark mode) or on hover, inline it (optimised) or reference it from a sprite. Otherwise an ",[28,1461,30],{}," with width and height is simpler, cacheable across pages and keeps the HTML small.",[1400,1464,1466,1469],{"className":1465},[1403],[1405,1467,1468],{},"How many icons belong in a sprite?",[15,1470,1471],{},"Only those used on the pages that load it. Large sites sometimes build two sprites: a small core sprite for the header and common UI, cached site-wide, and feature sprites for specific sections.",[1400,1473,1475,1478],{"className":1474},[1403],[1405,1476,1477],{},"Do SVG icons need lazy loading?",[15,1479,1480,1481,1484,1485,1487],{},"Small icons, no — they are part of the HTML or a single cached sprite. Large SVG illustrations below the fold can use ",[28,1482,1483],{},"loading=\"lazy\""," on their ",[28,1486,30],{}," like any other image, with dimensions set so nothing shifts when they load.",[1400,1489,1491,1494],{"className":1490},[1403],[1405,1492,1493],{},"What is the quickest SVG win on most sites?",[15,1495,1496],{},"Running SVGO over every SVG asset in the build. It is a configuration change with no visual impact, typically shrinks exported SVGs by 30–70%, and prevents future unoptimised exports from shipping.",[139,1498,1500],{"id":1499},"guides-in-this-topic","Guides in This Topic",[147,1502,1503,1509,1515,1521],{},[150,1504,1505,1508],{},[19,1506,1507],{"href":468},"Optimizing SVG files with SVGO"," — automated cleanup of exports.",[150,1510,1511,1514],{},[19,1512,1513],{"href":479},"Inline SVG vs sprite vs img"," — choosing a delivery method.",[150,1516,1517,1520],{},[19,1518,1519],{"href":488},"Migrating from icon fonts to SVG"," — removing a render-blocking font.",[150,1522,1523,1526],{},[19,1524,1525],{"href":497},"Reducing SVG rendering cost"," — when vectors are slow to paint.",[139,1528,1530],{"id":1529},"related","Related",[147,1532,1533,1540,1547,1554],{},[150,1534,1535,1539],{},[19,1536,1538],{"href":1537},"\u002Fcore-web-vitals-measurement\u002Ffont-loading-and-text-rendering-performance\u002F","Font loading & text rendering performance"," — the font side of icon fonts.",[150,1541,1542,1546],{},[19,1543,1545],{"href":1544},"\u002Frendering-css-performance\u002Fdom-size-and-list-virtualization\u002F","DOM size & list virtualization"," — the cost of repeated inline SVG.",[150,1548,1549,1553],{},[19,1550,1552],{"href":1551},"\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002F","Serving AVIF and WebP with fallbacks"," — when a raster beats a vector.",[150,1555,1556,1560],{},[19,1557,1559],{"href":1558},"\u002Fcore-web-vitals-measurement\u002Freducing-cumulative-layout-shift-cls\u002Freserving-space-for-embeds-with-aspect-ratio\u002F","Reserving space for embeds with aspect-ratio"," — sizing graphics to avoid shifts.",[1562,1563,1565],"script",{"type":1564},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"SVG & Icon Optimization: Small Graphics, Real Costs\",\n  \"description\": \"How SVG graphics and icon systems affect bytes, parsing, rendering and layout stability, and how to deliver them efficiently.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Environment Setup: Inventory SVG Usage\",\n      \"text\": \"List every SVG source: logo files, icon libraries, illustrations, charts and inline SVG in templates.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Capture a Baseline\",\n      \"text\": \"Record HTML size, DOM node count, the size of SVG files and icon fonts on the critical path, and paint timings for pages with large illustrations.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Isolate the Bottleneck\",\n      \"text\": \"Bytes problems are solved by optimisation and subsetting; repetition problems by sprites or ; icon-font problems by migration to SVG; rendering problems by simplifying graphics or rasterising them.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Apply the Fixes\",\n      \"text\": \"1.\"\n    }\n  ]\n}\n",[1562,1567,1568],{"type":1564},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"SVG & Icon Optimization: Small Graphics, Real Costs\",\n  \"description\": \"How SVG graphics and icon systems affect bytes, parsing, rendering and layout stability, and how to deliver them efficiently.\",\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\u002F\"\n  }\n}\n",[1562,1570,1571],{"type":1564},"\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}\n",[1573,1574,1575],"style",{},"html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}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}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 .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}",{"title":801,"searchDepth":814,"depth":814,"links":1577},[1578,1579,1580,1581,1582,1583,1584,1585,1586,1587,1588,1589,1590,1591,1592,1593,1594,1595,1596,1597],{"id":141,"depth":814,"text":142},{"id":252,"depth":814,"text":253},{"id":297,"depth":814,"text":298},{"id":304,"depth":814,"text":305},{"id":311,"depth":814,"text":312},{"id":455,"depth":814,"text":456},{"id":501,"depth":814,"text":502},{"id":741,"depth":814,"text":742},{"id":790,"depth":814,"text":791},{"id":940,"depth":814,"text":941},{"id":951,"depth":814,"text":952},{"id":958,"depth":814,"text":959},{"id":965,"depth":814,"text":966},{"id":1247,"depth":814,"text":1248},{"id":1290,"depth":814,"text":1291},{"id":1297,"depth":814,"text":1298},{"id":1369,"depth":814,"text":1370},{"id":1397,"depth":814,"text":1398},{"id":1499,"depth":814,"text":1500},{"id":1529,"depth":814,"text":1530},"How SVG graphics and icon systems affect bytes, parsing, rendering and layout stability, and how to deliver them efficiently.","md",{"slug":1601,"type":1602,"breadcrumb":1603,"datePublished":1609,"dateModified":1609},"svg-and-icon-optimization","topic",[1604,1606,1607],{"name":1605,"url":1270},"Home",{"name":22,"url":21},{"name":5,"url":1608},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization",{"title":1613,"description":1614},"SVG & Icon Optimization for Faster Rendering","Optimise SVG files and icon systems for speed: SVGO minification, choosing inline vs sprite vs img, replacing icon fonts, and reducing SVG rendering cost.","image-media-optimization\u002Fsvg-and-icon-optimization\u002Findex","8kAu3cDGzTmXTqv65yIBDhr0jvOM_maEfIew4uPIFLc",[1618,1622],{"title":1619,"path":1620,"stem":1621},"JPEG XL Support and Fallbacks","\u002Fimage-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks","image-media-optimization\u002Fserving-avif-and-webp-with-fallbacks\u002Fjpeg-xl-support-and-fallbacks\u002Findex",{"title":1623,"path":1624,"stem":1625},"Inline SVG vs Sprite vs img","\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img","image-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002Findex",1791308075957]