The other keychains all start from something we control: a name, a QR code, a Spotify track. The vector keychain starts from something we don’t — a file you upload. A logo, a monogram, an icon, a sketch. Whatever you give it becomes the keychain.
This is a disip build. The earlier modes shaped their own input; this one had to accept anything and still produce a watertight, printable object. That openness is the product’s biggest appeal, and its hardest problem.
From an SVG to a contour
The shared pipeline — design in the browser, generate a .3mf on add-to-cart, store it, move it onto the WooCommerce order at checkout — is the same across every product. We wrote that up in How we built the keychain configurator. The vector mode plugs into the same machinery; the new work is everything that happens before the geometry.
We only accept SVG. SVG is already vectors, which is exactly what a contour-based engine wants — no tracing a blurry PNG into jagged outlines. The vectorizer (svgLogoToContours) flattens the shapes the file can contain: <path> (arcs included), <rect>, <circle>, <ellipse>, <polygon> and <polyline>. It scales everything by the viewBox, flips from SVG’s y-down to the engine’s y-up, drops fill="none" elements (so transparent backgrounds don’t become a slab), and runs a hair of morphological closing to clean weakly-simple junctions into one watertight region.
The card then sizes itself to the design. You set the design height in millimetres; the layout reads the bounding box of the composed ink and the plate grows to fit — with optional text placed after it. A tall logo gets a tall card, a wide one gets a wide card. Nothing is cropped to a fixed frame.
Keeping the holes
The first thing arbitrary art breaks is the letter O. Vectorizers default to the nonzero winding rule, which happily fills the middle of a ring solid. A logo with a counter — an O, an A, a doughnut, a letter bowl — comes out as a blob.
Our built-in icon library is authored to behave under nonzero, so those stay on it. But user uploads switch to the even-odd fill rule, because for real-world logos a nested ring is almost always meant to be a hole. We also honour an explicit fill-rule:evenodd if the file declares one. The result: an O keeps its middle, a ring keeps its centre, and the hole survives all the way through to the mesh.
Open input means assuming the worst SVG anyone could hand you, and still printing a clean object.
Warning when it won’t print
The honest risk with open input is detail that looks fine on screen and vanishes on the print bed. A 0.4 mm nozzle can’t lay down a 0.3 mm hairline. So before you download, the engine measures whether your design can physically print.
thinFeatureFraction runs a morphological opening — erode then dilate by half the minimum feature width — and measures how much area disappears. If a stroke is thinner than that, the opening eats it, and the fraction spikes. Crucially, the check runs per island: it scores each connected outer-and-its-holes component separately and reports the worst one, so one thin element can’t be hidden behind a separate chunky block of area. Chunky icons score about zero; spindly strokes and tiny text light up.
When it trips, you get a plain message: some details are thinner than about 0.5 mm and may not print cleanly — increase the size. We still let you download — the check flags the risk, but the decision stays yours.
Raised, inlaid, inverted — and flat on the bed
Because the design is yours, the options are about reading it right:
- Raised or flush inlay — the design stands proud of the card, or sits flush in a second colour.
- Invert — the design becomes a cut-out: a negative within its own padded bounding box, so it reads in the base colour inside an ink-filled patch. It inverts only the vector, not the whole card and not any adjacent text — a deliberate fix after an earlier version flooded the entire plate.
- Rotation — a −180° to 180° rigid transform about the design’s centre, applied before layout so winding and holes are preserved exactly.
- Optional text — a short line set after the design, in its own colour.
One change here was global rather than mode-specific, and worth calling out. When you print on both sides, the back face is the side that touches the print bed. Raised features there would print as islands hanging below the plate — bad adhesion, failed prints. So the bed side is now always inlaid flush, regardless of the surface you picked for the front. A verifier asserts the invariant across every double-sided mode — QR, image, handle, Spotify and vector: watertight, and no geometry below z=0.
One rule: bring art you can use
The download is blocked until you’ve actually uploaded something — the configurator shows a sample vector so the preview isn’t blank, but that sample can’t be downloaded, and trying just prompts you to upload a design first. No upload, no file.
And the one note we put right on the upload field: upload art you have the right to use. We don’t bundle anyone’s logo, so please bring your own.
Try it yourself
Upload an SVG and watch it become a keychain you can hold — sized to your design, holes intact, with a printability check before you download. If you want a working custom product like this in your own shop, that’s the kind of work disip builds.