Start with a drawing

Open File → New to start a blank SVG, or use File → Open to choose an SVG file from your computer. The current drawing name appears in the file-name control at the top right.

Draw works in the browser. Local editing and saving do not require an account.

Create shapes

The drawing toolbar can add paths, rectangles, circles, lines, and polygons. Choose a tool, then draw it on the canvas. Once you have a shape you can continue editing it.

Shapes can be cut, copied, pasted, and duplicated. For a quick radial duplicate around the origin, select shape/s and use the duplicate control in the editing toolbar.

Edit paths and nodes

Choose Select shape or nodes and select a path to work on its points. Click a node, Shift-click additional nodes, or drag a box around multiple nodes. The node controls can set a point to Corner or Smooth, make a segment Straight or Curve, and add, merge or delete nodes.

Set fill and stroke

Use the Fill and Stroke controls in the top bar to choose the colors of the next shape created. once you have selected a shape you edit its colors on the right bar.

Logged-in users can load and save color sets through the account library, accessed from the Edit palette tool on the top toolbar. Editing a saved palette does not change an existing svg, it just keeps a set of colors you can pick from later, making it easier to keep branding colors consistent across drawings.

Select and edit

Hand pans the canvas without changing the current selection. Select shape or nodes selects individual components, while Select group selects its nearest containing SVG group.

Marquee select selects every shape whose complete bounds are inside the box you drag. Hold Shift to add shapes to or remove shapes from the current selection.

Canvas and tracing

Open Edit → Canvas dimensions to set the canvas width and height, choose how the space changes around an existing artwork, or fit the canvas to the artwork.

Use Edit → Trace background image to load a local image or URL as a temporary tracing reference. You can adjust its opacity, scale, and position, then hide or remove it from the View menu and tracing dialog.

Zoom and history

The top bar provides zoom out, zoom in, and reset-view controls. Edit → Undo and Edit → Redo step through drawing changes.

Keyboard shortcuts

H activates Hand, A selects shapes or nodes, G selects groups, V activates Marquee select, and P activates drawing. Hold Space to pan temporarily. Arrow keys nudge the selection by one screen pixel; hold Shift to nudge by ten. Ctrl/Cmd+Z undoes, Ctrl/Cmd+X cuts, Ctrl/Cmd+C copies, Ctrl/Cmd+V pastes, and Ctrl/Cmd+D duplicates.

Save and export

Use File → Save to computer to download the SVG. Use File → Copy SVG to clipboard to copy the current SVG markup for use elsewhere.

File → Save to account stores the drawing in your Phrond project library and requires an account. The account save action needs a drawing name first. You can add drawings to your Phrond projects to easily use them across the Phrond suite.