SVG editor — edit SVG files online, free
Sourceempty
Open a file, change what needs changing, take it out again as SVG, PNG or a React component. Nothing is uploaded, there is no account, and the document never leaves the tab.
The file you open is parsed with the browser's own DOMParser and held as a live document. The layers panel is that document's element tree — selecting a row selects the node, the eye toggles its visibility and the padlock keeps it out of the way of canvas clicks. The inspector edits the selection's fill, stroke (width, cap, join, dashes), opacity, type settings and transform, writing real attributes rather than a private overlay format.
The tool strip on the canvas is the familiar Illustrator set with the familiar keys: selection (V), direct selection (A), rectangle (R), ellipse (E), line (L), polygon and star (N), pen (P), pencil (B), paintbrush (⇧B), blob brush (D), type (T) and hand (H). Shapes are drawn straight into the document as <rect>, <ellipse>, <line>, <path> and <text> with the fill and stroke shown at the bottom of the strip. The pen makes curves when you drag out of a click; the direct-selection tool shows every anchor and handle so you can move them, add points by double-clicking a segment, switch a point between corner and smooth with an Alt-click, and round, chamfer or invert selected corners from the options bar. Shift-click or drag a marquee to select several objects; the selection box has resize and rotate handles, and the Object menu holds group, arrange, flip, align and the Pathfinder booleans (unite, minus front, intersect, exclude). For building shapes visually there is a full Shape Builder (⇧M) — drag across overlapping regions to merge them, Alt-drag to erase, click to carve one region out — and a Live Paint bucket (⇧K) that detects the enclosed regions of any line art, open paths included, fills them with a click, colours edges, seals small gaps and re-flows the fills when the paths move. Cutting is covered by the eraser (⇧E), scissors (C) and knife (K). Strokes can vary in width along their length with the Width tool (W) — drag the outline to plant width points, pick taper profiles, expand to a plain path — and the paintbrush draws calligraphic, art, scatter and pattern strokes with pen pressure. Fills can be solid, linear or radial gradients, edited in the inspector or by dragging the gradient's points on the canvas, and one object can stack several fills and strokes with their own opacities, reordered in the Appearance section and saved as graphic styles. Smart guides snap what you move or draw to other objects, the artboard, the grid and guides dragged out of the rulers. The Appearance panel adds drop shadows, glows, blurs and colour adjustments as a real <filter> chain — reorderable — and sets blend modes; the Object menu makes and releases clipping and opacity masks, turns a selection into a reusable symbol (F8), sets type on a path, places raster or SVG files and traces a placed image into paths through an Image Trace dialog with presets, colour count, accuracy, noise and background controls and a live preview. Type is more than a label: drag with the type tool for an area-text box that wraps its lines, link the overflow into a second box, and set tracking, leading, OpenType features (ligatures, small caps, figure styles), kerning and a variable-font weight axis in the inspector — reusable as saved text styles. Double-click any text to edit it on the canvas; Enter in the inspector's text field starts a new line. With nothing selected the inspector lists the document's colours as swatches — click one to recolour it everywhere. Your working copy is saved in this browser as you go, so a closed tab can be restored and recent files reopened; nothing is uploaded. Right-click the canvas for the usual context menu, press ? for the full shortcut list, and use the Export dialog (⌘⇧E) for the selection only, content bounds, exact pixel widths, JPEG, WebP or PDF. Several files can be open at once in tabs, each with its own history; artboards (⇧O) mark export crops inside one document; and every shortcut can be rebound in the ? panel. Start with an empty artboard if you have nothing to open.
The code panel is bound in both directions. Editing markup reparses the document and the canvas follows; editing on the canvas rewrites the markup. When markup will not parse, the status line says so and the canvas keeps the last good state instead of blanking. Nothing is uploaded — the document only ever exists in the tab, and closing it discards the work.
This is not a clone of Illustrator, Inkscape or Figma — it is an SVG editor that works in the file's own terms. The drawing side now goes well past the essentials: bezier paths with anchor editing and live corners, primitives, booleans, Shape Builder, Live Paint, calligraphic / art / scatter / pattern brushes with pressure, a blob brush, variable-width strokes, eraser / scissors / knife, gradients on fills and strokes, stacked fills and strokes with graphic styles, outline stroke, masks, symbols, artboards, a reorderable effects chain, area text with overflow linking and OpenType controls, and a full Image Trace dialog. What it deliberately does not have is a proprietary document format: everything above writes plain SVG (advanced state rides in data- attributes), so a file made here opens anywhere. There is still no gradient mesh. And it remains just as good at the quick job it started with: a colour swapped, a stray group deleted, a shape nudged into alignment, a viewBox corrected, an export at 2× — without opening a full desktop application.
When you have been sent an icon and need to see what is actually in it before it goes into a codebase. When a logo arrives in the wrong colour and you want the file changed rather than a CSS filter stacked on top. When something renders wrong and you want the markup and the picture side by side to find out why — that is what the viewer does read-only and this does with editing. And as a staging area: open a file, fix it, then send it through the optimizer or straight out as JSX or PNG.
⌘S — download the SVG. ⌘⇧C — copy the markup.⌘E — open the export menu: SVG, markup, JSX, or PNG at 1×, 2× and 4×.⌘Z and ⌘⇧Z — undo and redo. ⌘D — duplicate the selection. ⌘C, ⌘X, ⌘V — copy, cut and paste objects.V A R E L N P B T H C K W D — tools; ⇧M Shape Builder, ⇧K Live Paint, ⇧B paintbrush, ⇧E eraser, ⇧T type on a path, ⇧O artboards. Space — pan while held. Arrow keys nudge the selection (or the selected anchor points) by 1 unit, ⇧ by 10. ↑/↓ while dragging a polygon change its sides.⌘⇧D — transform again. ⌘8 / ⌥⌘8 — make and release a compound path. ⌘7 / ⌥⌘7 — make and release a clipping mask. F8 — make a symbol. ⌘U — smart guides on/off. ⌘R — rulers (drag from a ruler to add a guide, drop it back to remove).⌘A — select all. ⌘G / ⌘⇧G — group and ungroup. ⌘] / ⌘[ — bring forward, send backward (⇧ for front and back). ⌘2 — lock the selection, ⌥⌘2 — unlock all.⌘0 — reset the zoom to 100%. ⇧1 — fit. ⌘' — toggle the grid. M — measure tool. ? — every shortcut, in the editor.style attribute beats a presentation attribute, and a stylesheet inside <defs> beats both. Check the code panel for what is really on the element.