Signature Generator
Draw a signature and get an SVG with a tenth of the points, trimmed to the ink, plus a straight statement that an image of a signature is not an e-signature.
This tool needs JavaScript: the drawing happens in your browser, which is also why nothing is uploaded.
Download the SVG Download a PNG
An image of a signature is not an electronic signature. It carries no identity, no record of intent, no timestamp and no audit trail, and anybody who can save the file can reuse it. Laws that give electronic signatures legal weight, the US ESIGN Act and eIDAS in Europe, are about the process around the mark rather than the mark itself. For anything that matters, use a service that records who signed, when, and what they saw.
Before anything about the drawing: an image of a signature is not an electronic signature. It carries no identity, no record of intent, no timestamp and no audit trail, and anybody who can save the file can paste it onto something else. The laws that give electronic signatures legal weight, the US ESIGN Act and eIDAS in Europe, are about the process around the mark rather than the mark itself. For anything that matters, use a service that records who signed, when, and what they saw.
For the cases where a picture is genuinely what is wanted, a placeholder in a mockup, a letterhead, an internal form, the useful part is the geometry. A mouse records a point every frame, which is roughly ten times more than the curve needs. The tool keeps the shape and drops the rest: 80 points down to 13 on a typical stroke.
How to use
- Sign in the pad with a mouse, a trackpad, a finger or a stylus. The baseline is there because a signature drawn without one drifts.
- Undo removes the last stroke; clear starts again.
- Download the SVG. Take the PNG only where a raster image is required.
Example
Two strokes, 80 recorded points, 13 kept:
<svg xmlns="http://www.w3.org/2000/svg" width="282" height="64.9" viewBox="17.5 67.6 282 64.9">
<g fill="none" stroke="#0b1020" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
<path d="M 20 99.6 L 176 100.4"/>
<path d="M 180 100 Q 198 74.8 202.5 72.4 Q 207 70.1 210 70.6 …"/>
</g>
</svg>The viewBox is trimmed to the ink rather than to the pad, so the file has no empty margin to crop out later, and the transparent background means it sits on any colour.
Pitfalls
It is not an e-signature. Worth repeating because every tool of this kind implies otherwise by omission.
A reusable image is a reusable image. Once it exists as a file, it can be applied to anything. Keep it somewhere you would keep a scan of your passport, which is to say not in a shared drive.
Transparent is usually right. A white background looks fine on white paper and wrong on a form with a tinted field.
SVG scales, PNG does not. Use the SVG wherever it is accepted: it stays sharp at any size and the ink colour can be changed with a find and replace.
Smoothing is a trade. Higher tolerance means fewer points and a cleaner line; too high and the signature stops looking like yours. The tool reports how many points survived so the trade is visible.
A trackpad signature looks like a trackpad signature. A stylus or a finger on a phone gives a far better result than a mouse, and the difference is not something smoothing can fix.
Check it at the size it will be used. A signature that reads well at 900 pixels can turn to mush at 150.
Compatibility
Runs in the browser: the drawing happens locally, nothing is uploaded, and nothing is stored between visits.
Pointer events cover mouse, trackpad, touch and stylus with one code path, and are supported everywhere. The visible line is drawn on a canvas because that is what feels immediate under a pen; the exported file is vector, built from the same path data the canvas drew, so what you see is what you get.
The simplification is Ramer-Douglas-Peucker, tested on the two shapes that matter: a nearly straight line, which collapses to its two ends, and a curve, which has to keep enough points to stay a curve. The first and last points of a stroke are never dropped, whatever the tolerance.
A single tap produces a dot rather than nothing, because a path with no length draws nothing at all, which is the kind of thing that only shows up when somebody dots an i.
Frequently asked questions
Is this legally binding?
Why is the SVG smaller than I expected?
Should I use SVG or PNG?
How do I change the ink colour afterwards?
stroke attribute. Find and replace it. In a PNG, you cannot.