SVG files exported from Illustrator, Inkscape, Figma or Sketch carry a lot of baggage: editor metadata, comments, hidden layers, long decimal coordinates and attributes that only repeat the defaults. None of it changes what the graphic looks like, but all of it is downloaded by every visitor and pasted into every component that inlines the icon. This optimizer removes that weight with SVGO, the same open-source optimizer used by most front-end build tools.
Paste the markup or open an .svg file, choose a preset and the optimized code appears beside the original with the sizes before and after and a preview. Your SVG is processed in the browser and never uploaded.
What optimizing an SVG changes
An SVG is a text file describing shapes in XML. Optimizing rewrites that text to say the same thing more briefly. It removes the XML declaration, doctype, comments and metadata blocks, drops namespaces and attributes that belong to the editor rather than the graphic, shortens numbers such as 12.500000 to 12.5 and colours such as #ffffff to #fff, and leaves out attributes that only state default values.
More aggressive steps go further: path data is rewritten with relative and shorter commands, simple shapes become paths, unnecessary groups are collapsed, and paths that share the same styling are merged. Those steps change the structure of the file, which is invisible in the picture but can matter if code refers to specific elements.
Where a smaller SVG makes a difference
Icons inlined in HTML or React
An icon set pasted into components is shipped in every page bundle. Cutting each icon by half adds up over dozens of icons and makes the markup readable again.
Logos and illustrations on websites
Hero illustrations exported from design tools can weigh hundreds of kilobytes. Optimizing them speeds up the first render, often with a large saving and no visible change.
Cleaning up before committing to a repository
Removing editor data and comments before adding an SVG to version control keeps diffs small and avoids leaking file paths or author names saved by the editor.
The three presets
Safe runs SVGO's default plugins once, with every plugin that restructures the drawing switched off: IDs, groups, shapes, path data and transforms stay exactly as written, hidden elements are kept and styles are not inlined. It still removes comments, metadata and editor data and shortens numbers and colours. Balanced is SVGO's standard preset-default, run in several passes until nothing more can be saved. It also merges paths, rewrites path data, collapses groups, removes unused IDs and may shorten the others, while keeping the viewBox and title.
Maximum adds coordinate rounding to two decimal places, removes the title element and the fixed width and height so the SVG scales to its container through its viewBox, deletes paths that lie entirely outside the visible area, turns repeated identical paths into references and converts style attributes to presentation attributes. Prettify output indents the result by two spaces for reading; leave it off for the smallest file. The output updates a moment after you stop typing or change a setting.
Cómo usar esta herramienta
- Paste SVG code into the SVG code box, or press Open file to load an .svg of up to 5 MB.
- Choose a Preset: Safe, Balanced or Maximum. Balanced is the default.
- Compare the Original, Optimized and Saved figures and check the preview below.
- Turn on Prettify output if you want readable, indented code.
- Copy the optimized code or download it as a .min.svg file.
Limitations
- Balanced and Maximum can rename or remove IDs and merge elements. If CSS, JavaScript or animations target parts of the SVG, use Safe.
- Maximum removes the title, which screen readers and browser tooltips use, and the width and height, so set a size in CSS where you use the file.
- It is not a security sanitiser: scripts and event handler attributes inside an SVG are not removed. Only use SVG files from sources you trust.
- Bitmaps embedded in an SVG as base64 data are left as they are, so files that mainly wrap a photo barely shrink. One file is optimized at a time.