Back to tools
Vector graphics Code editing Free export

SVG Editor

Draw rectangles, circles, lines and freehand paths, add text, or import SVG files / paste code to edit. Export as PNG or SVG — all in your browser.

Share:
Privacy: All drawing, import and export happens locally in your browser. No graphics data is uploaded or stored.
Import / New
100%
Canvas 800 × 500
The canvas is empty Choose a drawing tool from the toolbar above to start,
or use Import / New above to open an SVG file or paste code
Drag to draw · click to select · drag to move · scroll to zoom · space / middle mouse / drag empty area to pan
Shortcuts
V select · R rectangle · C circle · E ellipse · T text · G polygon · O star · L line · P freehand · X eraser
Del delete · Ctrl+Z undo · Ctrl+Y redo · Ctrl+D duplicate · arrow keys nudge · space+drag pan

SVG code preview

0 lines
Export

Technical References

  1. SVG Specification — W3C: https://www.w3.org/TR/SVG2/
  2. SVG Element Reference — MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element

Frequently Asked Questions

What can the SVG editor do?

Draw rectangles, circles, ellipses, lines, polygons, stars, and freehand paths, add text, edit SVG code live, and export PNG / SVG files.

Who is it for?

Front-end developers and designers can quickly create and debug vector graphics with WYSIWYG editing — no installation needed.

Can I import an existing SVG file?

Yes. Open a local .svg file or paste SVG code to start editing.

Will the PNG export lose quality?

PNG is rendered at the current canvas size, so drawing at a larger scale keeps it sharp; SVG is a vector format that scales without loss at any size.

What's the difference between SVG and PNG?

SVG is vector — losslessly scalable and small, ideal for icons and the web. PNG is a bitmap, better for complex gradients and photographic images.

Technical References

  1. SVG Specification — W3C: https://www.w3.org/TR/SVG2/
  2. SVG Element Reference — MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element