# SVG Optimization for Page Speed: A Practical Guide
> A detailed case study showing how SVG optimization reduced page weight by 70% and improved LCP by 1.2 seconds. Includes before/after benchmarks and the exact techniques used.
**Source:** https://vectosolve.com/blog/website-svg-optimization-speed
**Author:** Robin Monteiro (Founder of VectoSolve)
**Published:** 2026-02-05
**Last updated:** 2026-10-10
**Category:** Technical
**Reading time:** 11 min
**Tags:** SVG optimization, web performance, Core Web Vitals, page speed, technical SEO
---
:::takeaways
- Optimized SVGs are usually far lighter than PNG/WebP for icons, logos and simple illustrations
- Core Web Vitals: optimized SVGs can help LCP, prevent layout shift (CLS) and keep the DOM light for INP
- SVGO + Brotli compresses SVGs 92-97% from raw editor output
- Inline critical SVGs, lazy-load below-fold, cache aggressively on CDN
- Complex SVGs (1000+ paths) can be SLOWER than raster — always benchmark
:::
On many sites, one of the highest-impact performance changes is simple: fix your SVGs. Not switch frameworks. Not rewrite your JavaScript bundle. Just optimize the vector assets you already ship.
This guide is a practical playbook: production configs, worked examples and what to measure.
## SVG vs Raster: Where the Savings Come From
Measure your own pages with WebPageTest or Chrome DevTools (throttled to a slow connection) before and after each change. The general pattern:
For flat graphics such as icons, logos and simple illustrations, an SVG cleaned with SVGO and served with Brotli is usually several times smaller than the same image as PNG or WebP, and it stays sharp at any size. For photos, the opposite is true (see the warning further down).
## Core Web Vitals Impact: LCP, CLS, and INP
Google's Core Web Vitals directly determine your search ranking. Here's how SVG optimization moves each metric.
### Largest Contentful Paint (LCP)
If your hero image or above-the-fold illustration is an SVG, its load time directly hits LCP. A heavy, unoptimized SVG hero can push LCP past Google's 2.5-second "good" threshold; a lean inline SVG helps keep it under.
The key: inline SVGs eliminate the network request entirely. The browser parses them as part of the HTML document, rendering during initial paint — not after a separate fetch.
### Cumulative Layout Shift (CLS)
SVGs with explicit `viewBox` and CSS dimensions produce **zero layout shift**. The browser knows the exact aspect ratio before rendering.
```html
```
### Interaction to Next Paint (INP)
Every unnecessary SVG node adds to DOM size and slows event handlers. Stripping a typical Illustrator SVG down to the nodes it actually needs keeps the DOM small, which helps INP on mid-range Android devices. Editor metadata, empty `` tags, and hidden layers are the worst offenders.
---
## SVGO Configuration for Maximum Compression
SVGO is the industry standard, but defaults aren't aggressive enough for production.
```bash
npm install -g svgo
svgo --config svgo.config.js input.svg -o output.svg
svgo -f ./src/assets/icons/ -o ./dist/icons/ # batch process
```
### Production Config
```javascript
// svgo.config.js — maximum compression
module.exports = {
multipass: true,
plugins: [
{
name: 'preset-default',
params: {
overrides: {
removeViewBox: false, // KEEP for responsive scaling
cleanupIds: { minify: true, remove: false },
convertPathData: { floatPrecision: 2, transformPrecision: 3 },
mergePaths: { force: true },
removeDesc: true,
},
},
},
'removeDimensions',
'sortAttrs', // Better gzip dictionary matching
'removeXMLNS', // Remove xmlns for inline SVGs
{ name: 'removeAttrs', params: { attrs: ['data-name', 'class'] } },
],
};
```
### Optimization Results by Technique
| Technique | Before | After | Improvement |
|-----------|--------|-------|-------------|
| Remove editor metadata | 48.3 KB | 31.2 KB | 35% |
| Convert path data (precision 2) | 31.2 KB | 19.8 KB | 37% |
| Merge paths | 19.8 KB | 14.1 KB | 29% |
| Remove unused defs/clips | 14.1 KB | 11.6 KB | 18% |
| Minify IDs + sort attrs | 11.6 KB | 8.2 KB | 29% |
| **Cumulative** | **48.3 KB** | **8.2 KB** | **83%** |
Use [VectoSolve's SVG Optimizer](https://vectosolve.com/optimize-svg) for the cleanup steps without the CLI (metadata, comments, editor data, empty groups, ID shortening) — drag, drop, download. Path precision and path merging still need SVGO.
---
## Gzip + Brotli Compression for SVG
SVGs are XML text. They compress extremely well — Brotli delivers 20-30% better ratios than Gzip. Configure your server to compress `.svg` responses.
### Nginx
```nginx
gzip on;
gzip_types image/svg+xml;
gzip_comp_level 6;
brotli on;
brotli_types image/svg+xml;
brotli_comp_level 6;
```
### Apache
```apache
AddType image/svg+xml .svg .svgz
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType BROTLI_COMPRESS image/svg+xml
```
With SVGO + Brotli, that 48 KB Figma export becomes **1.8-2.5 KB** over the wire. Smaller than most favicons.
---
## Critical Rendering Path: Inline vs External vs Data URI
Where you put your SVG matters as much as how you optimize it.
| Method | HTTP Request | Cacheable | Best For |
|--------|-------------|-----------|----------|
| Inline `
```
### Interaction to Next Paint (INP)
Every unnecessary SVG node adds to DOM size and slows event handlers. Stripping a typical Illustrator SVG down to the nodes it actually needs keeps the DOM small, which helps INP on mid-range Android devices. Editor metadata, empty `