Share:
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
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
- SVG Specification — W3C: https://www.w3.org/TR/SVG2/
- 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
- SVG Specification — W3C: https://www.w3.org/TR/SVG2/
- SVG Element Reference — MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element