SVG EditOpen or create an SVG
Choose File → Open SVG or drop SVG files outside the artboards to open them as documents. Drop an SVG onto an artboard to place it at the pointer as a nested SVG. The placed SVG is selected, and Ctrl Z undoes its placement. Files with missing or incorrect SVG namespace declarations, or without an outer <svg> element also work in both locations. Use File → New document to choose an artboard size. Draw with the Rectangle, Ellipse, Line, Star, Text, Pencil or Pen tool.
The Layers panel lists your objects. Click an object on the canvas or select it in Layers to edit its fill, stroke, opacity and other properties. Number and text fields apply on blur or Enter; Escape restores an uncommitted field edit.
Edit nested SVGs as artboards
Select a nested SVG and choose Open as artboard in the contextual toolbar or right-click menu. The parent and nested artwork appear side by side in the same tab. Click an artboard or its name to edit it, and choose Fit all to see every board. Drag an artboard name or the grip before it to move it. Nearby boards move aside automatically to prevent overlap. You can also focus the name or grip and use the arrow keys; hold Shift for larger steps. Escape cancels a drag and restores the arrangement. Moving an artboard changes only its saved workspace position. Edits sync with the parent automatically; each board keeps its own selection, source drafts and undo history.
Open in tab moves an artboard into its own tab. Hiding an artboard keeps its artwork in the parent SVG. The workspace remembers your artboards and active view. Save SVG saves the whole document; Export lets you choose the whole document or the active artboard.
Unwrap a nested SVG
Choose Unwrap SVG in the contextual toolbar or right-click menu to convert a nested SVG into an editable group. Position, viewBox scaling, viewport clipping, paint and custom attributes are preserved. Undo restores the nested SVG. If CSS rules, references or effects prevent a faithful conversion, the editor explains the issue and keeps the drawing unchanged.
Edit a nested SVG in its own tab
Right-click a nested SVG on the canvas or in Layers and choose Edit in new tab. The edit button on its Layers row offers Edit in new tab and Open as artboard. Make changes independently, then click Apply to parent to update the original drawing while preserving its position.
Check Keep in sync to update both tabs automatically when either version changes. Undo and source edits also synchronize. Use Update from parent to load the parent version; the previous edits remain in the tab’s undo history. If both versions changed independently, synchronization pauses so you can choose which to keep. Shared styles and definitions should be edited in the parent drawing. The parent link returns to that drawing, and links and sync preferences are recovered with your local workspace.
Shape buttons and Advanced tools
Rectangle, Ellipse and Star are exposed separately on the left. Every shape button has the same complete dropdown, so choosing another shape changes only that button. Choices are remembered independently. Other flyouts group related tools; Customize toolbar pins favorites. Use arrow keys, Home/End, letters and Escape to navigate a flyout.
Shape choices include polygons, arcs, pies, rings, custom corners, arrows, grids, spirals and decorative shapes. Hold Shift to constrain the proportions and Alt to draw from the center. Advanced shows defaults for the next shape while drawing. Switch to Move and select a live shape to change its parameters. The parameters survive Save SVG and reopening; manual path edits turn it into ordinary editable geometry.
Design contains everyday geometry and appearance. Advanced holds gradients, cutting and path operations, typography, symbols, repeats, masks, effects, tracing and distortion. The < button opens element source. All inspector tabs share blue-gray fields, captions inside compact controls, and one green outer border for focus.
Use Vector brush for pressure-sensitive outlines and Width to adjust them. Select closed opaque filled shapes for Shape Builder or Vector fill. Outline strokes before constructing regions or erasing. Knife cuts across selected shapes; Scissors cuts a path at a clicked position. Geometry operations report unsupported appearance before changing the document.
The Gradient tool edits linear and radial gradients on the canvas, including both radial axes and the focal point. X switches fill/stroke targets; Shift+X swaps paints. The eyedropper samples the active target, or full appearance with Alt. Double-click text to edit on the canvas; Ctrl+Enter commits and Escape cancels. Text frames wrap to their W/H dimensions and report overflow. Drag from a ruler to add a guide. New and existing guides use the toolbar’s grid and object snapping settings, including selected artwork’s edges and centers. Object alignment takes priority over the grid. Turn both settings off for free movement, or hold Ctrl/Command to bypass snapping temporarily. Advanced manages guide locking and removal.
Edit nodes and Bézier curves
Use the Pen tool to place path nodes. Click for a corner, or drag while placing a node to create a curve. Press Enter to finish the path.
Switch to the Node tool and click an anchor to reveal its Bézier handles. Square nodes have independent handles; round nodes have aligned handles. Corner mode preserves existing curves. The Incoming and Outgoing controls let you curve either side of a node independently.
Link handles to keep them exactly opposite while moving one. Unlink them to adjust each handle independently. Smooth aligns the two handles while preserving their lengths. Symmetric aligns them with equal lengths. Corner makes the handles independent; turn off Incoming or Outgoing to remove a curve handle.
For a rectangle or another basic shape, use More → Convert and edit nodes in the toolbar, or choose Object → Convert to path. The Path menu can insert or delete nodes, split a path at the selected node, join open paths or ends, and open or close a subpath.
Group, resize and snap objects
Hold Shift while clicking objects to select more than one, or drag a selection marquee with the Move tool. Move the selection together, group it with Ctrl G, or ungroup with Ctrl Shift G. Use Ctrl + click to step into a nested group or Alt + click for the exact element under the pointer. Hold Shift to add a selection. Drag the Layers panel’s right divider to widen it, and use group arrows to collapse nesting. Drag Layers rows to reorder them. Drop in the middle of a group row to move inside it, or onto Artboard to move out. The editor preserves position and inherited paint, and blocks moves that would alter group effects.
Thin solid strokes have a six-pixel picking tolerance. In the Move tool, hold M and drag anywhere to move the existing selection. Fill and stroke palettes show detected document colors and separate recent histories. Drag any corner or edge of the selection box to resize. During a gesture, the status bar shows the available modifiers:
- Resize: Shift keeps the aspect ratio; Alt resizes from the center; Ctrl temporarily bypasses all snapping.
- Move: Shift locks movement to the initial horizontal or vertical direction; Ctrl temporarily bypasses all snapping.
- Cancel: Escape cancels the current gesture.
Enable grid and smart object snapping independently in the toolbar. Set grid spacing in SVG units. Smart snapping detects other elements’ top, bottom, left, right and centers, with orange alignment guides.
On macOS, use Command in place of Ctrl. Arrange controls also align, distribute, reorder, rotate and reflect objects.
Edit SVG source alongside the canvas
Open SVG source to inspect the whole document or one selected element. Each open SVG has its own tab, source draft, undo history and zoom. New documents appear on the left; use the mouse wheel to scroll an overflowing tab strip. Close tabs with × or middle-click, drag them to reorder, and press Ctrl Shift T to reopen a recently closed document. The editor highlights XML syntax, formats source for reading and supports a word-wrap toggle. Drag the left divider to widen the panel. Selecting artwork reveals its layer and highlights the complete SVG element without moving keyboard focus.
Put the caret in text content or an attribute to select its element and highlight the corresponding inspector field. Focusing an inspector field reveals and highlights its SVG property without taking keyboard focus away from the field. Inline styles and inherited presentation properties are linked where a corresponding source property exists.
Valid edits update the canvas live. If the XML is incomplete or invalid, the last valid drawing remains visible while your draft stays available. Fix the draft or use Revert draft before exporting. Source undo is kept separate for each document and selection context.
Custom attributes such as data-loc and data-trail-value stay on elements when editing geometry and saving.
Preview backgrounds, zoom and pan
Use the Workarea control to switch between white, dark and transparent checkerboard backgrounds. This helps inspect white or black artwork. These preview backgrounds are never added to an export. Artwork beyond the page stays visible while editing; export retains the document’s original boundaries.
In the Zoom tool, left-click zooms in, right-click zooms out and middle-click restores 100%. Hold Alt to temporarily switch between Zoom and Hand. Hold Space to pan from another tool. Shift 1 fits the artboard. The wheel pans vertically; Shift + wheel pans horizontally; Ctrl/Command + wheel zooms around the pointer. Trackpads retain native two-axis panning.
Save compact SVG or export PNG, JPG and WebP
File → Save (Ctrl/Command+S) updates the opened SVG directly after you grant file access. For a new document or one without file access, choose a location on the first save. Save As (Ctrl/Command+Shift+S) saves to a new location and makes it the current file. Save Copy (Ctrl/Command+Alt+S) writes a separate editable SVG while keeping the current file and its unsaved changes. File associations are retained with the local workspace; the browser may ask for access again after reopening. Browsers without direct file access download an SVG instead. All saves write compact SVG, regardless of how the source panel is formatted. Redundant formatting, comments and removable editor metadata are stripped while meaningful text whitespace and custom attributes are preserved.
Edit → Remove editor metadata is enabled when removable metadata, such as Sodipodi or Inkscape authoring data, is detected. It cleans the current document and can be undone. Data that may affect CSS rendering is preserved.
Object → Bake transforms to geometry converts supported transformations into path coordinates. Unsupported combinations keep their transform to preserve appearance. Path → Absolute path commands converts relative path commands to absolute coordinates.
Choose Export (Ctrl/Command+Shift+E) to download SVG, PNG, JPG or WebP. Export leaves the current file association and unsaved changes intact. PNG and WebP preserve transparency; JPG uses the chosen background color. JPG and WebP use the quality setting. Raster exports support a scale setting for different pixel dimensions and include used downloaded fonts. SVG export can optionally embed fonts; compact font references remain the default. Roboto, Roboto Condensed, Valley Sans and Michroma are bundled for offline use. The Typography inspector can load another family by its Google Fonts name or specimen link and cache it in IndexedDB.
Local drafts and offline editing
SVG Edit autosaves open SVGs, source drafts, tab order, zoom/pan, preferences and ten recently closed documents in IndexedDB for this browser profile. The bottom status bar confirms when the save has completed. Export SVG copies to keep portable backups; clearing site data also clears local drafts. Changing browsers or moving to a different site address does not move those drafts automatically.
Install the production app from your browser’s install menu to use it as a desktop PWA. After the app and its assets have been downloaded, editing is available offline. Development builds do not install the offline service worker.
Supported SVG features
The editor supports shapes, Bézier paths, node editing, groups, Boolean path operations, clipping, linear gradients, transforms, typography, SVG source and raster export. Each SVG has one outer viewport. Nested SVGs can be edited as linked artboards in the same tab, and several documents can remain open in independent tabs. Exports remain standard SVG files. Advanced adds symbols, repeats, masks, blur/shadow, a four-corner color mesh, threshold image tracing and path distortions. The mesh uses portable SVG tiles; tracing extracts dark regions from an embedded raster; distortions sample the path outline. Arbitrary Bézier meshes, multicolor autotrace, CMYK/ICC/PDF-X output and an animation timeline are not provided.
Static HTML in foreignObject is supported as one selectable object: move, resize, rotate, group and edit it through SVG source. Use the XHTML namespace (xmlns="http://www.w3.org/1999/xhtml") and well-formed XML. HTML whitespace and namespaces survive formatting and saving; wireframe views show the object bounds. Scripts, executable event attributes, forms, frames, active HTML features and external resources are rejected. Embedded raster images, font data and internal references are supported. Embedded HTML rendering depends on the browser; some other SVG applications do not display it. Operations that would break references or change unsupported compositing report the issue instead of silently modifying the artwork.
Ready to work? Open SVG Edit. The editor starts directly in the workspace.