2b:null 2c:["$","title",null,{"children":"SVG to CNC | Forrest O. | Observable"}] 31:T9b1,md`# SVG to CNC [Github repo](https://github.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? This is an attempt to "compile" SVG paths for CNC software down to basic X/Y movements. Each combination of stroke and fill becomes one path element. This makes it easier to attach them in Cricut, and then set the tool for each layer. ~~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](https://observablehq.com/@forresto/moon-grid), and it's much easier to work with. ## Cricut/SVG Tips 1 inch = 72px, so you can design with a function like this: ~~~js 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

`;\n const svgTxt = await Files.text(fileInput);\n div.innerHTML = svgTxt;\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":482,"value":"md`## File ouput (compiled/flattened)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":948,"value":"svgDownloadButton(\n fileInputCompiled,\n fileInput.name.slice(0, -4) + '-compiled.svg'\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":519,"value":"fileInputCompiled = compileSVG(fileInputPreview.querySelector('svg'))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":533,"value":"fileInputCompiledHTML = fileInputCompiled.outerHTML","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":217,"value":"md`## Examples\n### Input`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1053,"value":"inputElCount = exampleInput.querySelectorAll('*').length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":220,"value":"md`### Output\n\n* No transforms or groups\n* Notice that the scaled strokes become uniform\n* One path per stroke/width/fill combination, which alters stacking order\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"exampleOutput = compileSVG(exampleInput)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"outputElCount = exampleOutput.querySelectorAll('*').length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1059,"value":"md`### Without consolidating paths\n\n* Stacking order more like input\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1062,"value":"exampleOutputNoCon = compileSVG(exampleInput, { consolidate: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"md`## Edge cases`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":653,"value":"md`### Bug with viewBox to fix – ✅ fixed!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":656,"value":"bugIn = svg`\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":659,"value":"bugOut = compileSVG(bugIn)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"md`## Libs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":487,"value":"import { file } from '@jashkenas/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":944,"value":"import { svgDownloadButton } from '@forresto/svg-download-button'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1019,"value":"compileSVG = (await import('https://unpkg.com/@forresto/svg-to-cnc@0.0.2/build/index.js?module'))\n .default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"