Open menu

SVG Optimizer

Paste SVG code or open an .svg file to make it smaller and cleaner. The optimizer removes metadata and attributes added by vector editors, comments, unused IDs, default values and empty groups, rounds numbers to the precision you choose and rewrites path data compactly. It also removes scripts and event handlers by default. Previews of the original and optimized versions are shown side by side as images (so nothing in the file can run), and you get the size saved plus a CSS data URI.

Options

Input

1,152 characters

or drop it here. It stays on your device.

Output

Optimized SVG
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120"><title>Sunrise icon</title><defs><linearGradient id="sky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#fc6" stop-opacity="1"/><stop offset="1" stop-color="#f63"/></linearGradient></defs><circle cx="60" cy="70" r="28.12" fill="url(#sky)"/><path d="M10 90L110 90L110 100L10 100Z" fill="#345"/><path d="M60 20L60 32M25.36 34.64L33.84 43.13M94.64 34.64L86.16 43.13" stroke="#f63" stroke-width="6" stroke-linecap="round"/></svg>

Preview

Original
Original · 1.1 KB
Optimized
Optimized · 523 B

Previews are drawn as images, so scripts inside the SVG never run here. Compare them to make sure nothing changed visually.

CSS data URI
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Ctitle%3ESunrise icon%3C/title%3E%3Cdefs%3E%3ClinearGradient id='sky' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fc6' stop-opacity='1'/%3E%3Cstop offset='1' stop-color='%23f63'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='60' cy='70' r='28.12' fill='url(%23sky)'/%3E%3Cpath d='M10 90L110 90L110 100L10 100Z' fill='%23345'/%3E%3Cpath d='M60 20L60 32M25.36 34.64L33.84 43.13M94.64 34.64L86.16 43.13' stroke='%23f63' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E");

Checks

  • Pass 1.1 KB → 523 B (55% smaller). Gzip on your server shrinks it further.
  • Info Removed: 1 comments, 4 editor attributes, 4 default attributes, 1 metadata blocks, 4 unused IDs, 2 empty groups.

Runs entirely in your browser. Nothing you paste or open here is uploaded or stored.

How to use the SVG optimizer

  1. Paste SVG code or choose an .svg file (up to 5 MB).
  2. Set the decimal places: 2 is right for icons, 3 for detailed illustrations and maps.
  3. Review the options. The defaults are safe for almost every file.
  4. Compare the previews of the original and optimized versions.
  5. Copy or download optimized.svg, or copy the CSS data URI to embed a small icon in a stylesheet.

What the optimizer does

  • Removes editor data: <metadata>, Inkscape and Sodipodi elements, editor attributes and namespaces such as inkscape: and sketch:, and data-name.
  • Removes comments, except those starting with <!--!, which conventionally hold licences.
  • Removes unused IDs, keeping any referenced by url(#…), href="#…" or animation timing.
  • Drops default attributes: fill-opacity="1", stroke-width="1", fill-rule="nonzero", version and similar.
  • Collapses groups: empty <g> and <defs> disappear, and attribute-free groups pass their children to the parent.
  • Rounds numbers in coordinates, sizes, points, transforms and path data, and writes 0.5 as .5.
  • Compacts path data: M 10.000,20.000 L 30,40 becomes M10 20L30 40. Arc flags are parsed by position, because they can be written without spaces and must never be merged.
  • Adds a viewBox from width and height if it’s missing, so the SVG can scale.
  • Shortens colours like #ffffff to #fff, and modernises xlink:href to href.

Worked examples

Example 1: an editor export

Load the sample sunrise icon. It shrinks by more than half: the XML declaration, comment, metadata, layer group, editor attributes and default values disappear, and numbers like 28.123456 become 28.12. The previews look identical.

Example 2: icons for a sprite

For an icon set, turn on Remove width/height so every icon scales with CSS, keep titles off if your icon component adds an aria-label, and use precision 1 or 2. Small icons often end up under 300 bytes.

Example 3: an untrusted upload

Paste an SVG containing <script> or onload="…". The checks report what was found and removed. For user uploads on your own site, also sanitise on the server and serve SVGs with a restrictive Content-Security-Policy.

Getting the most out of optimization

Optimization removes waste, but the biggest wins come from the artwork itself: fewer nodes, simplified paths and merged shapes. After optimizing, serve SVGs with gzip or Brotli compression. Text-based SVG often compresses by another 60–70%.

Common mistakes

  • Too little precision on large or detailed drawings, which shifts shapes. Increase the decimal places.
  • Removing IDs that CSS or JavaScript uses. IDs referenced only from your own stylesheet or scripts aren’t visible to the optimizer; turn off Remove unused IDs in that case.
  • Removing titles from meaningful graphics, which hides them from screen readers.
  • Inlining large SVGs as data URIs. They can’t be cached separately; link them as files instead.

Frequently asked questions

Will optimizing change how my SVG looks?

Normally not. Only data that doesn't affect rendering is removed, and numbers are rounded to the precision you choose. Compare the two previews; if a detailed illustration shifts, raise the decimal places from 2 to 3.

Should I keep the <title> element?

Yes, for icons and illustrations that carry meaning. Screen readers announce the title of an inline SVG. Remove it only for decorative graphics, which should then have aria-hidden="true" where they're used.

Why remove width and height?

Without fixed dimensions, an SVG with a viewBox scales to whatever size CSS gives it, which is ideal for responsive layouts and icon systems. Keep them if the SVG is used as an image whose intrinsic size matters.

Are SVG files from other people safe?

SVG can contain JavaScript that runs when the file is opened directly or inlined into a page. This tool removes scripts and event handlers by default and previews files as images, where scripts never run.

How much smaller do SVGs get?

Exported icons and illustrations often shrink by 20–60%, mostly from removed editor metadata, rounded numbers and shorter path data. Hand-written SVGs gain less.

Sources