svg-to-cnc

Compiles SVG shapes and transforms for CNC software down to basic paths. Each combination of stroke and fill becomes one path element. This makes it easier to attach them in CAM software (like Cricut Designer), and then set the tool for each layer.

Demo, with SVG file input: https://observablehq.com/@forresto/svg-to-cnc

Features

• Converts all shapes to paths
• Bakes all nested transformations into the path
• Removes grouping
• Combines all paths with the same stroke/stroke-width/fill into one path

Why

Cricut's software chokes with some indeterminate combination of element count, groups, and transforms. Issues that I've noticed:

• With ~100 groups of elements: "attach" action makes the app freeze
• With many cut and draw elements: there is no way to maintain those on import(?), so it's a pain to select each one to set the pen color / tool
• `transform="translate(-10, 0)"` switches x and y, moving elements up instead of left 😶
• Some combination of `translate` and `scale` gets... lost... in translation 😏

Cricut's software and file format are closed-source, so I was losing hope that I could work with my generative designs. Then, I got this idea. It seems like it can handle small numbers of big paths. What if I brute-force the design down to one path per tool?

~~File size is much larger.~~ (Edit: fixed that with smarter flattening.) Cricut doesn't choke. Success! (Seems like they could make this an option when importing. 🤔)

Tested with a moderately complex SVG, and it's much easier to work with.

Cricut/SVG Tips

1 inch = 72px, so you can design with a function like this:

function inch (n) { return n * 72 };

inch(8.5); // 612
inch(2); // 144
inch(1/2); // 36
inch(1/4); // 18

If designing for a specific size paper, make registration marks in a color that you won't use. Make them 1/4 inch from each corner. This should make the output centered as you expect. When Cricut asks you to insert that color pen, press "Go" without a pen in the holder.

Set SVG width and height to inches, and viewBox to pixels:

<svg width="8.5in" height="11in" viewBox="0 0 612 792">

Todo

• [x] Close circle, rect
• [x] Support more shapes
• [x] UI
• [x] Be smarter about how to compile the paths 🤷‍♀️
• [x] Fix `viewBox` breaks measuring
• [ ] Fix unneeded penup / pendown (`M`)
• [x] Option to not consolidate paths (only group by "tool")
• [ ] Nix fills?