Punched Cards: SVG Scaling

With a fixture aligning a printed card in the laser for cutting and trays for incoming and outgoing cards, it’s time to generate SVGs for printing and cutting. I use the svg.py library to translate card geometry into SVG elements.

For example, this draws a rectangle around the card perimeter with a color that will automagically put it on a LightBurn tool layer used for alignment:

if args.layout == "laser":
    ToolEls.append(
        svg.Rect(
            x=0,
            y=0,
            width=svg.mm(CardSize[X]),
            height=svg.mm(CardSize[Y]),
            stroke=Tooling,
            stroke_width=svg.mm(DefStroke),
            fill="none",
        )
    )

Because I know the exact size of the card layout, all the coordinates / sizes / widths will be in hard millimeters. The constant INCH converts from the hard inch sizes of the OG IBM card layout.

The args.layout variable corresponds to a command-line switch selecting output for either “print” or “laser”, because each requires different SVG elements and attributes. In this case, the card outline appears only in the laser file, because it should not be printed on the card face.

Eventually, the SVG for the laser will look like this, with the blue rectangle boxing its red perimeter:

The corresponding SVG to be printed, without the rectangle:

Both SVGs have four alignment targets at exactly the same coordinates, although in different colors for their different purposes. The laser targets appear on a tool layer where they can be selected to position the laser head over the corresponding printed targets on the card in the fixture:

Subsequent steps in the process composite the fancy logo under the SVG layout and scale the result before printing the card.

This chunk of code produces those targets:

for c in ((1,1),(-1,1),(-1,-1),(1,-1)):
    ctr = (CardSize[X]/2 + c[X]*TargetOC[X]/2,CardSize[Y]/2 + c[Y]*TargetOC[Y]/2)
    MarkEls.append(
        svg.Circle(
            cx=svg.mm(ctr[X]),
            cy=svg.mm(ctr[Y]),
            r=svg.mm(TargetOD/2),
            stroke=Tooling if args.layout == "laser" else CardMark,
            stroke_width=svg.mm(DefStroke),
            fill="none",
        )
    )
    MarkEls.append(
        svg.Path(
            d=[
                svg.M(ctr[X] + TargetOD/2,ctr[Y] - TargetOD/2),
                svg.l(-TargetOD,TargetOD),
                svg.m(0,-TargetOD),
                svg.l(TargetOD,TargetOD),
            ],
            transform="scale(" + repr(1.0 if args.lbsvg else SVGSCALE) + ")",
            stroke=Tooling if args.layout == "laser" else CardMark,
            stroke_width=svg.mm(DefStroke if args.lbsvg else DefStroke/SVGSCALE),
            fill="none",
        )
    )

The stroke attribute sets the color of the result, with the Python ternary operator picking the appropriate RGB value based on args.layout.

The args.lbsvg variable comes into play when the LightBurn interpretation of an SVG attribute or element differs from the Inkscape interpretation. I have absolutely no idea what’s going on in those situations, other than that the two programs sometimes regard coordinates / distances differently.

For example, LightBurn regards the “user units” in a Path as millimeters and Inkscape regards them as “SVG pixels” requiring a scale factor I defined as SVGSCALE = 96.0/25.4 to get the right size. If there’s a less awful way to match them, I’m all eyes.

Although setting args.layout to “laser” and args.lbsvg to True generally makes sense, I may want to print the “laser” layout for cross-checking. Hilarity generally ensues until I remember args.lbsvg. It’s worth noting the code has zero error checking, so hilarity generally continues until I fix whatever got missed.

With that in mind, this Path traces the card perimeter:

if args.layout == "laser":
    CardEls.append(
        svg.Path(
            d=[
                svg.M(0.25*INCH,0),
                svg.h(CardSize[X] - 2*0.25*INCH),
                svg.a(0.250*INCH,0.25*INCH,0,0,1,0.25*INCH,0.25*INCH),
                svg.v(CardSize[Y] - 2*0.25*INCH),
                svg.a(0.25*INCH,0.25*INCH,0,0,1,-0.25*INCH,0.25*INCH),
                svg.H(0.25*INCH),
                svg.a(0.25*INCH,0.25*INCH,0,0,1,-0.25*INCH,-0.25*INCH),
                svg.V(0.25*INCH/math.tan(math.radians(30))),
                svg.Z(),
            ],
            transform="scale(" + repr(1.0 if args.lbsvg else SVGSCALE) + ")",
            stroke=CardCut if args.layout == "laser" else Tooling,
            stroke_width=svg.mm(DefStroke if args.lbsvg else DefStroke/SVGSCALE),
            fill="none",
        ),
    )

Note that the stroke_width attribute also requires scaling, lest it take on a broad-brush aspect.

More on generating the various characters and punching the holes to come …

The Python source code as a GitHub Gist:

I derive a modest satisfaction from knowing Microsoft (which owns GitHub) uses my source code to train their Copilot LLM. Future generations of vibe coders will look at their programs and wonder WTF just happened.