SVG Minifier

SVG Full Form

SVG stands for Scalable Vector Graphics - an XML-based image format for two-dimensional graphics that scales infinitely without losing quality. SVG files exported from design tools (Figma, Illustrator, Inkscape) are typically bloated with editor metadata, default attributes, and whitespace. Stripping those gives you a smaller file that renders identically in every browser.

What this tool does

• Drop editor metadata - Removes <metadata>, <title>, <desc>, editor elements such as <sodipodi:namedview>, editor attributes such as inkscape:label, and namespaces like xmlns:sodipodi, xmlns:inkscape, xmlns:sketch once nothing in the file uses them.
• Drop XML prolog & doctype - Removes the <?xml ...?> declaration and <!DOCTYPE svg ...> - safe when embedding SVG inline in HTML (the common case). Other instructions, such as <?xml-stylesheet ...?>, are kept.
• Drop default attributes - Removes version="1.1" (the default when unspecified).
• Strip comments - Removes <!-- ... -->.
• Collapse whitespace - Between tags and inside text nodes. Attribute values, such as path data, are kept byte for byte.
• Minify embedded CSS - A <style> block is minified with the same engine as our CSS Minifier. A <script> block is left as written.
• Byte savings - See original vs minified byte counts and percentage saved.

When you need an SVG minifier

• Inline SVG icons - When embedding SVGs directly in HTML for fast render (no extra HTTP request), small files matter.
• Icon sprite sheets - A sprite of 50 icons at 1.2KB each is 60KB; minified they might be 25KB.
• React/Vue components - SVGs imported as components in your bundle add to your JS payload.
• CSS background images - Data-URL-encoded SVG backgrounds in CSS benefit enormously from minification.

How to use it

1. Open the SVG in a text editor and paste its code into Input SVG, or click Upload File and pick the .svg file directly. Load Sample shows a typical Inkscape export.
2. The cleaned markup appears on the right as you type. Click Minify to refresh it.
3. Check the stats line for the size saved.
4. Click Copy to paste the result into your HTML, CSS or component, or Download to save it as minified.svg.

A worked example

A 24 by 24 home icon saved from a design tool, 261 bytes:

<?xml version="1.0" encoding="UTF-8"?> <!-- Generator: design tool --> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="24" height="24" viewBox="0 0 24 24"> <title>Home</title> <path d="M12 3l9 9h-3v9h-5v-6h-2v6H6v-9H3z" fill="#3366cc"/> </svg>

After minifying it is 149 bytes, about 43% smaller:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 3l9 9h-3v9h-5v-6h-2v6H6v-9H3z" fill="#3366cc"/></svg>

The prolog, the comment, the title and version="1.1" are gone. The xmlns declaration stays, because a standalone SVG file needs it, and the path data is untouched, so the icon looks exactly the same.

What it does not do

This is a cleanup tool, not a geometry optimiser. It never rounds coordinates, merges paths, converts shapes, or removes unused <defs>, IDs and gradients. Path data that a tool exported with six decimal places keeps all six. If the file is still large after minifying, the bytes are in the drawing itself, and simplifying the artwork in your editor or using a dedicated optimiser such as SVGO will help more.

Common snags

• Illustrator exports - Illustrator often puts xml:space="preserve" on the root <svg> element. In SVG that setting only changes how text is drawn, so the minifier still removes the comments and the indentation between shapes, and keeps the text inside <text>, <tspan> and <textPath> exactly as written.
• Text elements - without xml:space="preserve", repeated spaces inside <text> are reduced to one, which matches how browsers display them by default. The single space between two <tspan> elements is kept, so words do not run together.
• Accessible icons - since <title> is removed, add role="img" and aria-label on the element where you use the icon if it carries meaning. Purely decorative icons should get aria-hidden="true" instead.
• Data URLs - when you put the result in a CSS url(), encode the # in colours as %23, or the browser will treat everything after it as a fragment.

Privacy

Everything runs locally in your browser. Your SVG is never sent to our servers. You can minify unreleased logos, private design tokens, or client artwork without them leaving your machine.