[{"data":1,"prerenderedAt":900},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost":3,"surroundings:\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost":891},{"id":4,"title":5,"body":6,"description":871,"extension":872,"meta":873,"navigation":884,"path":885,"seo":886,"stem":889,"__hash__":890},"content\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002Findex.md","Reducing SVG Rendering Cost",{"type":7,"value":8,"toc":854},"minimark",[9,14,29,32,149,154,201,205,211,217,223,229,377,381,386,393,449,453,456,460,467,548,552,567,651,655,658,662,668,672,675,679,709,713,722,728,738,747,751,763,772,785,794,803,812,816,839,844,847,850],[10,11,13],"h1",{"id":12},"how-to-reduce-svg-rendering-cost","How to Reduce SVG Rendering Cost",[15,16,17,18,23,24,28],"p",{},"This guide covers the runtime side of ",[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",". File size is only part of an SVG's cost. Every time an SVG is painted — on first render, on scroll if it is repainted, on every frame if it is animated — the browser must rasterise its geometry: tessellate paths, apply fills and strokes, and run filters such as blurs and drop shadows. Simple icons rasterise in microseconds. Detailed illustrations with thousands of paths, Gaussian blur filters, masks and clip paths can take tens of milliseconds per paint on mid-tier phones.",[15,30,31],{},"That cost lands in the rendering phase: it delays first paint of the illustration (sometimes the LCP element), adds presentation delay to interactions that cause repaints nearby, and makes animated SVG janky. Inline SVG with thousands of elements also inflates the DOM, increasing style and layout work for every interaction.",[15,33,34],{},[35,36,42,43,42,50,42,54,42,57,42,66,42,72,42,83,42,90,42,99,42,104,42,108,42,112,42,116,42,120,42,126,42,130,42,134,42,138,42,142,42],"svg",{"viewBox":37,"width":38,"role":39,"ariaLabel":40,"style":41},"0 0 760 216","100%","img","Bar chart of paint time for four SVG illustrations of increasing complexity, with a 16 millisecond frame budget marked.","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",{},"Paint time per frame by SVG complexity (mid-tier phone)",[55,56,40],"desc",{},[44,58],{"x":59,"y":59,"width":60,"height":61,"rx":62,"fill":63,"stroke":64,"style":65},"1","758","214","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",[73,74],"line",{"x1":75,"y1":76,"x2":75,"y2":77,"stroke":78,"strokeWidth":79,"strokeDashArray":80,"style":82},"367.4","72.0","194.0","#b8860b","1.5",[81,81],"4","stroke-opacity:0.9",[67,84,89],{"x":85,"y":86,"fill":64,"style":87,"textAnchor":88},"163.0","92.0","font-size:13px","end","Icon (12 paths)",[44,91],{"x":92,"y":93,"width":94,"height":95,"rx":96,"fill":97,"stroke":97,"style":98},"175.0","78.0","2.4","19","3","#0466c8","fill-opacity:0.55;stroke-opacity:0.9",[67,100,103],{"x":101,"y":86,"fill":64,"style":102},"183.4","font-size:12px;font-weight:600","0.2ms",[67,105,107],{"x":85,"y":106,"fill":64,"style":87,"textAnchor":88},"123.0","Illustration (400 paths)",[44,109],{"x":92,"y":110,"width":111,"height":95,"rx":96,"fill":97,"stroke":97,"style":98},"109.0","37.3",[67,113,115],{"x":114,"y":106,"fill":64,"style":102},"218.3","3.1ms",[67,117,119],{"x":85,"y":118,"fill":64,"style":87,"textAnchor":88},"154.0","Illustration + blur filters",[44,121],{"x":92,"y":122,"width":123,"height":95,"rx":96,"fill":124,"stroke":78,"style":125},"140.0","264.5","#ffc300","fill-opacity:0.7;stroke-opacity:0.9",[67,127,129],{"x":128,"y":118,"fill":64,"style":102},"445.6","22ms",[67,131,133],{"x":85,"y":132,"fill":64,"style":87,"textAnchor":88},"185.0","Map (9,000 paths)",[44,135],{"x":92,"y":136,"width":137,"height":95,"rx":96,"fill":124,"stroke":78,"style":125},"171.0","493.0",[67,139,141],{"x":140,"y":132,"fill":64,"style":102},"674.0","41ms",[67,143,148],{"x":75,"y":144,"fill":145,"style":146,"textAnchor":147},"68.0","#8a6608","font-size:12px;font-weight:700","middle","16ms frame budget",[150,151,153],"h2",{"id":152},"rapid-diagnosis","Rapid Diagnosis",[155,156,157,165,171,181],"ul",{},[158,159,160,164],"li",{},[161,162,163],"strong",{},"Turn on Paint flashing"," (Rendering drawer) and scroll or interact near the SVG; repeated full repaints are a red flag.",[158,166,167,170],{},[161,168,169],{},"Record a Performance trace"," and look for long Paint and Rasterize events when the SVG is visible.",[158,172,173,42,176,180],{},[161,174,175],{},"Count elements.",[177,178,179],"code",{},"document.querySelectorAll('svg *').length"," for inline SVGs; thousands indicates DOM and paint cost.",[158,182,183,42,186,189,190,189,193,196,197,200],{},[161,184,185],{},"Search for filters.",[177,187,188],{},"feGaussianBlur",", ",[177,191,192],{},"feDropShadow",[177,194,195],{},"feTurbulence",", masks and large ",[177,198,199],{},"clipPath","s are the usual expensive features.",[150,202,204],{"id":203},"root-cause-analysis","Root Cause Analysis",[15,206,207,210],{},[161,208,209],{},"1. Path complexity."," Exported illustrations, maps and charts can contain thousands of paths and points far more detailed than the display needs.",[15,212,213,216],{},[161,214,215],{},"2. Filters."," Blur and shadow filters are computed per pixel over the filter region, often much larger than the shape itself.",[15,218,219,222],{},[161,220,221],{},"3. Repaints."," Animations, hover effects or nearby DOM changes that invalidate the SVG's region force repeated rasterisation.",[15,224,225,228],{},[161,226,227],{},"4. Large inline DOM."," Inline SVGs with thousands of elements add style and layout cost to interactions anywhere above them in the tree.",[15,230,231],{},[35,232,42,235,42,238,42,241,42,243,42,260,42,263,42,265,42,272,42,277,42,281,42,286,42,293,42,299,42,303,42,309,42,313,42,317,42,319,42,323,42,327,42,330,42,333,42,337,42,340,42,343,42,347,42,349,42,352,42,355,42,358,42,362,42,365,42,369,42,373,42],{"viewBox":233,"width":38,"role":39,"ariaLabel":234,"style":41},"0 0 760 356","Decision sequence for reducing the rendering cost of an expensive SVG.",[44,236],{"className":237,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,239,240],{},"Choosing a fix for an expensive SVG",[55,242,234],{},[244,245,246],"defs",{},[247,248,255],"marker",{"id":249,"viewBox":250,"refX":251,"refY":252,"markerWidth":253,"markerHeight":253,"orient":254},"fa5b35cc2e","0 0 10 10","9","5","7","auto-start-reverse",[256,257],"path",{"d":258,"fill":64,"style":259},"M0 0 L10 5 L0 10 z","fill-opacity:0.7",[44,261],{"x":59,"y":59,"width":60,"height":262,"rx":62,"fill":63,"stroke":64,"style":65},"354",[67,264,240],{"x":69,"y":70,"fill":64,"style":71},[44,266],{"x":69,"y":267,"width":268,"height":269,"rx":270,"fill":64,"stroke":64,"style":271},"56.0","320.0","35.0","6","fill-opacity:0.06;stroke-opacity:0.4",[67,273,276],{"x":274,"y":93,"fill":64,"style":275,"textAnchor":147},"188.0","font-size:13px;font-weight:700","Decorative and static?",[44,278],{"x":279,"y":267,"width":268,"height":269,"rx":270,"fill":97,"stroke":97,"style":280},"412.0","fill-opacity:0.14;stroke-opacity:0.9",[67,282,285],{"x":283,"y":93,"fill":64,"style":284,"textAnchor":147},"572.0","font-size:12.5px","Rasterise to AVIF\u002FWebP and use img",[73,287],{"x1":288,"y1":289,"x2":290,"y2":289,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"348.0","73.5","410.0","stroke-opacity:0.6","url(#fa5b35cc2e)",[67,294,298],{"x":295,"y":296,"fill":97,"style":297,"textAnchor":147},"380.0","66.5","font-size:11.5px;font-weight:700","yes",[73,300],{"x1":274,"y1":301,"x2":274,"y2":302,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"91.0","125.0",[67,304,308],{"x":305,"y":306,"fill":307,"style":297},"196.0","113.0","#51617a","no",[44,310],{"x":69,"y":311,"width":268,"height":312,"rx":270,"fill":64,"stroke":64,"style":271},"127.0","50.0",[67,314,316],{"x":274,"y":315,"fill":64,"style":275,"textAnchor":147},"156.5","Uses blur or shadow filters?",[44,318],{"x":279,"y":311,"width":268,"height":312,"rx":270,"fill":97,"stroke":97,"style":280},[67,320,322],{"x":283,"y":321,"fill":64,"style":284,"textAnchor":147},"148.5","Replace filters with pre-rendered images or CSS on",[67,324,326],{"x":283,"y":325,"fill":64,"style":284,"textAnchor":147},"164.5","simpler shapes",[73,328],{"x1":288,"y1":329,"x2":290,"y2":329,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"152.0",[67,331,298],{"x":295,"y":332,"fill":97,"style":297,"textAnchor":147},"145.0",[73,334],{"x1":274,"y1":335,"x2":274,"y2":336,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"177.0","211.0",[67,338,308],{"x":305,"y":339,"fill":307,"style":297},"199.0",[44,341],{"x":69,"y":342,"width":268,"height":269,"rx":270,"fill":64,"stroke":64,"style":271},"213.0",[67,344,346],{"x":274,"y":345,"fill":64,"style":275,"textAnchor":147},"235.0","Thousands of paths (maps, charts)?",[44,348],{"x":279,"y":342,"width":268,"height":269,"rx":270,"fill":97,"stroke":97,"style":280},[67,350,351],{"x":283,"y":345,"fill":64,"style":284,"textAnchor":147},"Simplify geometry, or render to canvas",[73,353],{"x1":288,"y1":354,"x2":290,"y2":354,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"230.5",[67,356,298],{"x":295,"y":357,"fill":97,"style":297,"textAnchor":147},"223.5",[73,359],{"x1":274,"y1":360,"x2":274,"y2":361,"stroke":64,"strokeWidth":79,"style":291,"markerEnd":292},"248.0","282.0",[67,363,308],{"x":305,"y":364,"fill":307,"style":297},"270.0",[44,366],{"x":69,"y":367,"width":268,"height":312,"rx":270,"fill":124,"stroke":78,"style":368},"284.0","fill-opacity:0.24;stroke-opacity:0.9",[67,370,372],{"x":274,"y":371,"fill":64,"style":284,"textAnchor":147},"305.5","Isolate repaints — img or contain:paint, animate",[67,374,376],{"x":274,"y":375,"fill":64,"style":284,"textAnchor":147},"321.5","transforms only",[150,378,380],{"id":379},"step-by-step-resolution","Step-by-Step Resolution",[382,383,385],"h3",{"id":384},"_1-simplify-geometry","1. Simplify geometry",[15,387,388,389,392],{},"Reduce path points with SVGO's ",[177,390,391],{},"convertPathData"," precision settings or a simplification tool (for maps, topology-preserving simplification such as mapshaper). Detail beyond what the display can show only costs time.",[394,395,400],"pre",{"className":396,"code":397,"language":398,"meta":399,"style":399},"language-bash shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","npx mapshaper input.geojson -simplify 8% keep-shapes -o format=svg output.svg\n# trade-off: aggressive simplification can visibly distort small features;\n# check the result at the largest display size and zoom levels you support.\n","bash","",[177,401,402,436,443],{"__ignoreMap":399},[403,404,406,410,414,417,421,424,427,430,433],"span",{"class":73,"line":405},1,[403,407,409],{"class":408},"sQw3B","npx",[403,411,413],{"class":412},"sZ8jY"," mapshaper",[403,415,416],{"class":412}," input.geojson",[403,418,420],{"class":419},"sPXB4"," -simplify",[403,422,423],{"class":412}," 8%",[403,425,426],{"class":412}," keep-shapes",[403,428,429],{"class":419}," -o",[403,431,432],{"class":412}," format=svg",[403,434,435],{"class":412}," output.svg\n",[403,437,439],{"class":73,"line":438},2,[403,440,442],{"class":441},"sjfSM","# trade-off: aggressive simplification can visibly distort small features;\n",[403,444,446],{"class":73,"line":445},3,[403,447,448],{"class":441},"# check the result at the largest display size and zoom levels you support.\n",[382,450,452],{"id":451},"_2-remove-or-bake-filters","2. Remove or bake filters",[15,454,455],{},"Replace runtime blurs and shadows with pre-rendered raster elements, or with CSS effects applied to simple shapes. For decorative glows, an AVIF image of the effect is usually far cheaper.",[382,457,459],{"id":458},"_3-serve-static-decorative-art-as-raster-or-img","3. Serve static decorative art as raster or img",[15,461,462,463,466],{},"Rasterising a complex, static illustration to AVIF at display sizes often produces a smaller file and near-zero paint cost. Even keeping it as SVG but loading it via ",[177,464,465],{},"\u003Cimg>"," isolates it from page CSS and allows the browser to cache the decoded raster.",[394,468,472],{"className":469,"code":470,"language":471,"meta":399,"style":399},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Cimg src=\"\u002Fart\u002Fhero-illustration-1200.avif\" width=\"1200\" height=\"800\" alt=\"\"\n     srcset=\"\u002Fart\u002Fhero-illustration-600.avif 600w, \u002Fart\u002Fhero-illustration-1200.avif 1200w\" sizes=\"100vw\">\n\u003C!-- trade-off: raster art loses infinite scalability and CSS theming; keep\n     vector for art that must recolour with themes or scale to very large sizes. -->\n","html",[177,473,474,516,537,542],{"__ignoreMap":399},[403,475,476,480,483,486,489,492,495,497,500,503,505,508,511,513],{"class":73,"line":405},[403,477,479],{"class":478},"saISM","\u003C",[403,481,39],{"class":482},"sZBmE",[403,484,485],{"class":419}," src",[403,487,488],{"class":478},"=",[403,490,491],{"class":412},"\"\u002Fart\u002Fhero-illustration-1200.avif\"",[403,493,494],{"class":419}," width",[403,496,488],{"class":478},[403,498,499],{"class":412},"\"1200\"",[403,501,502],{"class":419}," height",[403,504,488],{"class":478},[403,506,507],{"class":412},"\"800\"",[403,509,510],{"class":419}," alt",[403,512,488],{"class":478},[403,514,515],{"class":412},"\"\"\n",[403,517,518,521,523,526,529,531,534],{"class":73,"line":438},[403,519,520],{"class":419},"     srcset",[403,522,488],{"class":478},[403,524,525],{"class":412},"\"\u002Fart\u002Fhero-illustration-600.avif 600w, \u002Fart\u002Fhero-illustration-1200.avif 1200w\"",[403,527,528],{"class":419}," sizes",[403,530,488],{"class":478},[403,532,533],{"class":412},"\"100vw\"",[403,535,536],{"class":478},">\n",[403,538,539],{"class":73,"line":445},[403,540,541],{"class":441},"\u003C!-- trade-off: raster art loses infinite scalability and CSS theming; keep\n",[403,543,545],{"class":73,"line":544},4,[403,546,547],{"class":441},"     vector for art that must recolour with themes or scale to very large sizes. -->\n",[382,549,551],{"id":550},"_4-contain-repaints-and-animate-cheaply","4. Contain repaints and animate cheaply",[15,553,554,555,558,559,562,563,566],{},"Wrap interactive or animated SVGs in an element with ",[177,556,557],{},"contain: paint"," so their repaints do not spread, animate ",[177,560,561],{},"transform","\u002F",[177,564,565],{},"opacity"," on groups rather than geometry attributes, and avoid animating filters.",[15,568,569],{},[35,570,42,573,42,576,42,579,42,581,42,584,42,586,42,590,42,596,42,601,42,605,42,608,42,611,42,614,42,617,42,620,42,623,42,626,42,630,42,632,42,636,42,638,42,641,42,643,42,646,42,648,42],{"viewBox":571,"width":38,"role":39,"ariaLabel":572,"style":41},"0 0 760 228","Comparison of animating SVG geometry and filters with animating transforms and opacity of groups.",[44,574],{"className":575,"x":48,"y":48,"width":38,"height":38,"fill":49},[47],[51,577,578],{},"Animating an SVG illustration",[55,580,572],{},[44,582],{"x":59,"y":59,"width":60,"height":583,"rx":62,"fill":63,"stroke":64,"style":65},"226",[67,585,578],{"x":69,"y":70,"fill":64,"style":71},[44,587],{"x":69,"y":267,"width":588,"height":589,"rx":270,"fill":124,"stroke":78,"style":368},"340.0","150.0",[67,591,595],{"x":592,"y":593,"fill":64,"style":594},"42.0","82.0","font-size:14px;font-weight:700","Animate geometry \u002F filters",[67,597,600],{"x":592,"y":598,"fill":64,"style":599},"108.0","font-size:12.5px;font-weight:700","•",[67,602,604],{"x":267,"y":598,"fill":64,"style":284,"textAnchor":603},"start","Path d or filter stdDeviation animated",[67,606,600],{"x":592,"y":607,"fill":64,"style":599},"132.0",[67,609,610],{"x":267,"y":607,"fill":64,"style":284,"textAnchor":603},"Full re-rasterisation every frame",[67,612,600],{"x":592,"y":613,"fill":64,"style":599},"156.0",[67,615,616],{"x":267,"y":613,"fill":64,"style":284,"textAnchor":603},"20-40ms per frame on mid-tier phones",[67,618,600],{"x":592,"y":619,"fill":64,"style":599},"180.0",[67,621,622],{"x":267,"y":619,"fill":64,"style":284,"textAnchor":603},"Jank and battery drain",[44,624],{"x":625,"y":267,"width":588,"height":589,"rx":270,"fill":97,"stroke":97,"style":280},"392.0",[67,627,629],{"x":628,"y":593,"fill":64,"style":594},"406.0","Animate transform \u002F opacity",[67,631,600],{"x":628,"y":598,"fill":64,"style":599},[67,633,635],{"x":634,"y":598,"fill":64,"style":284,"textAnchor":603},"420.0","Groups moved, faded, scaled",[67,637,600],{"x":628,"y":607,"fill":64,"style":599},[67,639,640],{"x":634,"y":607,"fill":64,"style":284,"textAnchor":603},"Compositor can reuse rasters",[67,642,600],{"x":628,"y":613,"fill":64,"style":599},[67,644,645],{"x":634,"y":613,"fill":64,"style":284,"textAnchor":603},"Under 2ms per frame",[67,647,600],{"x":628,"y":619,"fill":64,"style":599},[67,649,650],{"x":634,"y":619,"fill":64,"style":284,"textAnchor":603},"Smooth at 60fps",[150,652,654],{"id":653},"verification","Verification",[15,656,657],{},"Record traces before and after: paint and raster time for the SVG's region should fall below a few milliseconds, and animations should hold steady frame rates with paint flashing quiet. For inline SVGs, DOM node counts should drop. If the SVG was the LCP element, LCP render delay should improve.",[150,659,661],{"id":660},"worked-example-a-store-locator-map","Worked Example: A Store Locator Map",[15,663,664,665,667],{},"A retailer's store locator rendered a country map as inline SVG with 11,000 paths and a drop-shadow filter; hovering regions changed fills. Each hover repainted the whole map: 45ms per paint on mid-tier Android, and INP for map interactions exceeded 300ms. Simplifying the geometry to 1,800 paths, removing the filter (replaced by a static shadow image behind the map), and wrapping the map in ",[177,666,557],{}," cut paint time to 6ms and brought INP under 150ms. The file shrank from 1.2MB to 140KB as a bonus.",[150,669,671],{"id":670},"charts-svg-or-canvas","Charts: SVG or Canvas?",[15,673,674],{},"Charting libraries often default to SVG. For charts with a few hundred elements, that is fine and keeps accessibility simple. For dense scatter plots, large time series or real-time updates, canvas rendering avoids per-element DOM and paint overhead entirely, at the cost of building accessibility separately (a data table, ARIA labels, keyboard navigation). Many libraries support both renderers; switch to canvas for charts above a few thousand marks and measure interaction latency on hover tooltips, which are the most frequent interactions on chart-heavy pages.",[150,676,678],{"id":677},"common-mistakes","Common Mistakes",[155,680,681,687,697,703],{},[158,682,683,686],{},[161,684,685],{},"Treating file size as the only cost."," A small file with heavy filters can be expensive to paint.",[158,688,689,696],{},[161,690,691,692,695],{},"Animating ",[177,693,694],{},"d"," or filter parameters."," Forces full repaints each frame.",[158,698,699,702],{},[161,700,701],{},"Inline SVG for large decorative art."," Adds DOM and repaint cost for no styling benefit.",[158,704,705,708],{},[161,706,707],{},"Ignoring hover repaints."," Hover effects on large SVGs can dominate interaction latency.",[150,710,712],{"id":711},"edge-cases","Edge Cases",[15,714,715,721],{},[161,716,717,720],{},[177,718,719],{},"will-change"," on SVG."," Promoting an SVG to its own layer can help animations but costs memory; use sparingly.",[15,723,724,727],{},[161,725,726],{},"Device pixel ratio."," Paint cost scales with pixels; high-DPR phones rasterise four times the pixels of a DPR 1 display.",[15,729,730,733,734,737],{},[161,731,732],{},"Text in SVG."," Many ",[177,735,736],{},"\u003Ctext>"," elements with web fonts add font loading and layout cost; convert static text to paths for decorative art (keeping accessible text elsewhere).",[15,739,740,42,743,746],{},[161,741,742],{},"Off-screen SVG.",[177,744,745],{},"content-visibility: auto"," on containers skips rendering off-screen SVG entirely until needed.",[150,748,750],{"id":749},"faq","FAQ",[752,753,756,760],"details",{"className":754},[755],"faq-item",[757,758,759],"summary",{},"How do I know whether an SVG is expensive to render?",[15,761,762],{},"Look at Paint and Rasterize durations in a throttled Performance trace while the SVG is visible, and use paint flashing to see how often it repaints. Anything taking more than a few milliseconds per paint deserves attention.",[752,764,766,769],{"className":765},[755],[757,767,768],{},"Is an SVG in img cheaper to render than inline?",[15,770,771],{},"Often, yes: the browser can treat it as an image, cache the rasterised result and avoid recalculating styles for its internal elements as part of the page. Inline SVG participates fully in the page's style and layout.",[752,773,775,778],{"className":774},[755],[757,776,777],{},"Do CSS filters on SVG cost the same as SVG filters?",[15,779,780,781,784],{},"Both are per-pixel operations. CSS ",[177,782,783],{},"filter: drop-shadow()"," on a whole SVG may be cheaper than many SVG filter primitives, but neither is free; prefer baked effects for static art.",[752,786,788,791],{"className":787},[755],[757,789,790],{},"Can GPU acceleration fix SVG rendering?",[15,792,793],{},"Browsers accelerate rasterisation on many devices, but complex paths and filters remain costly, and low-end GPUs are slow. Simplifying the work is more reliable than hoping for acceleration.",[752,795,797,800],{"className":796},[755],[757,798,799],{},"Does rasterising hurt accessibility?",[15,801,802],{},"Not if the image has appropriate alternative text and any meaningful content is available as text elsewhere. Decorative art should have empty alt text either way.",[752,804,806,809],{"className":805},[755],[757,807,808],{},"What about Lottie animations?",[15,810,811],{},"Lottie's SVG renderer can be expensive for complex animations; its canvas renderer is often cheaper. Simplify the animation in the design tool and test both renderers on target devices.",[150,813,815],{"id":814},"related","Related",[155,817,818,825,832],{},[158,819,820,824],{},[19,821,823],{"href":822},"\u002Frendering-css-performance\u002Fanimation-and-compositing-performance\u002Fanimating-only-transform-and-opacity\u002F","Animating only transform and opacity"," — the general rule for cheap animation.",[158,826,827,831],{},[19,828,830],{"href":829},"\u002Frendering-css-performance\u002Fcss-containment-and-content-visibility\u002Fisolating-widgets-with-css-contain\u002F","Isolating widgets with CSS contain"," — containing repaints.",[158,833,834,838],{},[19,835,837],{"href":836},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Finline-svg-vs-sprite-vs-img\u002F","Inline SVG vs sprite vs img"," — choosing a delivery method that limits DOM cost.",[840,841,843],"script",{"type":842},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Reduce SVG Rendering Cost\",\n  \"description\": \"How SVG rendering cost arises from path complexity, filters and DOM size, and how to diagnose and reduce it for illustrations, charts and animations.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Simplify geometry\",\n      \"text\": \"Reduce path points with SVGO's convertPathData precision settings or a simplification tool (for maps, topology-preserving simplification such as mapshaper).\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"Remove or bake filters\",\n      \"text\": \"Replace runtime blurs and shadows with pre-rendered raster elements, or with CSS effects applied to simple shapes.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Serve static decorative art as raster or img\",\n      \"text\": \"Rasterising a complex, static illustration to AVIF at display sizes often produces a smaller file and near-zero paint cost.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Contain repaints and animate cheaply\",\n      \"text\": \"Wrap interactive or animated SVGs in an element with contain: paint so their repaints do not spread, animate transform\u002Fopacity on groups rather than geometry attributes, and avoid animating filters.\"\n    }\n  ]\n}\n",[840,845,846],{"type":842},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Reduce SVG Rendering Cost\",\n  \"description\": \"How SVG rendering cost arises from path complexity, filters and DOM size, and how to diagnose and reduce it for illustrations, charts and animations.\",\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\u002Freducing-svg-rendering-cost\u002F\"\n  }\n}\n",[840,848,849],{"type":842},"\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\": \"Reducing SVG Rendering Cost\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002F\"\n    }\n  ]\n}\n",[851,852,853],"style",{},"html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}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 .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}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 .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}",{"title":399,"searchDepth":438,"depth":438,"links":855},[856,857,858,864,865,866,867,868,869,870],{"id":152,"depth":438,"text":153},{"id":203,"depth":438,"text":204},{"id":379,"depth":438,"text":380,"children":859},[860,861,862,863],{"id":384,"depth":445,"text":385},{"id":451,"depth":445,"text":452},{"id":458,"depth":445,"text":459},{"id":550,"depth":445,"text":551},{"id":653,"depth":438,"text":654},{"id":660,"depth":438,"text":661},{"id":670,"depth":438,"text":671},{"id":677,"depth":438,"text":678},{"id":711,"depth":438,"text":712},{"id":749,"depth":438,"text":750},{"id":814,"depth":438,"text":815},"How SVG rendering cost arises from path complexity, filters and DOM size, and how to diagnose and reduce it for illustrations, charts and animations.","md",{"slug":874,"type":875,"breadcrumb":876,"datePublished":883,"dateModified":883},"reducing-svg-rendering-cost","article",[877,879,880,881],{"name":878,"url":562},"Home",{"name":27,"url":26},{"name":22,"url":21},{"name":5,"url":882},"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost",{"title":887,"description":888},"Reducing SVG Rendering and Paint Cost","Complex SVGs with filters, masks and thousands of paths can cost tens of milliseconds to paint. Find expensive vectors and simplify, rasterise or contain them.","image-media-optimization\u002Fsvg-and-icon-optimization\u002Freducing-svg-rendering-cost\u002Findex","qu5Sm_KqMadP5cpXKXUal3Rba3mslsYiqEm9moCdsbo",[892,896],{"title":893,"path":894,"stem":895,"children":-1},"Optimizing SVG Files with SVGO","\u002Fimage-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo","image-media-optimization\u002Fsvg-and-icon-optimization\u002Foptimizing-svg-files-with-svgo\u002Findex",{"title":897,"path":898,"stem":899,"children":-1},"Video Performance Optimization","\u002Fimage-media-optimization\u002Fvideo-performance-optimization","image-media-optimization\u002Fvideo-performance-optimization\u002Findex",1791308077291]