SVG Editor

Edit SVG code with a live preview.

Live preview of the SVG

How to edit an SVG online

  1. Paste SVG code into the editor, open an .svg file, or drop one onto the editor. A small sample is loaded so you can try the tools straight away.
  2. Edit the code. The preview on the right updates as you type and tells you when the code has an error.
  3. Change the width, height or viewBox, or swap any colour with the colour pickers.
  4. Click Minify to shrink the file for the web, or Prettify to make it readable, then download it as SVG or PNG.

Why optimise SVG files

SVG files exported from design apps often carry editor metadata, hidden layers, long decimal numbers and comments that the browser never needs. Removing them with an optimiser such as SVGO commonly halves the file size, which speeds up page loads and keeps inline icons light. Smaller SVGs are also easier to read in code reviews.

Width, height and viewBox explained

  • viewBox defines the drawing's own coordinate system. With it, an SVG scales to any size without blurring.
  • width and height set the default display size. Leave them empty and set the size in CSS when you want the icon to be fully responsive.

SVG to PNG

Some platforms, such as social networks, email clients and app stores, do not accept SVG. Export a PNG at 2x or 4x scale to keep edges sharp on high density screens, with a transparent or solid background.

Safe and private

Everything runs in your browser. The preview renders the SVG as an image, so scripts inside untrusted files cannot run, and your code is never uploaded to a server.

Frequently asked questions

Is it safe to open an SVG file from someone else?

Yes, in this editor. SVG files can contain scripts, so the preview is shown as a plain image, which browsers never let run scripts. The code is only displayed as text, and the Minify option also removes scripts and comments.

What is the difference between Minify and Prettify?

Minify uses SVGO, the standard SVG optimiser, to remove editor metadata, comments, hidden elements and extra precision, which often makes the file 30 to 70 percent smaller. Prettify keeps the content and lays the code out with clean indentation so it is easy to read and edit.

How do I export a sharp PNG?

Pick a scale of 2x or 4x before you click Download PNG. The SVG is drawn at that size, so the PNG stays crisp on high resolution screens and in print. The background stays transparent unless you choose a colour.

Why does my SVG not scale when I change the width?

An SVG needs a viewBox to scale its drawing. If the file has a width and height but no viewBox, click "Add viewBox" first; it is created from the current size so the drawing scales cleanly.

Are my files uploaded?

No. Editing, optimising and exporting all happen in your browser. Your SVG code and images never leave your device.

More image tools

All image tools
Image tools

JPG Compress

Shrink JPG files without visible quality loss.

Runs in your browser Image tools

PNG Compress

Lossy PNG compression with transparency kept.

Runs in your browser Image tools

WebP Compress

Re-encode WebP images at a smaller size.

Runs in your browser Image tools

WebP Converter

Convert JPG and PNG to WebP, or WebP back.

Runs in your browser Image tools

Image to PDF

Combine images into one PDF.

Runs in your browser Image tools

Image to Text (OCR)

Read text from images with OCR.

Runs in your browser