SVG

The SVG editor opens any .svg text file. It offers two views over the same source: a Design canvas for working with shapes visually, and a Raw markup editor. New .svg files open on the Design canvas.

Interactive SVG editorThe real Worktray editor, running on an in-memory file. Nothing here is saved to a tray — click to draw, select, and edit.

Try the editor

Views

Switch between the two views with the toolbar’s segmented control:

• Design renders sanitized SVG on a visual canvas with tools for drawing, selecting, and transforming shapes.
• Raw is a syntax-highlighted markup editor for hand-editing the source.

Both views edit the same file. A change you make in Design is reflected in the Raw markup and vice versa, so you can draw a shape visually and then fine-tune its attributes by hand.

The canvas

The Design canvas pans and zooms independently of the file. Use it to work closely on detail or step back to see the whole drawing; reset view returns to a framing of the artboard.

A dashed border marks the artboard — the SVG’s real bounds, taken from its viewBox or width/height. Shapes may extend past that border while you work; the border always shows where the file’s actual exported bounds sit, so you can tell on-artboard content from scratch space at a glance.

Tools

A floating dock at the bottom of the canvas holds the drawing tools:

Tool	What it does
Select	Pick a shape, then move, resize, or rotate it. The default tool.
Rectangle	Drag out a new rectangle.
Ellipse	Drag out a new ellipse.
Pen	Click to place points for a new path; click the first point again to close it.

After you finish drawing with a create tool, the editor hands control back to Select with the new shape already selected, ready to position or restyle.

Note

On a narrow screen the dock also carries an Inspector button. On desktop the inspector is always visible as a sidebar, so it needs no button there.

The inspector

The inspector reflects the current selection:

• With nothing selected, it shows the artboard — the drawing’s overall dimensions.
• With a shape selected, it shows editable Position (X, Y), Dimensions (width, height), Rotation, and Scale, plus Fill and Stroke. You can add or remove a fill or stroke, pick its colour, adjust opacity, and set stroke weight.

Edits in the inspector write straight back to the SVG source, so the numbers you see are the values in the file.

Selecting and transforming

With the Select tool, click a shape to select it. Drag it to move, drag its handles to resize, and use the rotation handle to spin it. Live values update in the inspector as you drag. Press Delete or Backspace to remove the selected shape or group. Click empty canvas to deselect.

Path editing

Double-click an already-selected path to edit its vertices. Drag an anchor to move it with its Bézier handles. When an anchor has two handles, dragging either one moves the opposite handle symmetrically for a smooth curve; hold Alt/Option while dragging to move only the grabbed handle.

Press Delete or Backspace with an anchor selected to remove that point; its surviving neighbours are connected directly. Select a Bézier handle and press Delete or Backspace to remove only that incoming or outgoing control, making that side of the point crisp. Press Escape or click empty canvas space to return to normal selection.

A straight corner has no handles because it has no curve data yet. Creating handles on a straight corner, adding vertices, and editing paths that contain elliptical arc commands are future steps; Worktray refuses an arc path with a hint and leaves it unchanged.

Raw markup

The Raw view is a full source editor with SVG/HTML-aware highlighting. Anything valid in an SVG file is fair game here — gradients, groups, and attributes the visual tools don’t yet expose all round-trip through it untouched.

Safety

The Design canvas renders sanitized markup: scripts, event handler attributes, external/foreignObject content, and javascript: links are stripped from what it draws. This only affects the live preview — your source file keeps whatever you wrote. Invalid markup shows a clear message on the canvas and stays editable in Raw instead of being replaced.

Undo and redo

Cmd/Ctrl+Z and Cmd/Ctrl+Shift+Z undo and redo across both views, so switching between Design and Raw does not split your history. Undo keeps the Design canvas open and restores a selection that still exists in the recovered content. See Getting started for the full model.