SVG Optimizer

What the SVG optimizer does

SVG files from design apps carry a lot that a browser does not need to draw them: editor settings, comments, metadata, long numbers with six decimal places, default values and empty groups. This SVG optimizer runs your files through SVGO 4.1.0 (MIT license), an open source SVG optimizer, and shows the size and gzip size before and after, with both images side by side. Drop many files at once and download them together as a ZIP.

What SVGO removes

SVGO works with plugins. The tool uses its default set, preset-default, which the SVGO docs list with its plugins in the order they run. In version 4.1.0 there are 34. Among them:

• The XML declaration, the doctype, comments, the metadata element and attributes from editor namespaces.
• Hidden elements, empty groups, empty attributes, definitions nothing uses and attributes set to their default value.
• Shorter forms of the same thing: #FF6600 becomes #f60, rectangles and lines can become paths, groups that do nothing are removed, and path data is rewritten with relative coordinates and fewer commands.
• Numbers rounded to the chosen number of decimal places, and a px unit removed where it is the default.

According to the SVGO migration guide, version 4 no longer removes the viewBox or the title element by default, to keep images scalable and accessible. SVGO runs several passes over each file until it stops getting smaller.

The options explained

• Decimal places sets how many digits after the point coordinates and other numbers keep. In the SVGO 4.1.0 code, the plugins that round use 3 when nothing else is set, so this tool starts at 3. Each digit you drop saves bytes in every point. How much rounding is safe depends on the size of the drawing: on a 24 by 24 icon, 1 decimal place is a step of 0.1 units, about 0.4% of the width. On a drawing 1,000 units wide, whole numbers are often fine. If a curve looks bumpy or shapes no longer meet in the After preview, choose more decimals.
• Keep viewBox is on by default. The viewBox sets the coordinate system of the drawing, and it is what lets an SVG scale to any size. The SVGO docs warn that removing it stops an SVG from scaling to fill its container. Turned off, the removeViewBox plugin removes it only where it matches the width and height.
• Remove width and height takes the fixed size off the root svg element and adds a viewBox if one is missing (the removeDimensions plugin). The SVG then takes the size your CSS gives it, which is handy for icons and responsive images. Set its size in your CSS, or with width and height on the img tag.
• Remove comments and Remove metadata turn those plugins on or off. Comments that start with ! are kept as license notes, as the plugin does by default.
• Keep IDs turns off the cleanupIds plugin, which removes IDs nothing in the file refers to and shortens the ones that are used. Keep them when CSS or JavaScript on your page selects SVG parts by ID, when another file links to a symbol by its # name, or when you place several SVGs inline on one page: the SVGO docs note that shortened IDs from different files can clash. The plugin already leaves IDs alone in a file that has a style or script element.
• Prettify output puts each element on its own line, indented. Easier to edit, but larger.

SVG files can contain scripts

An SVG is a document, not just a picture. MDN describes the SVG script element, and elements can carry event attributes like onclick. MDN's page on SVG as an image says JavaScript is disabled when an SVG is used as an image, but those limits do not apply when the SVG is opened directly or embedded with iframe, object or embed. That is why the previews here use an img tag: a script inside your file cannot run on this page. Turn on Remove scripts to remove script elements and event handler attributes with SVGO's removeScripts plugin, which its docs recommend for SVG files you do not trust. It breaks SVGs that need JavaScript to work.

A worked example

Press Fill in an example. The sample is a 120 by 120 badge as a vector editor might save it, with an XML declaration, a comment, metadata, editor settings, an unused gradient, IDs on every element and numbers like 50.987654. With the default options it shrinks from 903 bytes to 310 bytes, about 66% smaller, and the two previews look the same. Set Decimal places to 0 and it drops to 288 bytes: the points of the check mark move by less than half a unit, which you cannot see at this size.

Limits

• Files up to 10 MB each are accepted. Very large SVGs, such as maps with many thousands of paths, can take several seconds, and phones and tablets may run out of memory.
• Embedded bitmap images and fonts stay as they are. SVGO does not compress PNG or JPEG data inside an SVG.
• SVGO needs well-formed XML. If a file has an error, you see the line and column, and that file is skipped.

How to use the SVG optimizer

1. 1Paste SVG code into the box, or drop one or more .svg files on it, or press Open files.
2. 2Set the options. The defaults suit most icons and illustrations.
3. 3Compare the Before and After previews. Switch the background to see white or dark shapes.
4. 4Copy the code or download the .svg file. With several files, Download all saves them as a ZIP with their original names.

For other web files, the CSS and JS minifier shrinks stylesheets and scripts, and SVG to PNG turns an SVG into a bitmap image.

Sources

• SVGO docs, Preset Default: the plugins that run by default and their order
• SVGO docs, Migration from v3 to v4: removeViewBox and removeTitle no longer default, the svgo/browser import
• SVGO docs, cleanupIds, removeViewBox, removeDimensions, removeScripts and cleanupNumericValues
• MDN, SVG as an image: JavaScript disabled in image contexts
• MDN, the SVG script element
• fflate (MIT license): gzip sizes and the ZIP file

Related guides

• JPG vs PNG vs WebP vs AVIF: Which Format to Use
• Core Web Vitals Explained: LCP, INP and CLS
• Responsive Images: srcset, sizes and Which Widths to Export

Built by Tobias. Updated October 26, 2026.

Frequently asked questions