SVG Optimizer

The rendering check

After SVGO finishes, the tool draws the original and the result with your browser at 400 pixels on the long side and compares every pixel. A pixel counts as changed when a color channel or the opacity differs by more than 24 of 255. Up to 0.1 % changed pixels is anti-aliasing noise and is reported as Renders the same; more than that shows the changed pixels in red so you can see where the drawing moved.

The tool also adds a missing xmlns=“http://www.w3.org/2000/svg” before optimizing. SVG copied out of an HTML page often lacks it, and without it a .svg file does not open as an image.

Example: an icon exported from a design tool

The Example button loads this 512-byte icon, written the way Figma exports one:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Figma -->
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <title>Check</title>
  <defs>
    <style>.stroke { stroke: #000000; stroke-width: 2.000000; }</style>
  </defs>
  <g id="icon-check">
    <rect x="0" y="0" width="24" height="24" fill="none"/>
    <path class="stroke" d="M 5.000000 12.000000 L 10.000000 17.000000 L 19.000000 7.000000" stroke-linecap="round" stroke-linejoin="round"/>
  </g>
</svg>

With the default settings it becomes 254 bytes (gzip: 314 → 196 bytes) and renders the same:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><title>Check</title><path d="M0 0h24v24H0z"/><path stroke-linecap="round" stroke-linejoin="round" d="m5 12 5 5 9-10" style="stroke:#000;stroke-width:2"/></svg>

Two notes appear. #icon-check is gone, because the group was collapsed and its ID was not used inside the file. .stroke is gone, because a class used once was written into a style attribute (inlineStyles). If your page CSS colors the icon through .stroke, or your JavaScript looks it up with #icon-check, the optimized file breaks that code although it looks identical. <title> stays: SVGO 4 took removeTitle and removeViewBox out of the default preset (migration guide).

Example: a file that gets bigger

The Flag of South Korea on Wikimedia Commons is 589 bytes and already hand-optimized. SVGO returns 816 bytes: convertTransform writes the rotate(33.69006752598) of the trigrams into the path coordinates, and rotated coordinates need more digits. The tool flags the result as larger and tells you to keep the original. A batch run shows the same in the table, so you can leave such files out of the ZIP.

Settings that can break an SVG

Scripts and SVG from unknown sources

With default settings SVGO keeps <script> and event attributes such as onclick; the tool counts them and says so. Remove scripts and event handlers runs removeScripts, which in SVGO 4.1.0 also catches java	script: links and HTML inside <foreignObject>. Browsers disable scripts and external files for SVG used as an image (MDN), but not when the file is opened directly, inlined, or embedded with <object>, <embed> or <iframe>. The previews here are images, so nothing in a pasted SVG runs on this page.

Many files and your build

Drop a folder’s worth of icons at once: each file gets a row with its size before and after, the saving and the rendering result, and Download all (.zip) packs the results under their original names. The config panel shows the matching file, for example:

// npx svgo@4.1.0 --config svgo.config.mjs -f icons -o icons-min
export default {
  multipass: true,
  floatPrecision: 3,
  plugins: [
    'preset-default',
  ],
};

The tool’s tests run generated configs through the SVGO command line and check that the output equals the tool’s.

How it compares

Tested on 2 October 2026 with the same files. SVGOMG runs SVGO 4.0.0 locally, one file at a time; it returned an SVG without xmlns unchanged in that respect, deleted the icon-check ID and grew the Korean flag (shown as 128.66 % of the gzipped size) without a warning, and offers a “Show original” toggle instead of a pixel check. Vecta Nano takes up to 10 files of 5 MB; its requests carried no file content, only counters with the saved percentage, but the page has no plugin settings and no code view. Neither lists what the optimization removed.

Limits

• 50 MB per file. Files over 10 MB are optimized but not compared pixel by pixel.
• Invalid XML is reported with the line and column in the text you entered, counted in characters, and a reason in the page language. <svg><rect></svg> without xmlns is reported at line 1, column 17: the closing tag </svg> does not close the element opened last. The xmlns the tool adds is not counted.
• The comparison shows the first frame of animated SVG and cannot see external images, fonts or <use href=“other.svg#id”>, because browsers do not load them into an SVG image.
• IDs and classes used by CSS or JavaScript outside the file are invisible to SVGO; the notes list what disappeared, not who used it.
• SVGO does not recompress embedded PNG or JPEG data. Plugins that need parameters (removeAttrs, removeElementsByAttr, removeAttributesBySelector, addAttributesToSVGElement, addClassesToSVGElement) are not offered.
• Copy as “React component (JSX)” converts comments, <style> blocks and style attributes the same way as SVG to JSX. A style that a React style object cannot keep, such as fill:red!important (SVGO keeps !important), is refused: the reason appears under the buttons, Copy is disabled for that file, and Download, the row downloads and the ZIP still save the optimized SVG. The other copy formats are not affected.

To turn the result into a bitmap use SVG to PNG Converter; for TypeScript, forwardRef or memo components use SVG to JSX; to embed it as a data URI with other formats use Image to Base64.