svg-check

Sub-Skill: SVG Check

Purpose. Catch text-overflow and foreign-rect-intersection bugs in SVG diagrams before commit. LLM eyeball review at 4× zoom misses these bug classes consistently — measurement is the only reliable test.

The acceptance test is the script output. Not your visual judgment.

---

When to apply

Apply this skill whenever:

• you are editing an existing SVG (*.svg in any docs/diagrams folder),
• you are producing a new SVG from scratch,
• a designer agent reports an SVG as "clean" — verify with the script,
• you are reviewing a PR that touches *.svg.

---

The two bug classes the script catches

1. OVERFLOW (own-container): a <text> whose rendered bbox extends past the bounds of its containing <rect> (in the same <g>). Caught by getBBox() measurement, tolerance 2 px.

2. FOREIGN-RECT INTERSECT: a <text> whose viewport bbox intersects a <rect> that is not an ancestor of the text — i.e. a tagline ascender that touches a structural box above/below it. Caught by getBoundingClientRect() intersection, tolerance 2 px.

Both classes filter false-positives: rects smaller than 40 × 18 (legend swatches) are not treated as containers; texts that start more than 5 px outside a rect's horizontal range are not treated as contained.

---

How to run

The script lives next to this file: overflow-check.js. It needs Playwright installed once per machine.

One-time setup

# From the skill folder
cd skills/svg-check
bash setup.sh

Or manually:

npm install playwright
npx playwright install chromium --with-deps

Run on one SVG

node skills/svg-check/overflow-check.js path/to/diagram.svg

Run on all SVGs in a folder

for svg in path/to/*.svg; do
  out=$(node skills/svg-check/overflow-check.js "$svg" 2>&1)
  if echo "$out" | grep -q "FOUND"; then
    echo "FAIL: $svg"; echo "$out" | grep -E "FOUND|  \[|  \""
  fi
done

The script exits non-zero when issues are found — suitable for use as a pre-commit gate or CI step.