Free, private, browser-only utilities
Advertisement · 728 × 90

SVG Editor & Vector Optimizer

View and edit raw SVG markup, strip unused metadata and XML cruft, and export clean SVGs to PNG or JPG.

Drag & drop an .svg file, or click to browse

Or just start typing/pasting SVG markup in the editor below.

SVG code

3 elements · 270 Bytes

Live preview
Export as raster:

SVG files exported from design tools like Illustrator, Figma, or Inkscape are often bloated with editor metadata, comments, and unused namespace declarations that add kilobytes without changing how the graphic looks. This SVG Editor & Vector Optimizer lets you view and edit the raw markup, strip that cruft with one click, and export the result as a clean file — or as a PNG/JPG raster.

It's a genuine code editor, not just an upload-and-download tool: paste markup directly, watch the live preview update as you type, and see exactly how many elements and bytes your optimization pass removed.

How to use the SVG Editor

  1. 1

    Load an SVG

    Drag an .svg file onto the upload area, or simply paste or type SVG markup straight into the code editor.

  2. 2

    Review the live preview

    The right-hand panel renders your current markup on a checkerboard background so you can spot transparency and layout issues immediately.

  3. 3

    Clean & optimize

    Click Clean & optimize to strip XML comments, editor-specific namespaces (like Inkscape and Sodipodi attributes), metadata, and redundant whitespace in one pass.

  4. 4

    Check the savings

    The byte count and element count below the editor update instantly, showing exactly how much smaller the optimized markup is.

  5. 5

    Keep editing by hand

    Because the code is just a plain textarea, you can manually tweak colors, paths, or attributes and see the preview update live.

  6. 6

    Export

    Download the cleaned .svg directly, or export a rasterized PNG or JPG version at the SVG's native dimensions.

Why convert in your browser instead of uploading to a server?

No design tool required

You don't need Illustrator, Inkscape, or a paid subscription installed to clean up an SVG — a text editor and a browser are enough.

Nothing sent to a conversion server

Because the parsing, cleanup, and raster export all happen with plain JavaScript string processing and the Canvas API, your vector artwork — which may represent real design IP — is never transmitted anywhere.

Scripts are never executed

The live preview renders through an image element rather than injecting markup into the page, and the optimizer explicitly strips script tags and inline event handlers, so pasting an untrusted SVG can't run code in your browser.

Instant feedback loop

Because there's no upload/processing/download round trip, you can iterate on an SVG dozens of times in the time a server-based tool would take for one conversion.

Frequently asked questions

What exactly does 'optimize' remove from my SVG?+

By default it strips XML comments, the XML declaration and DOCTYPE, metadata, title, and desc elements, editor-specific namespaces like Inkscape and Sodipodi attributes, and collapses unnecessary whitespace between tags.

Will optimizing change how my SVG looks?+

No — every pass removes only metadata, comments, and formatting whitespace, never the paths, shapes, or styling that determine the visual output.

Can I convert an SVG to PNG or JPG?+

Yes. Use the Export as raster buttons to rasterize the current editor contents to PNG (with transparency preserved) or JPG (flattened onto a white background) at the SVG's intrinsic size.

Is it safe to paste an SVG I downloaded from somewhere else?+

The preview strips script tags and inline event handler attributes (like onload) before rendering, and renders through an image element rather than injecting markup into the live page, so embedded scripts can't execute.

Why is my exported raster image blurry?+

Raster export uses the SVG's declared width/height or viewBox dimensions. If your SVG doesn't specify a size, it falls back to 1024x1024 — for a sharper result, add explicit width/height attributes to the SVG before exporting.

Can I undo the optimization?+

Yes — click Reset at any time to restore the markup exactly as it was when you loaded or last pasted it.

For developers shipping icon sets or illustrations, a few kilobytes saved per SVG adds up fast across a whole site — and cleaning markup by hand in a code editor gives you full visibility into what's actually changing, unlike black-box optimizers.

Because everything runs as plain JavaScript in your tab, there's no file size limit, no daily quota, and no risk of a design file leaking through a third-party upload.