[{"data":1,"prerenderedAt":1052},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo":3,"surroundings:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo":1043},{"id":4,"title":5,"body":6,"description":1023,"extension":1024,"meta":1025,"navigation":1036,"path":1037,"seo":1038,"stem":1041,"__hash__":1042},"content\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002Findex.md","Optimizing SVG Files with SVGO",{"type":7,"value":8,"toc":1006},"minimark",[9,14,29,32,156,161,221,225,231,237,243,249,390,394,399,568,572,615,618,622,643,647,650,765,769,772,776,783,787,793,797,823,827,844,850,856,862,866,881,890,899,912,921,930,939,955,964,968,991,996,999,1002],[10,11,13],"h1",{"id":12},"how-to-optimize-svg-files-with-svgo","How to Optimize SVG Files with SVGO",[15,16,17,18,23,24,28],"p",{},"This guide is the first step in ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002F","SVG & Icon Optimization",", within ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",". SVGs exported from design tools are written for editability, not delivery. They carry editor metadata, layer names as IDs, hidden layers, unused definitions, default attribute values spelled out in full, nested groups that do nothing, and path coordinates with far more decimal places than any screen can show. None of it changes what users see; all of it costs bytes in HTML (for inline SVG) or in requests (for files).",[15,30,31],{},"SVGO is the standard tool for removing that bloat. Its default preset applies dozens of safe transformations — removing metadata and comments, collapsing groups, merging paths, shortening colours and numbers. Typical savings are 30–80% for exported icons and illustrations. The main risks are a few transformations that can change appearance or break CSS and JavaScript that depend on IDs and classes, which a short configuration controls.",[15,33,34],{},[35,36,42,43,42,50,42,54,42,57,42,66,42,72,42,79,42,89,42,94,42,98,42,104,42,108,42,112,42,116,42,120,42,124,42,128,42,132,42,136,42,140,42,144,42,148,42,152,42],"svg",{"viewBox":37,"width":38,"role":39,"ariaLabel":40,"style":41},"0 0 760 256","100%","img","Bar chart of file size before and after SVGO for an icon, a logo and an illustration exported from a design tool.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[44,45],"rect",{"className":46,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],"svg-canvas","0","#ffffff",[51,52,53],"title",{},"SVGO savings on typical exports",[55,56,40],"desc",{},[44,58],{"x":59,"y":59,"width":60,"height":61,"rx":62,"fill":63,"stroke":64,"style":65},"1","758","254","10","none","currentColor","stroke-opacity:0.18",[67,68,53],"text",{"x":69,"y":70,"fill":64,"style":71},"28.0","34.0","font-size:16px;font-weight:700",[67,73,78],{"x":74,"y":75,"fill":64,"style":76,"textAnchor":77},"130.9","70.0","font-size:13px","end","Icon before",[44,80],{"x":81,"y":82,"width":83,"height":84,"rx":85,"fill":86,"stroke":87,"style":88},"142.9","56.0","17.0","19","3","#ffc300","#b8860b","fill-opacity:0.7;stroke-opacity:0.9",[67,90,93],{"x":91,"y":75,"fill":64,"style":92},"166.0","font-size:12px;font-weight:600","4.8KB",[67,95,97],{"x":74,"y":96,"fill":64,"style":76,"textAnchor":77},"101.0","Icon after",[44,99],{"x":81,"y":100,"width":101,"height":84,"rx":85,"fill":102,"stroke":102,"style":103},"87.0","3.2","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[67,105,107],{"x":106,"y":96,"fill":64,"style":92},"152.1","0.9KB",[67,109,111],{"x":74,"y":110,"fill":64,"style":76,"textAnchor":77},"132.0","Logo before",[44,113],{"x":81,"y":114,"width":115,"height":84,"rx":85,"fill":86,"stroke":87,"style":88},"118.0","78.1",[67,117,119],{"x":118,"y":110,"fill":64,"style":92},"227.0","22KB",[67,121,123],{"x":74,"y":122,"fill":64,"style":76,"textAnchor":77},"163.0","Logo after",[44,125],{"x":81,"y":126,"width":127,"height":84,"rx":85,"fill":102,"stroke":102,"style":103},"149.0","21.6",[67,129,131],{"x":130,"y":122,"fill":64,"style":92},"170.6","6.1KB",[67,133,135],{"x":74,"y":134,"fill":64,"style":76,"textAnchor":77},"194.0","Illustration before",[44,137],{"x":81,"y":138,"width":139,"height":84,"rx":85,"fill":86,"stroke":87,"style":88},"180.0","525.1",[67,141,143],{"x":142,"y":134,"fill":64,"style":92},"674.0","148KB",[67,145,147],{"x":74,"y":146,"fill":64,"style":76,"textAnchor":77},"225.0","Illustration after",[44,149],{"x":81,"y":150,"width":151,"height":84,"rx":85,"fill":102,"stroke":102,"style":103},"211.0","216.4",[67,153,155],{"x":154,"y":146,"fill":64,"style":92},"365.3","61KB",[157,158,160],"h2",{"id":159},"rapid-diagnosis","Rapid Diagnosis",[162,163,164,196,202,212],"ul",{},[165,166,167,171,172,176,177,176,180,183,184,187,188,191,192,195],"li",{},[168,169,170],"strong",{},"Open an exported SVG in a text editor."," Look for ",[173,174,175],"code",{},"\u003Cmetadata>",", ",[173,178,179],{},"sodipodi:",[173,181,182],{},"inkscape:"," or ",[173,185,186],{},"data-name"," attributes, ",[173,189,190],{},"\u003C!-- Generator: ... -->"," comments, and coordinates like ",[173,193,194],{},"12.000000",".",[165,197,198,201],{},[168,199,200],{},"Check sizes of SVG assets"," in the build output and of inline SVG in HTML.",[165,203,204,207,208,211],{},[168,205,206],{},"Check whether SVGO already runs."," Many build setups optimise imported SVG components but not SVGs in ",[173,209,210],{},"public\u002F"," or CMS uploads.",[165,213,214,42,217,220],{},[168,215,216],{},"Look for embedded rasters.",[173,218,219],{},"\u003Cimage href=\"data:image\u002Fpng;base64,…\">"," inside an SVG means a bitmap disguised as a vector.",[157,222,224],{"id":223},"root-cause-analysis","Root Cause Analysis",[15,226,227,230],{},[168,228,229],{},"1. Editor-oriented exports."," Tools preserve layer structure, names and metadata to support round-tripping.",[15,232,233,236],{},[168,234,235],{},"2. Excess precision."," Coordinates with five or six decimals are common; two or three suffice at typical display sizes.",[15,238,239,242],{},[168,240,241],{},"3. Redundant structure."," Empty groups, transforms that could be applied to paths, and duplicated style attributes.",[15,244,245,248],{},[168,246,247],{},"4. No automation."," Files are optimised once by hand, then replaced by new unoptimised exports.",[15,250,251],{},[35,252,42,255,42,258,42,261,42,263,42,266,42,268,42,273,42,280,42,284,42,289,42,292,42,296,42,300,42,304,42,306,42,310,42,313,42,316,42,319,42,323,42,325,42,328,42,330,42,333,42,337,42,341,42,345,42,347,42,351,42,353,42,355,42,358,42,362,42,364,42,367,42,370,42,373,42,376,42,380,42,382,42,385,42,387,42],{"viewBox":253,"width":38,"role":39,"ariaLabel":254,"style":41},"0 0 760 274","Categories of SVG bloat, what SVGO does with them, and whether the default is safe.",[44,256],{"className":257,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,259,260],{},"What SVGO removes or rewrites",[55,262,254],{},[44,264],{"x":59,"y":59,"width":60,"height":265,"rx":62,"fill":63,"stroke":64,"style":65},"272",[67,267,260],{"x":69,"y":70,"fill":64,"style":71},[44,269],{"x":69,"y":82,"width":270,"height":271,"rx":48,"fill":64,"stroke":64,"style":272},"210.0","30.0","fill-opacity:0.06;stroke-opacity:0.4",[67,274,279],{"x":275,"y":276,"fill":64,"style":277,"textAnchor":278},"38.0","75.5","font-size:12.5px;font-weight:700","start","Bloat",[44,281],{"x":282,"y":82,"width":283,"height":271,"rx":48,"fill":64,"stroke":64,"style":272},"238.0","247.0",[67,285,288],{"x":286,"y":276,"fill":64,"style":277,"textAnchor":287},"361.5","middle","SVGO action",[44,290],{"x":291,"y":82,"width":283,"height":271,"rx":48,"fill":64,"stroke":64,"style":272},"485.0",[67,293,295],{"x":294,"y":276,"fill":64,"style":277,"textAnchor":287},"608.5","Safe by default?",[44,297],{"x":69,"y":298,"width":270,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},"86.0","stroke-opacity:0.35",[67,301,303],{"x":275,"y":302,"fill":64,"style":277,"textAnchor":278},"105.5","Editor metadata and comments",[44,305],{"x":282,"y":298,"width":283,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},[67,307,309],{"x":286,"y":302,"fill":64,"style":308,"textAnchor":287},"font-size:12px","remove",[44,311],{"x":291,"y":298,"width":283,"height":271,"rx":48,"fill":102,"stroke":102,"style":312},"fill-opacity:0.14;stroke-opacity:0.9",[67,314,315],{"x":294,"y":302,"fill":64,"style":308,"textAnchor":287},"yes",[44,317],{"x":69,"y":318,"width":270,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},"116.0",[67,320,322],{"x":275,"y":321,"fill":64,"style":277,"textAnchor":278},"135.5","Excess numeric precision",[44,324],{"x":282,"y":318,"width":283,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},[67,326,327],{"x":286,"y":321,"fill":64,"style":308,"textAnchor":287},"round to N decimals",[44,329],{"x":291,"y":318,"width":283,"height":271,"rx":48,"fill":64,"stroke":64,"style":272},[67,331,332],{"x":294,"y":321,"fill":64,"style":308,"textAnchor":287},"check precision",[44,334],{"x":69,"y":335,"width":270,"height":336,"rx":48,"fill":63,"stroke":64,"style":299},"146.0","46.0",[67,338,340],{"x":275,"y":339,"fill":64,"style":277,"textAnchor":278},"165.5","Empty groups \u002F useless",[67,342,344],{"x":275,"y":343,"fill":64,"style":277,"textAnchor":278},"181.5","transforms",[44,346],{"x":282,"y":335,"width":283,"height":336,"rx":48,"fill":63,"stroke":64,"style":299},[67,348,350],{"x":286,"y":349,"fill":64,"style":308,"textAnchor":287},"173.5","collapse \u002F apply",[44,352],{"x":291,"y":335,"width":283,"height":336,"rx":48,"fill":102,"stroke":102,"style":312},[67,354,315],{"x":294,"y":349,"fill":64,"style":308,"textAnchor":287},[44,356],{"x":69,"y":357,"width":270,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},"192.0",[67,359,361],{"x":275,"y":360,"fill":64,"style":277,"textAnchor":278},"211.5","IDs and classes",[44,363],{"x":282,"y":357,"width":283,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},[67,365,366],{"x":286,"y":360,"fill":64,"style":308,"textAnchor":287},"remove or minify",[44,368],{"x":291,"y":357,"width":283,"height":271,"rx":48,"fill":86,"stroke":87,"style":369},"fill-opacity:0.24;stroke-opacity:0.9",[67,371,372],{"x":294,"y":360,"fill":64,"style":308,"textAnchor":287},"breaks CSS\u002FJS refs",[44,374],{"x":69,"y":375,"width":270,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},"222.0",[67,377,379],{"x":275,"y":378,"fill":64,"style":277,"textAnchor":278},"241.5","viewBox",[44,381],{"x":282,"y":375,"width":283,"height":271,"rx":48,"fill":63,"stroke":64,"style":299},[67,383,384],{"x":286,"y":378,"fill":64,"style":308,"textAnchor":287},"removed by some presets",[44,386],{"x":291,"y":375,"width":283,"height":271,"rx":48,"fill":86,"stroke":87,"style":369},[67,388,389],{"x":294,"y":378,"fill":64,"style":308,"textAnchor":287},"keep it",[157,391,393],{"id":392},"step-by-step-resolution","Step-by-Step Resolution",[395,396,398],"h3",{"id":397},"_1-create-a-shared-safe-configuration","1. Create a shared, safe configuration",[400,401,406],"pre",{"className":402,"code":403,"language":404,"meta":405,"style":405},"language-javascript shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u002F\u002F svgo.config.mjs\nexport default {\n  multipass: true,\n  floatPrecision: 2,\n  plugins: [\n    { name: 'preset-default', params: { overrides: {\n      removeViewBox: false,          \u002F\u002F keep responsive scaling\n      cleanupIds: { minify: false }, \u002F\u002F keep IDs referenced from CSS\u002FJS\n    } } },\n    'removeDimensions',              \u002F\u002F size via CSS + viewBox instead of fixed width\u002Fheight\n    { name: 'removeAttrs', params: { attrs: ['data-name'] } },\n  ],\n};\n\u002F\u002F trade-off: removeDimensions suits icons styled by CSS; for \u003Cimg> SVGs that\n\u002F\u002F rely on intrinsic size, drop it and set width\u002Fheight on the img element.\n","javascript","",[173,407,408,417,431,445,456,462,475,490,504,510,522,539,547,556,562],{"__ignoreMap":405},[409,410,413],"span",{"class":411,"line":412},"line",1,[409,414,416],{"class":415},"sjfSM","\u002F\u002F svgo.config.mjs\n",[409,418,420,424,427],{"class":411,"line":419},2,[409,421,423],{"class":422},"sPARh","export",[409,425,426],{"class":422}," default",[409,428,430],{"class":429},"sQw3B"," {\n",[409,432,434,438,442],{"class":411,"line":433},3,[409,435,437],{"class":436},"saISM","  multipass: ",[409,439,441],{"class":440},"sPXB4","true",[409,443,444],{"class":429},",\n",[409,446,448,451,454],{"class":411,"line":447},4,[409,449,450],{"class":436},"  floatPrecision: ",[409,452,453],{"class":440},"2",[409,455,444],{"class":429},[409,457,459],{"class":411,"line":458},5,[409,460,461],{"class":436},"  plugins: [\n",[409,463,465,468,472],{"class":411,"line":464},6,[409,466,467],{"class":436},"    { name: ",[409,469,471],{"class":470},"sZ8jY","'preset-default'",[409,473,474],{"class":436},", params: { overrides: {\n",[409,476,478,481,484,487],{"class":411,"line":477},7,[409,479,480],{"class":436},"      removeViewBox: ",[409,482,483],{"class":440},"false",[409,485,486],{"class":436},",          ",[409,488,489],{"class":415},"\u002F\u002F keep responsive scaling\n",[409,491,493,496,498,501],{"class":411,"line":492},8,[409,494,495],{"class":436},"      cleanupIds: { minify: ",[409,497,483],{"class":440},[409,499,500],{"class":436}," }, ",[409,502,503],{"class":415},"\u002F\u002F keep IDs referenced from CSS\u002FJS\n",[409,505,507],{"class":411,"line":506},9,[409,508,509],{"class":436},"    } } },\n",[409,511,513,516,519],{"class":411,"line":512},10,[409,514,515],{"class":470},"    'removeDimensions'",[409,517,518],{"class":436},",              ",[409,520,521],{"class":415},"\u002F\u002F size via CSS + viewBox instead of fixed width\u002Fheight\n",[409,523,525,527,530,533,536],{"class":411,"line":524},11,[409,526,467],{"class":436},[409,528,529],{"class":470},"'removeAttrs'",[409,531,532],{"class":436},", params: { attrs: [",[409,534,535],{"class":470},"'data-name'",[409,537,538],{"class":436},"] } },\n",[409,540,542,545],{"class":411,"line":541},12,[409,543,544],{"class":436},"  ]",[409,546,444],{"class":429},[409,548,550,553],{"class":411,"line":549},13,[409,551,552],{"class":429},"}",[409,554,555],{"class":436},";\n",[409,557,559],{"class":411,"line":558},14,[409,560,561],{"class":415},"\u002F\u002F trade-off: removeDimensions suits icons styled by CSS; for \u003Cimg> SVGs that\n",[409,563,565],{"class":411,"line":564},15,[409,566,567],{"class":415},"\u002F\u002F rely on intrinsic size, drop it and set width\u002Fheight on the img element.\n",[395,569,571],{"id":570},"_2-run-it-over-existing-assets","2. Run it over existing assets",[400,573,577],{"className":574,"code":575,"language":576,"meta":405,"style":405},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","npx svgo --config svgo.config.mjs -rf src\u002Fassets\u002Fsvg -o src\u002Fassets\u002Fsvg\n# trade-off: optimising in place is irreversible in the working tree; commit\n# first so you can diff and review visual changes.\n","bash",[173,578,579,605,610],{"__ignoreMap":405},[409,580,581,584,587,590,593,596,599,602],{"class":411,"line":412},[409,582,583],{"class":429},"npx",[409,585,586],{"class":470}," svgo",[409,588,589],{"class":440}," --config",[409,591,592],{"class":470}," svgo.config.mjs",[409,594,595],{"class":440}," -rf",[409,597,598],{"class":470}," src\u002Fassets\u002Fsvg",[409,600,601],{"class":440}," -o",[409,603,604],{"class":470}," src\u002Fassets\u002Fsvg\n",[409,606,607],{"class":411,"line":419},[409,608,609],{"class":415},"# trade-off: optimising in place is irreversible in the working tree; commit\n",[409,611,612],{"class":411,"line":433},[409,613,614],{"class":415},"# first so you can diff and review visual changes.\n",[15,616,617],{},"Expected outcome: smaller files with identical rendering for the vast majority of assets.",[395,619,621],{"id":620},"_3-integrate-into-the-build","3. Integrate into the build",[15,623,624,625,183,628,631,632,635,636,639,640,642],{},"Use your bundler's SVG plugin with the same config so imported SVGs and copied assets are always optimised — for example ",[173,626,627],{},"vite-plugin-svgr",[173,629,630],{},"unplugin-icons"," with SVGO options, or ",[173,633,634],{},"svgo-loader","\u002F",[173,637,638],{},"image-minimizer-webpack-plugin"," for webpack. For SVGs in ",[173,641,210],{}," (copied verbatim), run SVGO as a pre-build step.",[395,644,646],{"id":645},"_4-guard-against-regressions-in-ci","4. Guard against regressions in CI",[15,648,649],{},"Fail the build if an SVG asset is significantly larger than its optimised form, or simply run SVGO in check mode and compare sizes.",[15,651,652],{},[35,653,42,656,42,659,42,662,42,664,42,681,42,684,42,686,42,691,42,697,42,701,42,704,42,708,42,711,42,714,42,718,42,721,42,725,42,728,42,732,42,735,42,738,42,742,42,745,42,753,42,757,42,761,42],{"viewBox":654,"width":38,"role":39,"ariaLabel":655,"style":41},"0 0 760 149","Pipeline from a designer export through SVGO in the build and a CI size check to the shipped asset.",[44,657],{"className":658,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,660,661],{},"SVGO in the asset pipeline",[55,663,655],{},[665,666,667],"defs",{},[668,669,676],"marker",{"id":670,"viewBox":671,"refX":672,"refY":673,"markerWidth":674,"markerHeight":674,"orient":675},"faabd63e9d","0 0 10 10","9","5","7","auto-start-reverse",[677,678],"path",{"d":679,"fill":64,"style":680},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[44,682],{"x":59,"y":59,"width":60,"height":683,"rx":62,"fill":63,"stroke":64,"style":65},"147",[67,685,661],{"x":69,"y":70,"fill":64,"style":71},[44,687],{"x":69,"y":82,"width":688,"height":689,"rx":690,"fill":102,"stroke":102,"style":312},"108.8","71.0","6",[67,692,696],{"x":693,"y":694,"fill":64,"style":695,"textAnchor":287},"82.4","78.0","font-size:13px;font-weight:700","Export",[67,698,700],{"x":693,"y":699,"fill":64,"style":308,"textAnchor":287},"96.0","design tool",[44,702],{"x":703,"y":82,"width":688,"height":689,"rx":690,"fill":102,"stroke":102,"style":312},"176.8",[67,705,707],{"x":706,"y":694,"fill":64,"style":695,"textAnchor":287},"231.2","Commit",[67,709,710],{"x":706,"y":699,"fill":64,"style":308,"textAnchor":287},"raw SVG",[44,712],{"x":713,"y":82,"width":688,"height":689,"rx":690,"fill":86,"stroke":87,"style":369},"325.6",[67,715,717],{"x":716,"y":694,"fill":64,"style":695,"textAnchor":287},"380.0","Build",[67,719,720],{"x":716,"y":699,"fill":64,"style":308,"textAnchor":287},"SVGO shared",[67,722,724],{"x":716,"y":723,"fill":64,"style":308,"textAnchor":287},"112.0","config",[44,726],{"x":727,"y":82,"width":688,"height":689,"rx":690,"fill":102,"stroke":102,"style":312},"474.4",[67,729,731],{"x":730,"y":694,"fill":64,"style":695,"textAnchor":287},"528.8","CI check",[67,733,734],{"x":730,"y":699,"fill":64,"style":308,"textAnchor":287},"size + visual diff",[44,736],{"x":737,"y":82,"width":688,"height":689,"rx":690,"fill":102,"stroke":102,"style":312},"623.2",[67,739,741],{"x":740,"y":694,"fill":64,"style":695,"textAnchor":287},"677.6","Ship",[67,743,744],{"x":740,"y":699,"fill":64,"style":308,"textAnchor":287},"optimised asset",[411,746],{"x1":747,"y1":748,"x2":749,"y2":748,"stroke":64,"strokeWidth":750,"style":751,"markerEnd":752},"136.8","91.5","174.8","1.5","stroke-opacity:0.6","url(#faabd63e9d)",[411,754],{"x1":755,"y1":748,"x2":756,"y2":748,"stroke":64,"strokeWidth":750,"style":751,"markerEnd":752},"285.6","323.6",[411,758],{"x1":759,"y1":748,"x2":760,"y2":748,"stroke":64,"strokeWidth":750,"style":751,"markerEnd":752},"434.4","472.4",[411,762],{"x1":763,"y1":748,"x2":764,"y2":748,"stroke":64,"strokeWidth":750,"style":751,"markerEnd":752},"583.2","621.2",[157,766,768],{"id":767},"verification","Verification",[15,770,771],{},"Compare file sizes before and after, and visually diff a sample of icons and illustrations (render both versions to PNG with a headless browser and compare pixels). Check that CSS and JavaScript referencing SVG IDs or classes still work. For inline SVG, HTML size per page should fall accordingly.",[157,773,775],{"id":774},"worked-example-a-marketing-sites-illustrations","Worked Example: A Marketing Site's Illustrations",[15,777,778,779,782],{},"A marketing site used 34 decorative illustrations exported from a design tool, averaging 96KB each, several inlined in the homepage HTML. The homepage HTML was 410KB uncompressed. Running SVGO with ",[173,780,781],{},"multipass"," and two-decimal precision reduced illustrations to an average of 38KB; three that contained embedded PNG textures were re-exported as AVIF images instead. Homepage HTML fell to 190KB, and LCP on mobile improved by about 150ms because the HTML — which contained the LCP heading — arrived sooner.",[157,784,786],{"id":785},"choosing-precision","Choosing Precision",[15,788,789,792],{},[173,790,791],{},"floatPrecision"," is the setting with the biggest effect on size and the main source of visual changes. Icons drawn on a 24-unit grid need little precision: one or two decimals are invisible at icon sizes. Detailed illustrations scaled to full width may show tiny distortions at one decimal; two or three are safer. Test at the largest size each asset is displayed. A useful habit is to set precision per asset class in configuration (icons, logos, illustrations) rather than one global value.",[157,794,796],{"id":795},"common-mistakes","Common Mistakes",[162,798,799,805,811,817],{},[165,800,801,804],{},[168,802,803],{},"Removing the viewBox."," Breaks scaling when dimensions are removed or overridden.",[165,806,807,810],{},[168,808,809],{},"Minifying IDs used by CSS or scripts."," Animations and styles that target IDs stop working.",[165,812,813,816],{},[168,814,815],{},"Optimising only once."," Without build integration, new exports reintroduce bloat.",[165,818,819,822],{},[168,820,821],{},"Ignoring embedded rasters."," SVGO cannot shrink base64 PNGs inside SVG meaningfully; re-export as a raster image.",[157,824,826],{"id":825},"edge-cases","Edge Cases",[15,828,829,832,833,176,836,839,840,843],{},[168,830,831],{},"Accessibility attributes."," Keep ",[173,834,835],{},"\u003Ctitle>",[173,837,838],{},"role"," and ",[173,841,842],{},"aria-*"," attributes on meaningful SVGs; check that your preset does not strip them.",[15,845,846,849],{},[168,847,848],{},"Animated SVG."," SMIL animations and CSS animations referencing internal IDs or classes need those preserved.",[15,851,852,855],{},[168,853,854],{},"Sprites."," Optimise individual icons before building a sprite; some sprite tools run SVGO themselves.",[15,857,858,861],{},[168,859,860],{},"Third-party SVGs."," Logos and badges from partners are often unoptimised; optimise copies you host.",[157,863,865],{"id":864},"faq","FAQ",[867,868,871,875],"details",{"className":869},[870],"faq-item",[872,873,874],"summary",{},"Is SVGO safe to run on every SVG?",[15,876,877,878,880],{},"The default preset is safe for the overwhelming majority of files. The exceptions are files whose IDs or classes are referenced externally and files that rely on dimensions or ",[173,879,379],{}," behaviour — handled by the overrides above. Review diffs the first time you run it on an existing collection.",[867,882,884,887],{"className":883},[870],[872,885,886],{},"How much does SVGO save after gzip?",[15,888,889],{},"Less than the raw percentage suggests, because repetitive metadata compresses well — but still substantial, often 20–50% of compressed size, and the parse and DOM benefits apply to uncompressed size.",[867,891,893,896],{"className":892},[870],[872,894,895],{},"Should I use multipass?",[15,897,898],{},"Yes for build pipelines. It runs the plugins repeatedly until no further savings occur, which finds a few extra percent at the cost of slightly longer optimisation time.",[867,900,902,905],{"className":901},[870],[872,903,904],{},"Can SVGO convert shapes to paths?",[15,906,907,908,911],{},"Yes (",[173,909,910],{},"convertShapeToPath",", in the default preset), which often saves bytes. It can complicate later editing, which is why the source files should stay unoptimised in a design repository.",[867,913,915,918],{"className":914},[870],[872,916,917],{},"What about SVG in CSS data URIs?",[15,919,920],{},"Optimise them too, and URL-encode rather than base64-encode them for smaller output. For anything beyond tiny glyphs, prefer external files that cache separately from CSS.",[867,922,924,927],{"className":923},[870],[872,925,926],{},"Do image CDNs optimise SVG?",[15,928,929],{},"Some sanitize and minify SVGs; many pass them through unchanged. Do not rely on the CDN — optimise in the build where you control the configuration.",[867,931,933,936],{"className":932},[870],[872,934,935],{},"Should SVGO run on SVGs uploaded through a CMS?",[15,937,938],{},"Yes — user and editor uploads are often the least optimised assets on a site. Run SVGO (plus a sanitiser that removes scripts and event handlers, for security) on upload or in the image pipeline before files are published.",[867,940,942,945],{"className":941},[870],[872,943,944],{},"Does SVGO affect accessibility titles?",[15,946,947,948,950,951,954],{},"The default preset removes ",[173,949,835],{}," in some versions (",[173,952,953],{},"removeTitle","). Disable that plugin for meaningful graphics, or provide accessible names on the referencing element instead.",[867,956,958,961],{"className":957},[870],[872,959,960],{},"How long does SVGO take in a build?",[15,962,963],{},"Milliseconds per file for icons and well under a second for large illustrations, so even hundreds of files add little build time. Cache results by content hash in CI if you have thousands of assets.",[157,965,967],{"id":966},"related","Related",[162,969,970,977,984],{},[165,971,972,976],{},[19,973,975],{"href":974},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F","Inline SVG vs sprite vs img"," — what to do with optimised files.",[165,978,979,983],{},[19,980,982],{"href":981},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002F","Reducing SVG rendering cost"," — beyond bytes.",[165,985,986,990],{},[19,987,989],{"href":988},"\u002Fnetwork-protocol-optimization\u002Fcompression-brotli-and-zstandard\u002Fprecompressing-static-assets-at-build-time\u002F","Precompressing static assets at build time"," — compressing SVG for delivery.",[992,993,995],"script",{"type":994},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Optimize SVG Files with SVGO\",\n  \"description\": \"Configure SVGO to remove export bloat from SVG files safely, and wire it into the build so unoptimised graphics never ship.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Create a shared, safe configuration\",\n      \"text\": \"Create a shared, safe configuration\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Run it over existing assets\",\n      \"text\": \"Expected outcome: smaller files with identical rendering for the vast majority of assets.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Integrate into the build\",\n      \"text\": \"Use your bundler's SVG plugin with the same config so imported SVGs and copied assets are always optimised — for example vite-plugin-svgr or unplugin-icons with SVGO options, or svgo-loader\u002Fimage-minimizer-webpack-plugin for webpack.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Guard against regressions in CI\",\n      \"text\": \"Fail the build if an SVG asset is significantly larger than its optimised form, or simply run SVGO in check mode and compare sizes.\"\n    }\n  ]\n}\n",[992,997,998],{"type":994},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Optimize SVG Files with SVGO\",\n  \"description\": \"Configure SVGO to remove export bloat from SVG files safely, and wire it into the build so unoptimised graphics never ship.\",\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\u002Foptimizing-svg-files-with-svgo\u002F\"\n  }\n}\n",[992,1000,1001],{"type":994},"\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\": \"Optimizing SVG Files with SVGO\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002F\"\n    }\n  ]\n}\n",[1003,1004,1005],"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 .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}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);}",{"title":405,"searchDepth":419,"depth":419,"links":1007},[1008,1009,1010,1016,1017,1018,1019,1020,1021,1022],{"id":159,"depth":419,"text":160},{"id":223,"depth":419,"text":224},{"id":392,"depth":419,"text":393,"children":1011},[1012,1013,1014,1015],{"id":397,"depth":433,"text":398},{"id":570,"depth":433,"text":571},{"id":620,"depth":433,"text":621},{"id":645,"depth":433,"text":646},{"id":767,"depth":419,"text":768},{"id":774,"depth":419,"text":775},{"id":785,"depth":419,"text":786},{"id":795,"depth":419,"text":796},{"id":825,"depth":419,"text":826},{"id":864,"depth":419,"text":865},{"id":966,"depth":419,"text":967},"Configure SVGO to remove export bloat from SVG files safely, and wire it into the build so unoptimised graphics never ship.","md",{"slug":1026,"type":1027,"breadcrumb":1028,"datePublished":1035,"dateModified":1035},"optimizing-svg-files-with-svgo","article",[1029,1031,1032,1033],{"name":1030,"url":635},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":1034},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo",{"title":1039,"description":1040},"Optimizing SVG Files with SVGO in Your Build","Shrink exported SVGs by 30-80% with SVGO: safe presets, precision tuning, keeping viewBox and IDs where needed, and automating it in Vite, webpack and CI.","image-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002Findex","Anh6pRI2FZcPWGzpf3chkJxR5MvGwHYU3FsWmoS4ES0",[1044,1048],{"title":1045,"path":1046,"stem":1047},"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",{"title":1049,"path":1050,"stem":1051},"Reducing SVG Rendering Cost","\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost","image-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002Findex",1791308079845]