Skip to main content
Bethemesh
Images & graphics

SVG optimizer

Optimize SVG files locally by removing comments, metadata and editor-specific markup, collapsing whitespace and rounding decimal values.

  • Clipboard
  • Export

Embed this widget

Customize the result, check the live preview, then copy the code.

Preview

Embed code type

Code to copy

Responsive and automatically resized by Bethemesh.

SVG source

Preview

Optimization options

Was this tool useful?

How does this tool work?

An SVG exported from Inkscape, Illustrator or Figma often contains more text than drawing: XML declaration, comments, metadata, editor-specific attributes and five-decimal coordinates. This optimizer removes that clutter and rounds the numbers without turning the drawing into a raster image: the file stays vector, readable and editable. Everything happens in your browser.

Paste SVG code or import an .svg file. The XML declaration and DOCTYPE are always removed; a comment placed before the svg tag, common with editors, is accepted. Click Optimize SVG: the result, its preview and three figures appear, original size, optimized size and saving in bytes and percent.

Four options are on by default: remove comments, remove metadata blocks, remove Inkscape and Sodipodi data (inkscape: and sodipodi: attributes and their namespaces) and collapse whitespace between tags. A fifth, off by default, removes width and height from the root svg tag when a viewBox exists; rectangles and images inside keep theirs.

Decimal precision, from 0 to 8 digits (3 by default), rounds the numbers in attribute values: paths, coordinates, viewBox, transforms. Useless zeros disappear (8.00000 becomes 8, 0.5 becomes .5). IDs, classes, links and displayed text are not changed. Copy the code or download optimized.svg.

How to use this tool

  1. Add the SVG

    Paste the code or import a complete .svg file.

  2. Set the options

    Keep the defaults or adjust the decimal precision.

  3. Check and export

    Check the preview and the saving, then copy or download the result.

How the displayed saving is calculated

Sizes are measured in UTF-8 bytes, before and after optimization.

Saving in percent

g = (o − n) ÷ o × 100

For the Inkscape icon: (365 − 148) ÷ 365 × 100 = 59.5%.

g
saving in percent
o
original size in bytes
n
optimized size in bytes

Use cases

Website icons

Slim down icons exported from an editor before embedding them in HTML or a sprite.

Inline SVG in code

Get compact, clean markup to paste into a component or an email.

Logo for a data URI

Shrink the SVG before encoding it in Base64 in a stylesheet.

Examples

Icon exported from Inkscape

Default settings. The drawing is identical: only the useless text and the decimals beyond the third are gone.

Input

XML declaration, comment, metadata, inkscape: attributes, path M12.34567 8.00000 L35.65433 8.00000 L24.00000 40.12345 Z — 365 bytes

Result

<path d="M12.346 8 L35.654 8 L24 40.123 Z" …> — 148 bytes, 217 bytes saved (59.5%)

Precision reduced to 1

A 0.05-unit shift is invisible on a 48-unit icon but can distort a detailed plan or map: check the preview.

Input

Same 48 × 48 icon, precision 1

Result

M12.3 8 L35.7 8 L24 40.1 Z — 142 bytes (61.1%)

Tips and best practices

  • Keep the viewBox: it is what lets the SVG scale to any size.
  • Only remove width and height if CSS sets the size, otherwise the image may render at 100% width.
  • One or two decimals are usually enough for an icon; keep three or more for a very detailed drawing.
  • Keep the editor's source file: removed data (layers, guides) cannot be recovered from the optimized SVG.

Sources and references

Frequently asked questions

Does the rendering change?

Not with the default options on an ordinary drawing. A very low precision can move points slightly: compare with the preview.

Are colours and IDs changed?

No. Hex colours, id, class and links stay intact, as does the text inside text tags.

Is Illustrator or Figma data removed?

Comments and metadata, yes. The proprietary attributes removed are those of Inkscape and Sodipodi; other editors' remain.

Does the tool merge paths or simplify shapes?

No. It cleans the code and rounds numbers without rewriting the geometry the way SVGO would.

Does the file stay editable?

Yes, it remains a text SVG that any vector or code editor can open.

Is my SVG uploaded to a server?

No. Optimization is done by your browser.

Related tools

Keep going with these tools

Tools similar or complementary to this one.

Similar tools

Convert SVG

Convert SVG files to PNG, JPEG or WebP with preview and output settings.

Images & graphicsUse this tool

Favicon generator

Create a favicon.ico and a site’s PNG icons (16 to 512 px) from one image, in your browser.

Images & graphicsUse this tool

Read next

GuideFormatsBeginner

SVG: Understanding the Vector Format

Learn how SVG describes shapes, uses viewBox, integrates into Web pages, and should be handled for responsiveness, accessibility, and security.

31 August 202622 min
TutorialBest practicesBeginner

Optimize images for the Web without losing quality

Resize, compress and choose between WebP, AVIF and other formats with a practical workflow that reduces file size without unnecessary visual loss.

30 August 20264 min