What tools and actions are available on SVG.wtf?

Updated

SVG.wtf is a browser-based SVG editor aimed at developers. Its interface exposes a small, fixed set of drawing tools and utility actions: you pick a shape or text tool, draw or place it on the canvas, and then use the utility actions to clear, download, copy, pin, or snapshot your work. The page evidence also shows focus-lock and move-above/move-below controls for managing elements in the stack.

Drawing tools

The editor lists these tools for creating SVG elements:

Tool What it creates
rect Rectangle
circle Circle
ellipse Ellipse
line Straight line
polyline Connected line segments
polygon Closed multi-sided shape
path Freeform path
image Embedded image element
text Text element
textPath Text laid along a path

These map directly to standard SVG element names, so if you already know SVG markup, the tool names tell you what each one produces in the code.

Utility actions

The interface shows a row of actions:

  • clear — removes the current content from the canvas.
  • download — exports the SVG file to your machine.
  • copy — copies the SVG (typically the markup) to your clipboard.
  • pin — pins an element or state, keeping it fixed in place.
  • snapshot — captures the current state of the canvas.

The page evidence also includes gui code snapshots automation tools, which suggests the editor pairs a visual GUI with generated code and snapshot/automation features.

Focus lock and element ordering

Two controls manage how elements behave in the stack:

  • Click to lock focus — locks focus onto a specific element so edits apply to it rather than to whatever is under the cursor.
  • Move above / Move below — reorders the selected element in the layer stack, changing which element renders on top.

Who this is for

The tool set is oriented toward developers working with SVG: the element names match SVG syntax, and the presence of code, snapshots, and automation tools points to a workflow where you draw visually and then take the resulting markup into your own project.

If you want to know whether the visual editor and the code stay in sync as you edit, that is a separate question about the editor's behavior rather than its tool list.