Draw SVG Online: Freehand, Pen and Shape Tools

Quick answer

Open SVGSketch and pick a tool: Freehand (F) to sketch with the pointer, the Path tool (B) to place anchors and pull handles, or a shape tool for rectangles, ellipses, polygons and stars. A freehand stroke is thinned and fitted into a curve the moment you release it: 151 pointer samples became 12 nodes in the card above. Every shape stays editable afterwards, and nothing is uploaded.

Freehand, Pen, and shape tool examples

Convert a freehand stroke to an editable path The pointer reported 151 positions. On release the Freehand tool thinned them at its Smoothing setting and fitted a 12-node curve through what was left, which is what you go on to edit.

Draw anchors and curves with the Path tool 5 gestures: click to place a corner, drag to pull a curve through the anchor, click the first anchor again to close. The bottom panel is the same path under the Edit tool, handles and all.

Shape tools Rectangle with a corner radius, ellipse, a six-sided polygon and a five-pointed star, every one a live shape with its own controls: sides, arms, inner radius. Convert to Path turns any of them into nodes when you need to.

Sketch with the Freehand tool

Press F and draw. While the button is down the stroke follows the pointer; when you release, the tool thins the trail at its Smoothing setting and fits a curve through what is left, so a stroke of 151 samples comes back as 12 editable nodes rather than hundreds of points. Turn Smoothing down to keep more detail, or up for fewer, rounder nodes.

Turn on Shape Recognition and a rough stroke that was meant to be a basic shape becomes the clean shape.

Place anchors with the Path tool

Press B. Click to place a corner, drag to pull a handle and bend the segment, and click the first anchor to close. The pen draws cubic segments by default and can switch to quadratic, arc and Catmull-Rom segments in its options; Alt+click an anchor to toggle it between corner and smooth. Every anchor and handle stays live for the Edit tool afterwards.

Shapes with live controls

Rectangle with a corner radius, Ellipse, Polygon with any number of sides, Star with arms and an inner radius, and the other shapes: cross, ring, spiral, gear, arrow, speech bubble, heart, lightning and cloud. Each keeps its parameters in the Geometry panel until you convert it to a path.

Edit what you drew

Press E and drag anchors and handles, double-click a segment to add a node, or open the Path Editor panel to retype a command. Combine shapes with the boolean operations, cut them apart with Divide, and convert text or shapes to paths when you need nodes. The SVG path editor page covers the whole toolset.

Export plain SVG

What you draw is ordinary SVG: rect, ellipse, polygon and path elements carrying the paint you gave them. Export it as SVG, or as PNG, JPEG, WebP or ICO from the Export panel, and it opens in any other tool.

FAQ

Can I draw SVG freehand?

Yes. The Freehand tool (F) turns a pointer or pen stroke into a smooth, editable path when you release it. Smoothing sets how many nodes survive, and Shape Recognition can snap a rough stroke to the basic shape it was meant to be.

How do I draw curves?

With the Path tool (B), drag instead of clicking when you place an anchor: the drag pulls out a handle and the segment bends to follow it. You can also draw straight segments and turn them into curves later in the Path Editor panel.

Do I need to install anything?

No. SVGSketch runs in the browser, keeps your work on your device, and uploads nothing. An account is optional.

Can I draw with a graphics tablet?

Yes. The Freehand and Brush tools read pointer input, and the Brush tool can vary its size with pen pressure.