Getting started

Phrond Draw is a simple, easy to use in-browser SVG editor with the minimum set of features needed to make or edit basic vector art. Some functionality is still being developed. Most notably missing at the time of writing is the text tool, path/shape intersection, and advanced aligning and snapping.

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. Hold Alt/Option while dragging a node to snap it exactly onto a nearby node on the same shape or another shape. A highlighted target marks the snap; attached curve handles move with the node. Release Alt/Option to drag freely. Snapping aligns positions without merging the 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 Ctrl/Cmd+S or File → Save to computer to download the SVG, or to update a writable source opened through an Edit in Draw link. Use Ctrl/Cmd+Shift+S or File → Save to computer as... to download a separate copy when editing a linked source. 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.

Open artwork from another app

A game editor or asset library can link directly to Draw with ?source= followed by a URL-encoded SVG address. Follow the link to edit that artwork in Draw. If the source app supports saving back, Ctrl/Cmd+S or File → Save to computer updates the original SVG, so you can return to your game editor without downloading and reimporting a file. Read-only sources can still be edited and saved to your computer.

For example, suppose your local project contains /Users/you/my-game/art/sword.svg and your development server serves that project at http://localhost:3000/. The SVG address is http://localhost:3000/art/sword.svg, and the Draw link is:

https://phrond.com/tools/draw/?source=http%3A%2F%2Flocalhost%3A3000%2Fart%2Fsword.svg

The local server must be running and allow requests from Draw's origin (CORS); your browser may also request local-network permission. Draw loads HTTP or HTTPS addresses, not raw filesystem paths or file:// URLs. Without a development server, use File → Open to select the SVG directly. Saving back additionally requires the source app's save integration.

Connect a local app

Make an Edit in Draw link whose source value is the full URL of one SVG served by your app. Draw sends a GET request for that URL with Accept: image/svg+xml. Serve the SVG with Content-Type: image/svg+xml and allow cross-origin access from the Draw origin you use.

To enable save-back, include X-Fern-Draw-Writable: true in the SVG's GET response and expose that header with Access-Control-Expose-Headers: X-Fern-Draw-Writable. Draw then sends PUT to the same URL when the user presses Ctrl/Cmd+S or chooses File → Save to computer. The request body is the complete edited SVG, with Content-Type: image/svg+xml;charset=utf-8. Return a successful HTTP status only after storing it; Draw reports a failed save and keeps the edited drawing open if the request fails.

The local server must answer cross-origin OPTIONS requests for GET and PUT, allow the Content-Type request header, and return an appropriate Access-Control-Allow-Origin. A browser accessing a local server from the public Draw site may also send Access-Control-Request-Private-Network: true; if your server accepts that request, answer with Access-Control-Allow-Private-Network: true. Keep a write-capable development server bound to your local machine, restrict which files it can write, and validate the incoming SVG. CORS controls browser access; it is not authentication for a write endpoint.

If the writable response header is absent, Draw opens the SVG read-only from its source URL and the user can save a copy to their computer. Opening a different file or creating a new drawing clears the source link.