SVG Optimizer Online

SVG Optimizer: Reduce SVG File Size Without Sacrificing Quality

SVG files exported from design tools like Adobe Illustrator, Sketch, Figma, and Inkscape are frequently bloated with unnecessary data: editor-specific metadata, redundant attributes, empty groups, unused definitions, verbose coordinate notation, and non-optimized path data. A 50KB SVG icon exported from Illustrator might compress to under 5KB with no visual difference after optimization. Our SVG Optimizer applies SVGO-compatible optimization passes to reduce file size, improve rendering performance, and produce cleaner, more maintainable SVG code.

SVG optimization is one of the highest-impact performance wins available for icon-heavy web applications. A dashboard with 50 unique SVG icons averaging 15KB each uses 750KB of SVG data "” optimizing those icons to an average of 3KB saves 600KB, improving load time and reducing bandwidth costs, particularly for users on mobile connections.

What SVG Exports Contain (And Why They're Bloated)

Understanding why SVG exports are bloated requires knowing what design tools embed:

Adobe Illustrator

Illustrator SVG exports embed a full XML namespace declaration for Adobe proprietary extensions (xmlns:a, xmlns:i), XMP metadata headers with file creation dates and software versions, extensive <defs> sections with empty patterns, gradients referenced nowhere, and <style> blocks with unused class selectors. The preserveAspectRatio, xml:space, and version attributes are added by default. A simple icon might have more metadata than actual path data.

Sketch

Sketch exports include title elements (page/layer name from the document), group IDs matching internal object identifiers, auto-generated class names, and separate<g> elements for each layer group with no transformation. These groups are semantically empty (no transformation, no style) and exist purely to mirror the Sketch layer structure.

Figma

Figma's SVG export is generally cleaner than Illustrator or Sketch but still includes redundant group wrappers, explicit fill-rule and clip-rule attributes on every path (even when they match the default), xmlns:xlink declarations even when no xlink hrefs are used, and verbose floating-point coordinates like M 123.456789 234.567891 rather than the more compact M 123.46 234.57.

SVGO: The Standard SVG Optimization Engine

SVGO (SVG Optimizer) is the open-source Node.js tool that powers virtually every SVG optimization workflow in the JavaScript ecosystem. Created by Kir Belevich and now maintained by the open-source community, SVGO applies a configurable pipeline of optimization plugins, each responsible for a specific type of cleanup or transformation. SVGO powers:

• svgr (React SVG component generation)
• imagemin-svgo
• webpack, Vite, and Rollup SVG plugins
• SVGOMG (Jake Archibald's web UI for SVGO)
• Squoosh (for SVG files)
• vite-svg-loader, @svgr/webpack

SVGO is configured via an svgo.config.js file or programmatically:

import { optimize } from 'svgo';

const result = optimize(svgString, {
  plugins: [
    'removeDoctype',
    'removeXMLProcInst',
    'removeComments',
    'removeMetadata',
    'removeEditorsNSData',
    'cleanupAttrs',
    'mergeStyles',
    'inlineStyles',
    {
      name: 'convertColors',
      params: { shorthex: true }
    },
    'removeUselessDefs',
    'cleanupNumericValues',
    'convertShapeToPath',
    'mergePaths',
    'removeEmptyContainers',
  ]
});

console.log(result.data);

Key SVGO Optimization Plugins

SVGO's optimization pipeline consists of individual plugins, each performing a focused task:

Metadata and Documentation Removal

• removeDoctype: removes the DOCTYPE declaration (<!DOCTYPE svg PUBLIC ...>). Not needed in HTML5 documents.
• removeXMLProcInst: removes the XML processing instruction (<?xml version="1.0"?>). Required for standalone XML but unnecessary when SVG is embedded in HTML.
• removeComments: removes XML comments. These are metadata for humans, not rendering.
• removeMetadata: removes <metadata> elements (XMP metadata, creator information).
• removeEditorsNSData: removes proprietary namespace data from Illustrator, Inkscape, and other editors (ai:, inkscape:, sodipodi: namespaced attributes).
• removeTitle: removes <title> elements (document/layer names from the editor). Note: titles provide accessibility "” only remove if you don't need them.
• removeDesc: removes <desc> elements. Same accessibility caveat as removeTitle.

Attribute and Style Cleanup

• cleanupAttrs: removes newlines and extra spaces in attribute values.
• mergeStyles: merges multiple <style> elements into one.
• inlineStyles: converts CSS class-based styles to inline style attributes for better optimization by later plugins.
• minifyStyles: minifies CSS in <style> blocks using CSSO.
• removeUselessStrokeAndFill: removes stroke or fill attributes that have no visible effect (e.g., stroke="none" with no stroke-width, fill="none" with no fill).
• removeUnknownsAndDefaults: removes attributes that are unknown to SVG or have their default value (e.g., explicit fill="black" when black is the default).
• removeNonInheritableGroupAttrs: removes presentational attributes from groups when they would be inherited by children anyway.

Numeric and Coordinate Optimization

• cleanupNumericValues: rounds coordinate values to reduce decimal places (e.g., 123.456789 → 123.46). The precision parameter controls how aggressively values are rounded.
• convertPathData: converts path commands to their shortest equivalent forms, removes redundant commands, rounds coordinates, and converts absolute commands to relative (or vice versa) when shorter.
• convertTransform: converts and merges transform attribute matrices, collapsing multiple transforms into a single matrix when beneficial.
• removeUselessDefs: removes elements from <defs> that are not referenced anywhere in the document.

Shape and Structure Optimization

• convertShapeToPath: converts simple shapes (<rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>) to equivalent <path> elements when paths produce shorter output.
• mergePaths: merges multiple adjacent path elements with the same visual style into a single d attribute using the "M" move command.
• removeEmptyContainers: removes empty <g>, <defs>, and other container elements.
• collapseGroups: removes group elements when the group serves no purpose (no attributes, single child).

Color Optimization

• convertColors: converts color values to their shortest representation "” RGB to hex (rgb(255,0,0) → #ff0000), long hex to short hex (#ffffff → #fff), and named color keywords where shorter.

Typical Size Reductions

SVG optimization savings depend heavily on the source tool and complexity:

• Adobe Illustrator icons: typically 50-80% size reduction. Illustrator's SVG format is exceptionally verbose.
• Sketch icons: typically 30-60% size reduction.
• Figma icons: typically 15-40% size reduction. Figma produces cleaner SVG than Illustrator but still has room for optimization.
• Hand-coded SVG: 5-20% reduction. Already relatively clean, mainly coordinate rounding and whitespace removal.
• Complex illustrations: 20-50% reduction depending on path complexity and metadata bloat.

Gzip/Brotli compression applied after SVGO optimization often brings total delivery size down by another 70-85%, since SVG text compresses exceptionally well. An SVG that starts at 50KB, compresses to 10KB after SVGO, then compresses to under 2KB after gzip.

What NOT to Remove: Accessibility in SVGs

Aggressive optimization can harm accessibility. Before using SVGO with all plugins enabled, understand what should be preserved:

• <title> elements: provide accessible names for SVG icons when they are not accompanied by visible text. Screen readers read the title as the element's accessible name. If an SVG icon is used without alt text or aria-label, removing the title makes it inaccessible. Configure removeTitle to false for icons used standalone.
• <desc> elements: provide additional descriptions for screen readers. Keep them for complex infographics or illustrations where context matters.
• role attributes: role="img" on the SVG element helps screen readers correctly identify SVG as an image. SVGO's removeUnknownsAndDefaults may strip custom attributes "” configure it to preserve role.
• aria-label and aria-labelledby: always preserve ARIA attributes.

The recommended pattern for accessible SVG icons is:

<svg role="img" aria-labelledby="icon-title">
  <title id="icon-title">Download</title>
  <!-- paths -->
</svg>

SVG Optimization in Build Pipelines

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import svgr from 'vite-plugin-svgr';

export default defineConfig({
  plugins: [
    svgr({
      svgrOptions: {
        svgoConfig: {
          plugins: ['preset-default']
        }
      }
    })
  ]
});

webpack

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              svgoConfig: {
                plugins: ['preset-default']
            }
          }
        }
      }
    ]
  }
};

