SVG Draw Editor

What SVG actually is, and why drawing it by hand matters

SVG (Scalable Vector Graphics) is an XML-based image format: instead of storing a grid of pixels like a PNG or JPG, it stores instructions — "draw a line from here to here," "draw a circle of this radius at this point." Because those instructions are math, an SVG stays crisp at any size, from a 16×16 favicon to a billboard. This editor lets you place those instructions visually, then hands you the exact markup it produced so you can paste it into a webpage, tweak it in a text editor, or open it in a full vector program. Everything renders in your own browser; nothing you draw is uploaded.

The five primitives this editor produces

Each tool in the toolbar maps to one SVG element, and knowing the element helps you edit the output later:

Every shape carries three style attributes you set in the properties panel: fill (interior color), stroke (outline color), and stroke-width. Freehand paths are exported with fill="none" so they read as open lines rather than filled blobs.

A worked example: a triangle from three clicks

Select the Path tool and click three corners on the canvas — say (100, 50), (200, 200), and (50, 200) — then double-click or press Esc to finish. The editor records each click as a point and assembles a d string: M 100 50 L 200 200 L 50 200. That single line means "move to the first corner, draw a line to the second, draw a line to the third." Wrap it with your chosen stroke and the live source panel shows something like <path d="M 100 50 L 200 200 L 50 200" fill="none" stroke="#1e3a5f" stroke-width="2"/>. To make it a closed triangle, add a Z at the end of the d string in the output — that command snaps the last point back to the first.

How shapes are positioned

For rectangles, lines, ellipses, and circles you click and drag: the first point and the release point define the bounding box. A circle's radius is computed as half the diagonal distance between those two points (hypot(dx, dy) / 2), so dragging diagonally gives you the size you expect. Coordinates are snapped to whole numbers and measured against an internal 800×480 canvas, even though the drawing area scales to fit your screen — that keeps the exported markup clean and resolution-independent.

Practical tips

• Set colors before you draw. Fill, stroke, and width are read at the moment a shape is committed, so adjust them first; changing them afterward only affects new shapes, not existing ones.
• Use Undo liberally. The Undo button pops the most recent shape off the stack, which is faster than clearing and restarting when one stroke goes wrong.
• Edit the output by hand for precision. The visual canvas is great for rough placement, but if you need a rectangle at exactly x="100", it is often quicker to draw something close and correct the numbers in the source panel.
• Keep stroke-width in mind when scaling. Because strokes scale with the image, a 2px stroke on a small icon becomes thick when the SVG is blown up. Match the stroke to the final display size.

Common mistakes

• Forgetting to close a path. A two-point path is just a line. If your shape disappears after one click, you likely finished before placing a second point — the editor discards paths with fewer than two points.
• Expecting a filled outline on freehand paths. Paths export with fill="none" by design; if you want a solid region, draw a rectangle or ellipse instead, or add a fill color to the path markup yourself.
• Pasting SVG without the wrapper. The download and copy actions give you a complete <svg> element with the xmlns namespace. If you copy only inner shapes into an HTML file, include that namespace or the image will not render.

Where hand-drawn SVG fits

This tool is ideal for quick UI icons, annotation overlays, simple logos, diagram sketches, and learning how the SVG coordinate system behaves. Because the output is plain text, it compresses well, can be styled with CSS, animated, and version-controlled in Git as a readable diff — advantages a binary PNG can never offer. For complex illustration with curves and gradients you will eventually want a dedicated vector app, but for clean, lightweight graphics you can hand-tune, drawing the markup directly is often the fastest path.