WebToolsPlanet
image Tools

SVG Optimizer

Remove bloat from SVGs exported by Figma, Illustrator, and Inkscape — reduce file size without visual change.

Last updated: March 25, 2026

Client-Side Processing
Input Data Stays on Device
Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SVG Optimizer?

SVG files exported from design tools like Figma, Adobe Illustrator, or Inkscape include large amounts of metadata that is entirely useless in a web browser: editor-specific namespaces (xmlns:adobe, xmlns:sketch), editing metadata (sodipodi:, inkscape:), unused definitions and filters, empty groups, default attribute values that are redundant, and XML comments. A complex Figma icon export may be 8KB when the actual path data used for rendering is under 1KB.

SVG optimization removes all of this non-rendering bloat, keeping only the markup that the browser actually needs to draw the graphic. For websites serving dozens of SVG icons, optimized SVGs can reduce the combined transferable weight by 40–70%. Additionally, cleaner SVG markup is safer to embed inline in HTML (avoiding namespace pollution), easier to animate with CSS, and simpler to manipulate with JavaScript. This tool is a browser-based implementation of SVGO — the industry-standard SVG optimization tool used by webpack, Vite, and design-to-code pipelines.

How to Use SVG Optimizer

1

Paste your SVG code into the input area, or use the file upload button to load an .svg file

2

The optimization level is set to "Balanced" by default — suitable for most use cases

3

Toggle individual optimizations as needed: clean IDs, remove metadata, merge paths, round decimals

4

Click "Optimize" to run the optimization pipeline

5

Review the before/after code diff and the size reduction percentage, then click "Copy SVG" or "Download .svg"

Common Use Cases

  • Stripping Figma export metadata from component icons before adding them to a React icon library
  • Optimizing hero SVG illustrations exported from Illustrator to reduce initial page weight
  • Cleaning up Inkscape-exported SVGs before embedding inline in HTML to avoid namespace pollution
  • Reducing the size of an SVG sprite sheet containing hundreds of icons for a web application
  • Preparing SVG animations for web use by removing the non-animatable metadata layers
  • Cleaning font-embedded SVGs from design tools that artificially inflate file size
  • Making an SVG safe for direct manipulation with JavaScript by removing editor-specific attributes
  • Verifying how much your current SVG export workflow (Figma vs Illustrator) leaves behind

Example Input and Output

Optimizing a Figma-exported icon removes ~60% of the markup:

Raw Figma SVG export (583 bytes)
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  xmlns:figma="http://www.figma.com/figma/1.0">
  <!-- Generated by Figma -->
  <title>Search Icon</title>
  <desc>A magnifying glass icon</desc>
  <metadata>
    <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
    </rdf:RDF>
  </metadata>
  <g id="search" transform="translate(0, 0)" fill="none" stroke="none">
    <circle cx="11" cy="11" r="8" stroke="#333" stroke-width="2" fill="none"/>
    <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#333" stroke-width="2"/>
  </g>
</svg>
Optimized SVG (231 bytes — 60% smaller)
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <circle cx="11" cy="11" r="8" stroke="#333" stroke-width="2" fill="none"/>
  <line x1="16.5" y1="16.5" x2="22" y2="22" stroke="#333" stroke-width="2"/>
</svg>

Client-Side Processing

SVG optimization runs locally in your browser using a JavaScript port of SVGO. Your SVG source code — including any unreleased design work or proprietary icon assets — is never sent to our servers.

Inline SVG in React/HTML

When embedding SVGs inline in React JSX, also convert the SVG attributes to camelCase (stroke-width → strokeWidth, class → className). Use a tool like SVGR (npx @svgr/cli icon.svg) to automate this conversion for component libraries. This is separate from file size optimization.

CSS Animation Compatibility

If you plan to animate SVG elements with CSS (targeting paths, groups, circles by class or ID), run the optimizer in "Conservative" mode and explicitly preserve IDs and class names. Aggressive path merging can collapse separate animatable elements into a single path, breaking your animation targets.

Frequently Asked Questions

Will optimizing an SVG change how it looks?
Standard optimization removes only non-rendering data (metadata, comments, redundant attributes, editor namespaces). The visual output is pixel-identical. However, aggressive optimizations like "Merge Paths" or "Remove IDs" can affect SVGs that are animated with CSS (which targets specific IDs) or styled with external CSS selectors. Always preview the result before deploying.
Why are SVG files from Figma and Illustrator so large?
Design tools save extra data to preserve editing round-trips. Figma saves component names, layer metadata, and plugin data. Illustrator saves its own namespace (xmlns:i), AI-specific XML metadata, and sometimes embedded fonts. Inkscape saves editor state (inkscape:zoom, inkscape:cx). None of this matters to a browser, but it can 2–5× inflate file size.
Is it safe to remove SVG IDs?
Only if the SVG is self-contained. If your CSS uses #svgId to style an element, or if JavaScript references element.getElementById() on SVG elements, removing those IDs will break your functionality. The safest optimization is to set "Keep IDs" and only remove metadata, comments, and empty groups. For pure decorative icons, removing all IDs is safe.
Can I use this on SVG icon sprites?
Yes. SVG sprites are SVG files containing multiple <symbol> or <g> elements, each referenced by ID as <use href="#iconId">. Optimize with "Keep IDs" enabled. The optimizer will remove metadata and unnecessary attributes from each symbol while preserving the IDs needed for <use> references.
What is "decimal precision" and why does it matter?
SVG path data often contains coordinates with many decimal places: M 12.34567 5.00001. Reducing decimal precision to 2 significant figures (M 12.35 5) makes the file smaller with no perceptible visual difference at normal display sizes. At 2 decimal places, the maximum error is 0.005px — invisible at any normal screen scale factor. Recommended setting is 2–3 decimal places.
What is the difference between SVG optimization and PNG conversion?
SVG optimization keeps the file as a vector — infinitely scalable, styleable with CSS, animatable, and editable as text. PNG conversion rasterizes the image to a fixed resolution. For icons and illustrations, optimized SVG is almost always the better format for the web. Convert to PNG only when SVG is not supported (very old browsers, specific email clients) or when reproducing complex photographic gradients.

How This Tool Works

The SVG input string is parsed using a JavaScript XML parser into a DOM-like AST. A configurable pipeline of SVGO "plugins" then transforms the AST: each plugin is a pure function that traverses the node tree and applies a specific transformation (remove metadata nodes, collapse empty groups, remove default attribute values, round coordinate numbers to specified precision). After all plugins run, the AST is serialized back to a clean SVG string. The size reduction percentage is computed by comparing input.length to output.length.

Technical Stack

SVGO (JavaScript port)XML AST transformationConfigurable plugin pipelineClient-side only

Related Tools

Image Cropper
Crop, rotate, and resize images with preset aspect ratios — all locally in your browser with no quality loss.
Placeholder Image Generator
Generate placeholder images with exact dimensions, colors, and text — download as PNG or copy the URL for development.
Favicon Generator
Create favicons from text, emoji, or images — generates ICO, PNG, and all required Apple Touch icon sizes.
Base64 Image Encoder
Convert PNG, JPG, WebP, and SVG images to Base64 strings for direct embedding in HTML, CSS, or JSON payloads.
Image Converter
Convert images between PNG, JPG, WebP, and AVIF formats — with quality controls and batch conversion.
Image Compressor
Reduce image file size online — compress JPEG, PNG, and WebP without losing visible quality.