SVG Editor

Yes — this SVG editor is 100% free with free to try, no watermarks, and no usage limits. Because all processing happens in your browser, there are no server costs, so the tool will remain free.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.