viewBox ⚬ˢᵛᵍ｜encounter｜ENC｜20260905204945-00-•

That’s fair — percentages by hand, hundreds of times a week, is a nightmare. Two things that actually fix this:

1. Use pixel coordinates instead of percentages, via SVG’s `viewBox`.

If you set the viewBox to your image’s actual pixel dimensions, you can specify box positions in real pixel coordinates from the source image — no converting to percentages, no math:

<svg viewBox="0 0 1920 1080" style="width: 100%; height: auto; display: block;">
 <image href="my-image.png" width="1920" height="1080" />
 <rect x="420" y="300" width="250" height="150" fill="none" stroke="red" stroke-width="6"/>
</svg>

The viewBox numbers must match your image’s actual pixel dimensions, but after that, x/y/width/height are just literal pixel coordinates — the same ones you’d read directly off any screenshot tool, image viewer, or editor that shows cursor position in pixels. This scales correctly at any display size automatically. That removes the annoying conversion step entirely.

2. Since this is a repeated, high-volume task — let me just build you a tool for it.

A small web app where you drop in an image, drag a box directly on it, and it spits out the ready-to-paste snippet (with the coordinates already filled in from your drag) would probably save you dramatically more time than any manual method, at this volume. Want me to build that as an artifact? I’d make it so you can:

• Drop/paste an image in
• Click-drag to draw one or more boxes right on it
• Copy the generated HTML/SVG snippet with real coordinates baked in

That would take the “getting the numbers right” step down to a couple of seconds per image.

Source: Claude Sonnet ○˒

(echo:: @ ᯤ)