What Is SVG.wtf?

Updated

SVG.wtf is a browser-based SVG editing tool that combines a visual canvas with live code and snapshot controls. It is aimed at developers and designers who want to draw or adjust SVG shapes directly, then copy, download, or pin the resulting markup. The page is a working tool rather than a general website or documentation hub, so you go there to create and export SVG code, not to read tutorials.

What the tool actually does

The interface pairs a drawing canvas with a code panel. On the canvas you can add and manipulate standard SVG primitives, and the code side reflects the result so you can move between visual editing and hand-editing.

The shape set visible in the tool covers the core SVG elements:

  • rect
  • circle
  • ellipse
  • line
  • polyline
  • polygon
  • path
  • image
  • text
  • textPath

That list matters because it tells you the tool is built around native SVG elements rather than a proprietary format. Anything you draw maps to standard markup you can paste into a web project.

GUI controls and code snapshots

Two features distinguish it from a plain drawing app:

GUI controls. You manipulate shapes through on-canvas handles and a control panel instead of writing coordinates by hand. This is useful when you know roughly what you want but don't want to calculate path data manually.

Snapshots. The tool includes snapshot controls, so you can capture a state of your work and return to it. Combined with the code view, this lets you experiment with a shape, save the version you like, and keep iterating without losing a working result.

The toolbar also exposes actions for the output: clear, download, copy, and pin. In practice that means the workflow ends in either a file on disk or markup on your clipboard, ready for a code editor.

Where it fits in a developer workflow

A typical use looks like this:

  1. Open the tool and add the shapes you need from the element list.
  2. Adjust them visually with the GUI controls until the composition is right.
  3. Check the generated code, editing it directly if you need precise values.
  4. Take a snapshot if you want to preserve this state before trying something else.
  5. Copy the markup or download the file and paste it into your project.

This suits small, self-contained graphics: icons, simple illustrations, diagram fragments, or a one-off shape you'd rather draw than hand-code. For complex illustrations with many layers, a full vector editor will usually be faster, and for production icon systems you may still want a build step that optimizes the output.

What it is not

It is not a general-purpose website, a tutorial collection, or a documentation portal, despite being labeled a developer resource. There is no indication of pricing, accounts, or paid tiers on the page, so treat it as a tool you open and use rather than a service with a sign-up flow. If you need collaboration features, version history beyond local snapshots, or asset management, this is not that.

When to use it

Choose SVG.wtf when you want to go from "I need a shape" to "I have the SVG code" in one place, with the option to switch between dragging handles and editing markup. Skip it if your graphic is complex enough to need layers, effects, or a full design toolchain.