@forresto/svg-to-cnc

    0.0.2 • Public • Published

    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?

    Install

    npm i @forresto/svg-to-cnc

    DownloadsWeekly Downloads

    37

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    58.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • forresto