A SHORT GUIDE

From a drawing to your fabric.

Backstitch turns the centre lines of a simple SVG drawing into a counted chart. You can also draw a pattern from scratch, or place a PNG, JPG or WebP underneath the grid and trace it by hand. Everything runs in your browser.

1. Choose a suitable drawing

For automatic conversion, use a plain SVG with stroked paths. Lines, polylines, circles, rectangles and curves are supported. The SVG needs a viewBox or numeric width and height. Filled shapes aren’t treated as lines: converting their edges would often produce two outlines where you wanted one stitch path.

If your file uses text, turn the lettering into suitable stroked paths in your drawing program first. CSS stylesheets, symbols, nested viewports, clipped shapes and active content are not supported. Export a plain SVG with inline styles. Files must be under 5 MB; SVG text is limited to 2 MB. Simple drawings give better results than highly detailed illustrations.

A PNG or photo opens as a faint reference image. It does not convert automatically. Choose Draw, then tap two grid points for each line you want to stitch.

2. Pick your stitch grid

Width and height are the number of squares in the chart, from 10 to 300 in each direction. A larger grid keeps more small details. “Keep drawing proportions” links width and height. Slight rounding is necessary because the grid uses whole numbers of squares.

Fine placement, the default, lets you draw and move points in 1/10-square steps: ten times finer than whole-square placement and five times finer than half squares. Zoom in for close tracing. Fine placement can put an endpoint between fabric holes, so review it before counted stitching. Whole-square endpoints lie on the main grid intersections; half squares sit halfway between them and require suitable fabric. Choosing a finer step keeps existing lines in place. To round a chart to a coarser step, choose Whole or Half squares and press Apply grid or Resize chart.

Apply grid follows the original SVG again, so it replaces your hand edits. Undo brings the previous chart back. On a blank or image-reference chart, Resize chart scales your existing lines and snaps them to the new grid.

3. Refine the lines

• Edit: drag a point, or select it and enter X/Y coordinates. Connected line ends at the same point move together. Arrow keys nudge a selected point by the chosen grid step.
• Draw: tap a starting point and an ending point. Repeat for another line. Escape cancels a line in progress.
• Erase: tap a line. You can also select a line or point in Edit mode, then use Delete selected. Deleting a point removes its connected lines.
• Split: select a long line and split it near its midpoint. The midpoint snaps to the chosen grid. Splitting may change the shape slightly, so check it against the reference.
• Undo / Redo: use the buttons or Ctrl/⌘ Z and Ctrl/⌘ Shift Z. Up to 25 edit steps are kept during the current session.

Lines are straight sections of your chart, not an enforced needle route. A long section may need several stitches. The tool flags lines longer than five squares for review; five squares is a reminder, not a universal rule. Crossing lines aren’t automatically joined unless they share an endpoint.

4. Set the fabric size

Fabric count means the number of fabric threads or Aida squares per inch. The chart size is chart squares × work-over ÷ fabric count. For example, 56 squares on 14-count Aida, over one, is 4 inches (10.16 cm). On 28-count evenweave, over two, the same chart is also 4 inches wide.

The size shown covers the chart area only. Add the border, hoop, seam and finishing allowance your project needs. The preview colour is not a DMC or other thread-brand match; choose your thread independently.

5. Save or print

SVG and PNG exports include a numbered grid and the chart lines. They omit the source reference. Editable project saves the lines, reference and settings in a JSON file that you can open again in Backstitch. If sharing a project file, remember that it contains your reference image or drawing.

Print / save as PDF opens an overview and, for larger charts, detailed A4 pages with two-square overlaps. Choose your browser’s Print command and “Save as PDF” or a printer. Print the detailed pages at 100% for 5 mm squares. Coordinates help match adjacent pages. The overview is scaled to fit.

Your last chart is also saved in this browser when storage is available. Clearing browser data, changing browsers or changing website addresses can remove access to that copy. Download a project file for anything you want to keep. The hub does not store a backup.

What this tool doesn’t decide

Automatic snapping approximates a drawing. Small sections can collapse; curves become straight sections; close points may merge. Increase the grid size or try half squares if details disappear. Check joins, sharp corners, stitch lengths and the overall shape before stitching. This is a single-colour backstitch drafting tool, not a photo-to-cross-stitch converter, a thread-matching service or machine-embroidery software.

Contact & feedback

Made as part of Our Niche Hub. The main hub page is planned for later. For a bug report or suggestion, email thefuture.bybeek@gmail.com. Describe the steps and your browser. Send only drawings you are comfortable sharing and have permission to use.