How to Create and Edit SVG Shapes on SVG.wtf

SVG.wtf is a browser-based SVG editor that pairs a visual canvas with a live code view. You pick a shape tool from the toolbar, draw on the canvas, and the tool writes the corresponding SVG element into the code panel. It suits quick icon sketching, prototyping a shape before hand-tuning the markup, or generating a clean SVG snippet to copy or download. Everything below is based on the tool's visible interface: the shape list (rect, circle, ellipse, line, polyline, polygon, path, image, text), the focus/move/delete controls, and the clear, download, copy, and pin actions.

Available shape tools

The toolbar exposes one entry per SVG element, so what you draw maps directly to standard markup:

Text has a second variant in the interface: a textPath option, which renders text along a path rather than in a straight line. The canvas also shows sample text ("Hi there") for both the plain text and textPath cases, which helps you see the difference before committing.

Drawing a shape

1. Select the shape tool you want from the toolbar.
2. Draw or place it on the canvas. The tool creates the matching element and adds it to the code view.
3. Switch to the code view to confirm the element appeared with its attributes.
4. Adjust the shape on the canvas; the code updates to match.

The key behavior to internalize is that canvas and code are two views of the same document. You don't export from one to the other — an edit in either place is reflected in the other.

GUI controls: focus, move, delete

Each shape on the canvas carries its own small control cluster:

• Click to lock focus — pins your attention to that shape so subsequent actions apply to it rather than to whatever is under the cursor.
• Move below / Move above — reorders the shape in the stacking order. This matters because SVG paints in document order: the later element sits on top. Moving a shape "above" brings it forward; "below" sends it back.
• x Delete — removes the selected shape from the canvas and its element from the code.

Locking focus first is the reliable habit. If you try to move or delete without a locked target, you risk acting on the wrong element, especially when shapes overlap.

How changes appear in the code view

Every canvas action writes to the code panel:

• Drawing a shape inserts a new element.
• Moving or resizing it updates the relevant attributes (position and size values).
• Reordering with Move above/below changes the element's order in the markup.
• Deleting removes the element entirely.

Because the code view is live, you can read it as a running record of what you've done. If a shape looks wrong on the canvas, the code view usually shows why — a missing attribute, an unexpected coordinate, or an element sitting in the wrong order.

Document-level actions

Alongside the per-shape controls, the interface provides four document actions:

• clear — wipes the current drawing, giving you a blank canvas and empty code.
• download — saves the SVG as a file.
• copy — puts the SVG markup on your clipboard for pasting elsewhere.
• pin snapshot — captures the current state as a snapshot you can pin, useful for keeping a known-good version before you experiment further.

A practical workflow: build the shape, pin snapshot once it looks right, then keep editing. If an experiment goes wrong, you still have the pinned version as your reference point. When you're done, copy for inline use or download for a standalone file.

Common snags

• Shape hidden behind another. SVG stacking is order-dependent. Use Move above to bring it forward.
• Actions hitting the wrong element. Lock focus on the target first.
• Text not following a curve. Plain text stays straight; use the textPath variant when you want text along a path.
• Code and canvas out of sync in your head. Re-read the code view after each edit — it's the source of truth for what will be exported.
• Losing work mid-experiment. Pin a snapshot before making large changes.

When this workflow fits

Use SVG.wtf when you want a shape drawn and its markup in hand quickly, and when seeing the code alongside the canvas helps you learn or verify the SVG. For precise, coordinate-driven work or large multi-element illustrations, the canvas-first approach is slower than writing markup directly — in that case, treat the tool as a way to draft a shape and then refine the code by hand.