SVG Optimization
Compress SVG files by removing unused data, simplifying paths, and stripping metadata.
Metrics
This technique can move up to 67% of LCP's share of the Lighthouse score.
This technique can move up to 33% of TBT's share of the Lighthouse score.
This technique does not move CLS.
This technique can move up to 33% of FCP's share of the Lighthouse score.
This technique can move up to 33% of SI's share of the Lighthouse score.
This technique does not move TTFB.
Overview
SVG files exported from design tools like Figma, Illustrator, or Sketch contain significant amounts of editor-specific metadata, empty groups, hidden layers, redundant path commands, and comments that are invisible to the end user but inflate the file size. SVGO (SVG Optimizer) is the standard tool for removing this waste. A typical logo SVG from Figma exports at 40–200 KB; after SVGO optimization it commonly drops to 4–20 KB — a 10× reduction with no visible change.
Impact grade, A+ to D: how much of the Lighthouse score this technique can move. Unaffected: CLS, TTFB.
The Problem
SVGs are used throughout WordPress sites as logos, icons, hero illustrations, and background decorations. Unlike raster images, SVG files are parsed and rendered by the browser’s XML/DOM engine, which means a large SVG with thousands of path nodes contributes to both network payload and main thread parse time. An unoptimized SVG illustration used as a hero graphic can easily be 500 KB with 10,000+ path nodes — more than enough to delay LCP and inflate TBT.
Performance Impact
LCP
20–80%
if the SVG is the LCP element, smaller file size directly accelerates its load time
TBT
Indirect
complex inline SVGs add DOM nodes and parse overhead that contributes to long tasks
FCP
Indirect
reduced total page weight and faster SVG parse time benefits initial rendering
SI
Moderate
optimized SVGs render faster, contributing to a more complete visible area sooner
Risk: Low
some SVGO plugins can alter visual output — review results before deploying; test animated SVGs carefully
How it works
01
Run SVGO to remove editor metadata
SVGO removes empty groups, comments, hidden elements, editor namespaces (
xmlns:sketch,xmlns:figma),<title>and<desc>elements, and redundant whitespace. Most of this data is purely for the authoring tool and has no effect on rendering.02
Simplify paths and merge shapes
SVGO’s
mergePaths,convertPathData, andremoveRedundantAttributesplugins reduce path command verbosity, merge adjacent paths with identical styles, and remove attributes already set to their default values — shrinking the coordinate data that makes up the bulk of complex illustrations.03
Serve SVGs as external files rather than inline
Inline SVG adds DOM nodes for every path element. A complex illustration with 5,000 paths adds 5,000 DOM nodes to the document — directly inflating DOM size (which harms TBT) and disabling browser caching. Serving the SVG as an
<img src="logo.svg">or via CSSbackground-imageallows the browser to cache it separately and keeps the DOM lean.04
Apply gzip/Brotli compression at the server level
SVGs are XML — they compress extremely well. A 20 KB SVGO-optimized file may compress to 4–6 KB over the wire with Brotli. Ensure your server serves SVG files with the correct MIME type (
image/svg+xml) and with compression enabled.
Code Example
<!-- Logo from Figma export: 62 KB, includes editor metadata and empty groups -->
<img src="/wp-content/themes/my-theme/images/logo.svg" alt="Logo" width="200" height="60"><!-- After SVGO: 4.2 KB, 93% smaller, visually identical -->
<img src="/wp-content/themes/my-theme/images/logo-optimized.svg" alt="Logo" width="200" height="60">Add SVG optimization to your build pipeline (Webpack, Vite, Gulp) so every SVG committed to the repository is automatically optimized. Avoid re-optimizing already-optimized files.
Limitations
- Some SVGO plugins — particularly
cleanupIdsandcollapseGroups— can break SVG animations or JavaScript-driven SVGs that reference element IDs. Test animated SVGs with a conservative plugin configuration. - SVGO does not support SVG fonts embedded in the file. Embedded font data must be extracted and handled separately.
- SVG optimization is a build-time step — unlike raster image compression, there is no WordPress plugin that optimizes SVGs on upload due to the security concerns around parsing SVG files server-side.
Common Mistakes
Inlining large complex SVG illustrations into the HTML
Inline SVG is appropriate for small icons (under 1 KB) where you need CSS hover effects on individual paths. For complex illustrations, serve as an external <img> to keep the DOM size small and enable browser caching.
Exporting SVGs from design tools and using them as-is
Design tool exports are optimized for editability, not delivery. Always run SVGO before committing an SVG to the project. Integrate SVGO into your build tool so optimization happens automatically.