A Real SVG Editor — Not Just a Color Picker
We rebuilt our SVG editor from scratch as a full Figma-style design tool. Draw shapes, move and resize with handles, manage layers, undo everything, and export production-ready files — all in your browser.
Draw & Create
Rectangle, ellipse, line, and text tools. Click to place, drag to size. Snap to grid with Shift.
Select & Transform
Click to select, drag to move, handles to resize and rotate. Shift+click for multi-select. Rubber-band marquee.
Import Any SVG
Drag and drop or click Import. Every path, shape, and text element becomes a selectable, editable layer.
Layer Management
Named layers with visibility, locking, and reorder. Double-click to rename elements. Z-order with [ ] keys.
Undo Everything
Full history for every action — draw, move, resize, color change. Ctrl+Z / Ctrl+Y with unlimited depth.
Copy, Paste & Align
Ctrl+C/V, Ctrl+D to duplicate. Multi-select alignment buttons. Right-click context menu for quick actions.
Edit Path Code
Double-click any path to open a code editor for the raw d attribute. Edit SVG path commands directly.
Snap to Grid
Hold Shift or toggle Snap for pixel-perfect placement. 10px grid keeps everything aligned.
Export SVG & PNG
Download clean SVG or 2× PNG. Your edits are baked in — ready for web, print, or further editing.
What changed in the new editor?
The previous SVG editor was an upload-and-tweak tool — you could change colors and opacity, but not much else. We rebuilt it from the ground up:
- → Full drawing tools (shapes, text) — create from scratch, not just edit
- → Figma-style selection with resize handles, rotation, and multi-select
- → Proper layer system with naming, locking, visibility, and reorder
- → Unlimited undo/redo, copy/paste, snap-to-grid, alignment tools
- → Infinite canvas with zoom and pan — elements live beyond the document
- → Right-click context menu, keyboard shortcuts for everything
- → AI-powered generation and recoloring (coming soon)
Frequently Asked Questions
Is this online SVG editor completely free?
Yes — this SVG editor is 100% free with no signup, no watermarks, and no usage limits. Because all processing happens in your browser, there are no server costs, so the tool will remain free.
How is this different from the old SVG editor?
We completely rebuilt the editor from the ground up. The previous version only let you change colors and opacity on uploaded SVGs. The new editor is a full Figma-style design tool — you can draw shapes, move and resize elements, manage layers, undo/redo, copy/paste, snap to grid, and align elements. It's a fundamentally different tool.
How do I edit an SVG file online?
Drag and drop any SVG file onto the canvas, or click Import in the top bar. Every element — paths, shapes, text — appears in the Layers panel as a selectable, draggable, recolorable layer. Click any element to select it, then adjust properties in the right panel. When done, click Export to save.
Are my SVG files uploaded to a server?
No. All editing happens locally in your browser using JavaScript. Your SVG files never leave your device, making this tool safe for proprietary logos, NDA-protected assets, and confidential design work.
What SVG elements can I edit?
Every visual SVG element is fully editable — paths, rectangles, circles, ellipses, lines, polygons, polylines, and text. You can change fill, stroke, opacity, position, size, and rotation. You can also draw new shapes, manage layers, and reorder elements.
How do I change SVG colors online?
Click any element to select it, then use the color picker or type a hex code in the Properties panel. You can change both fill and stroke colors independently. Select multiple elements with Shift+click to batch-edit. Changes preview in real time on the canvas.
Can I undo changes?
Yes — press Ctrl+Z (or Cmd+Z on Mac) to undo, and Ctrl+Y to redo. The editor keeps a full history of every action — drawing, moving, resizing, color changes — so you can step back as far as needed.
What keyboard shortcuts are available?
V = Select, R = Rectangle, E = Ellipse, L = Line, T = Text, H = Pan, F = Fullscreen. Delete removes elements. Ctrl+C/V to copy/paste. Ctrl+D duplicates. [ and ] change z-order. Arrow keys nudge elements (Shift = bigger nudge). Scroll wheel zooms. Space + drag pans.
Can I select and move multiple elements at once?
Yes — Shift+click to add elements to your selection, or drag on empty canvas to rubber-band select multiple elements. You can then move, delete, duplicate, or align the entire group. The Properties panel shows alignment buttons when multiple elements are selected.
What file formats can I export?
The editor exports clean SVG files with all your edits applied, and PNG at 2× resolution via the Export menu. For React projects, use our SVG to React tool to get a typed JSX component.
Can I edit SVG path data directly?
Yes — double-click any path element on the canvas to open a code editor for its d attribute. You can edit the raw SVG path commands and apply the changes. This is useful for precise adjustments that the visual tools don't cover.
Is there a file size limit?
There is no hard limit since all processing is local. SVG files of any size work — complex files with many elements may be slightly slower to parse on first import.
How does the layer system work?
Every element belongs to a layer. Use the Layers panel to add, rename, delete, reorder, lock, or hide layers. Double-click any element name to rename it. Control stacking order with [ and ] shortcuts or the forward/backward buttons in the Properties panel.
Want AI to create an SVG for you? Try our generator free