Tutorials
Claude Opus 5.5: fix clipped and uneven SVG icon strokes
Ask Claude Opus 5.5 to inspect an SVG icon's coordinate system, painted bounds, and computed stroke before changing its path.
Ask Claude Opus 5.5 to inspect an SVG icon's coordinate system, painted bounds, and computed stroke before changing its path. A large icon box with a small drawing, a clipped outline, and an inconsistent line weight are three different problems. Giving them the same “make it bigger” fix usually hides the cause.
This is a proposed review method with calculated geometry, not an Opus benchmark. A developer's discussion about SVG sizing and alignment illustrates the confusion between the outer element and the drawing inside it. That self-report does not establish a browser defect.
Identify which boundary is wrong
| Symptom | Evidence to capture | First correction to consider |
|---|---|---|
| Drawing looks tiny inside its box | viewBox and actual path bounds | Check excess coordinate-space padding |
| Outline disappears at the edge | Painted bounds, caps, joins, overflow | Leave enough room for the stroke |
| Weight changes between sizes | Rendered size and scaling transform | Decide whether scaling is intended |
| Only one instance differs | Computed CSS and referenced symbol | Find a style override before editing paths |
The SVG viewBox specification describes mapping an internal rectangle to the viewport. Increasing CSS width changes the rendered box; it does not remove empty space already present inside that rectangle. Record both dimensions and preserve the icon's proportions.
Calculate a simple stroke example
For a square `viewBox="0 0 24 24"`, a stroke width of 2, and ordinary uniform scaling with no other transforms:
| Rendered square | Scale | Expected stroke width |
|---|---|---|
| 18 CSS px | 18 / 24 | 1.5 CSS px |
| 24 CSS px | 24 / 24 | 2 CSS px |
| 48 CSS px | 48 / 24 | 4 CSS px |
These are geometric widths, not guarantees about how antialiasing looks on every screen. MDN documents `vector-effect="non-scaling-stroke"` for keeping stroke width independent of relevant transformations. Use it only when a constant line weight matches the icon family. A large icon may intentionally need a heavier stroke. It does not automatically repair padding, alignment, clipping, or browser zoom behavior.
Now inspect this deliberately simple shape:
```html
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<circle cx="12" cy="12" r="9" fill="none"
stroke="currentColor" stroke-width="2" />
</svg>
Its painted bounds run from 2 to 22 on each axis: center 12, radius 9, half-stroke 1. Changing the radius to 12 produces bounds from −1 to 25, which exceed the viewBox and can be clipped when the viewport clips overflow. The example uses a circle; angled joins, line caps, filters, and transforms need their own bounds checks. This decorative example is hidden from assistive technology. An icon-only button still needs an accessible name on the control.
## A complete Opus review prompt
Use the [official Opus 5.5 guide](https://platform.claude.com/docs/en/build-with-claude/prompt-engineering/prompting-claude-opus-5-5) alongside this task-specific prompt:
```text
Review this SVG icon and its containing component. Inputs: complete SVG or referenced symbol, computed CSS, intended sizes, screenshots at those sizes, and the intended icon-family stroke policy.
Separate viewport size, viewBox coordinates, geometry bounds, painted bounds, and layout alignment. Calculate stroke scaling for each requested size under the actual transforms. Inspect stroke width, vector-effect, line caps, joins, overflow, filters, and CSS overrides. If information is missing, identify it rather than assuming default behavior.
Propose the smallest diff that fixes the demonstrated problem. Preserve shape identity and aspect ratio. Do not add non-scaling-stroke to every icon automatically. Explain whether the proposed change affects other symbol instances. Return a diagnosis table, the patch, and a test matrix for 18, 24, and 48 CSS pixels on light and dark backgrounds. Mark calculations separately from browser observations. Do not claim a visual test was run without results. Preserve accessible names on interactive controls.Check the actual component
Render the existing and changed icons side by side at the three requested sizes. Inspect all four edges and compare the icon with neighboring symbols from the same family. Check the normal, hovered, focused, and disabled states if their styles alter the icon. Save the computed stroke width and the relevant CSS rule with the screenshot.
Test the referenced symbol in more than one component: a shared change may fix one toolbar and damage another. Inspect both light and dark backgrounds because apparent weight can change with contrast. If the screenshot and calculation disagree, inspect additional transforms and CSS before editing geometry again.
Common decisions
**Should every icon use non-scaling strokes?** No. Choose one deliberate policy for the family and verify each intended size.
**Can changing viewBox fix clipping?** Sometimes, but it also changes scale and alignment. Check the entire family after a change.
**Is a screenshot enough?** It locates a symptom. The SVG, computed styles, and rendered dimensions are needed to explain it.
After the interface icons pass review, use Panelly Studio for complete promotional images with a coherent visual brief. For text inside an SVG diagram, the separate diagram-label review addresses label placement and readability. Neither workflow claims a Panelly–Opus integration.
