Does it send data to a server?

No. Everything runs in your browser.

Can I add custom elements?

Yes. The editor accepts any valid SVG including filters, gradients, masks, and animations.

SVG Editor

Edit, preview, optimise, and export SVG graphics

Insert

SVG Code515 bytes

Preview

Free Online SVG Editor — Edit, Preview, and Export SVG Code

SVG (Scalable Vector Graphics) is the standard format for vector images on the web. Unlike PNG or JPEG, SVG files are written in XML. They scale to any size without losing quality, load fast, and are fully editable with code. They are used for icons, logos, illustrations, charts, animations, and interactive graphics. If you work with web design, development, or digital marketing, you will use SVG files regularly.

This free SVG Editor lets you write and edit SVG code in a dark-themed code editor with a live preview panel. You see changes instantly. Insert shapes from the toolbar — rectangles, circles, lines, text, polygons, stars, and paths — and customise them in code. When you are done, copy the SVG, download it as an SVG file, or export it as a high-resolution PNG or JPG image. You can also run the built-in optimiser to remove comments, collapse whitespace, and reduce file size.

Everything runs in your browser. No data is uploaded. No account required. The split-view layout lets you edit code and see the result side by side on desktop, and stacks vertically on mobile for a fully responsive experience.

SVG Editor Features

Live Code Editor

Dark-themed code editor with monospace font. Write or paste SVG code and see changes reflected in the preview panel instantly.

Shape Toolbar

Insert rectangles, circles, ellipses, lines, text, polygons, stars, and bezier paths with one click. Customise attributes in code.

Multi-Format Export

Download as SVG for vector use, or export as 2x PNG or JPG for raster use. All exports are generated client-side in your browser.

SVG Optimiser

Remove comments, collapse whitespace, and strip unnecessary characters. See the byte count and percentage saved instantly.

Split / Code / Preview

Three view modes: split (side by side), code only, or preview only. The layout adapts to your screen size.

Checkerboard Preview

The preview panel uses a checkerboard background so you can clearly see transparent areas in your SVG.

Frequently Asked Questions

Is this SVG editor free?+

Yes, completely free with no account, no watermark, and no limits on file size or usage.

Can I import an existing SVG?+

Yes. Paste your SVG code into the editor. The preview updates immediately.

What export formats are supported?+

SVG (vector), PNG (2x resolution raster), and JPG (2x resolution raster).

Does the optimiser change my SVG?+

It removes comments and collapses whitespace. It does not modify shapes, colours, or attributes.

Does this tool send data to a server?+

No. All editing, previewing, and exporting runs entirely in your browser.

Can I add custom SVG elements from code?+

Yes. The editor accepts any valid SVG code including filters, gradients, masks, animations, and embedded styles.

Does it work on mobile?+

Yes. The layout is fully responsive. On smaller screens, the editor and preview stack vertically.

What is the checkerboard background?+

It helps you see transparent areas in your SVG, similar to how image editors show transparency.