💡 Tips Images & Media

SVG Optimiser: Tips for Smaller, Cleaner Production SVGs

Advertisement
🎨
SVG Optimizer & Viewer

Paste any SVG and get a cleaner, smaller version — with a live preview.

Use this tool →

Keep title and desc for accessible icons

The <title> and <desc> elements in SVG serve an accessibility purpose — screen readers announce the title when the SVG is used as an image. For decorative icons (purely visual with an alt text provided by the surrounding HTML), removing them is fine. For standalone SVG illustrations or informational charts, keep them. The "remove metadata/title/desc" option removes all three; if you need the title for accessibility, uncheck this option and remove only the metadata manually.

Minify for inline SVG, keep formatted for linked files

If you are embedding SVG directly in HTML (the most performant approach for small icons), use the minify option to get the most compact single-line output. For SVG files linked as <img src="icon.svg"> or used as background-image in CSS, formatted SVG with whitespace is still gzipped by the web server, so the wire size difference between minified and formatted SVG is minimal. Minification matters most for inline SVG where the HTML file itself is not separately compressed.

Combine with gzip/Brotli compression

All modern web servers serve text files (including SVG) with gzip or Brotli compression, which typically reduces SVG size by an additional 60–80% over the wire. An optimised 1.5KB SVG may be transmitted as only 400–600 bytes. This means the optimisation savings on very small SVGs (under 2KB) are less impactful on actual load time, though they still reduce page weight and are worth doing as a hygiene measure.

Check the preview before deploying

Always verify the live preview matches the original appearance before using optimised SVG in production. Some optimisations can affect rendering in edge cases — particularly removing id attributes that are referenced by <use> elements or CSS/JS, and removing namespaces that define required prefixes. The three-background preview (white, dark, transparent) catches the most common issues.

Optimise fonts embedded in SVG

SVGs from design tools sometimes embed font data as base64-encoded strings inside the SVG. These can be enormous — a single embedded font might be 50–100KB. If the font is also loaded by your web page's CSS, remove the embedded font data entirely and let the browser use the CSS-loaded version. This is a manual edit after downloading the optimised SVG.

Advertisement
🔧
Use the tool
SVG Optimizer & Viewer
📖
📖 Full Guide →
SVG Optimizer & Viewer
❓
Frequently Asked Questions
Common questions about SVG Optimizer & Viewer

📦 Recommended Resources

Handpicked books and tools — links may earn a small commission at no cost to you.