About

SVG Sketcher turns clean vector artwork into something that looks drawn by hand. It is aimed at developers and designers who want a sketched icon, a rough-styled diagram, or an animated hand-drawn logo without opening an illustration app or hand-tweaking path data - and at video editors who need a hand-drawn element to key over footage.

It runs entirely in your browser

There is no backend. Your SVG is parsed, sketched and exported by JavaScript on your own machine - nothing is uploaded, stored, or logged. You can confirm this by opening your browser's network tab: after the page loads, converting a file makes no requests at all.

What it supports

• path, rect (including rounded), circle, ellipse, line, polygon and polyline
• Nested <g> groups, with each element's accumulated transform applied
• Text, converted to real outlines from the font file rather than rendered as text - from a set of bundled open-licence faces, or a TTF/OTF you upload (which stays in your browser), with adjustable letter spacing
• A single-line letter style, as an alternative to tracing around the outline - either the Hershey engraving alphabet (each character drawn as one pen stroke) or an even-weight sans font with its centre line pulled out of the letter shapes
• Freehand drawing with a mouse, finger or pen, sketched and animated like any other artwork
• Export as SVG, React component, CSS animation, Lottie JSON, animated GIF, or a video with a green screen behind it

Known limitations

Being straight about what it will not do:

• Live <text> inside a pasted SVG is skipped. Sketching it would require the exact font file, which the page does not have. Use the Type text tab, or convert text to outlines in your editor first.
• Proprietary fonts aren't bundled. Arial, Helvetica Neue and the like can't be redistributed, so the Type text tab ships open-licence faces (including metric-compatible stand-ins such as Arimo for Arial) and lets you upload the real file if you have it. Bundling every Google Font, or fetching them at run time, is off the table - the latter would show your IP to Google.
• The single-line style is fussy about fonts. An ordinary font stores each letter as a filled shape, not a centre line, so single-line mode either uses fonts drawn as strokes to begin with (the Hershey set) or traces the centre line out of an outline font. Tracing is reliable only for even-weight sans faces; serif, display and high-contrast fonts skeletonise into a mess and aren't offered.
• <use> references are skipped. Flatten them before pasting.
• Fills are not sketched. The tool draws outlines; it does not yet hatch filled regions.
• Very complex artwork gets slow. Sampling is proportional to total path length, so a detailed map with thousands of segments will take a moment.
• The video export has no transparency. No video codec a browser can record carries an alpha channel, which is why the background is a flat key colour to remove in your editor. It also records in real time, so a long clip takes as long as it plays, and Safari may not record at all.

Cost

The tool is free. Ads cover hosting. There is no account, no paid tier, and no upload limit beyond what your own browser can handle.

Back to the tool