CLI Batch Optimization

# Install SVGO
npm install -g svgo

# Optimize single file
svgo icon.svg -o icon.min.svg

# Optimize directory
svgo --folder src/icons --output dist/icons

# With config file
svgo icon.svg --config svgo.config.js

# Show stats
svgo icon.svg --pretty

SVG Sprites and Symbol Patterns

When an application uses many icons, the SVG sprite pattern is more efficient than individual files. All icons are combined into a single SVG file using <symbol> elements, each with an id attribute. Icons are referenced from HTML with <use href="#icon-id">:

<!-- sprite.svg -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
  <symbol id="icon-download" viewBox="0 0 24 24">
    <path d="M12 16l-6-6h4V4h4v6h4l-6 6z"/>
  </symbol>
  <symbol id="icon-upload" viewBox="0 0 24 24">
    <path d="M12 8l6 6h-4v6H10v-6H6l6-6z"/>
  </symbol>
</svg>

<!-- Usage -->
<svg><use href="sprite.svg#icon-download"/></svg>

SVG sprites are optimized as a whole: SVGO can process the entire sprite file, deduplicating shared path elements, merging common styles, and removing redundant data across all symbols.

Safe Optimization vs Aggressive Optimization

SVGO's preset-default configuration applies a carefully selected set of safe transformations that reliably reduce file size without causing visual changes. For even smaller files, aggressive optimization options are available but require visual verification:

• Rounding precision: reducing coordinate precision from 3 to 1 decimal place can cause visible artifacts on complex curved paths. Test at all sizes before reducing precision aggressively.
• convertShapeToPath: converting shapes to paths is lossless but may make future editing harder if the SVG needs to be re-imported into a design tool.
• cleanupIds: generates minimal IDs (a, b, c) instead of descriptive ones. Fine for standalone icons; problematic if the SVG uses named anchors or JavaScript targets element IDs.

How to Use This SVG Optimizer

Paste or upload your SVG file. Configure which optimization plugins to apply "” the default settings use SVGO's preset-default which is safe for most use cases. Toggle individual plugins to enable more aggressive or more conservative optimization. The tool shows the optimized SVG output, the compression ratio, and a size comparison. Copy the optimized SVG or download it. Preview the output to visually verify no quality was lost, and use the diff view to see exactly which attributes and elements were removed.