Cedar Cup · outline icon stroke test
Fictional UI icon demo. Same SVG: viewBox="0 0 100 100",
stroke-width="2", fill="none", identical path geometry, rendered
at 24, 48 and 96 CSS px.
Default (scaling stroke)
vector-effect: none
Stroke scales with the viewBox: 2 × size/100 CSS px.
Non-scaling stroke
vector-effect="non-scaling-stroke"
Set on every stroked path. Stroke stays 2 CSS px on screen at every size.
What non-scaling-stroke does: it computes the stroke width in screen (CSS pixel) space instead of user space, so the line stays 2 px wide however large or small the icon is drawn.
What it does not do: it is not a guarantee of small-size optical quality. At 24 px a 2 px line takes up a much bigger share of the icon. Counters close up, the steam lines crowd together, and off-pixel coordinates still anti-alias into blur. Crisp small icons still need size-specific drawing: pixel-grid alignment, simplified detail and hand-tuned weights.
| Size | Default stroke (expected) | Non-scaling stroke (expected) | Measured in this browser |
|---|---|---|---|
| 24 px | 0.48 px | 2 px | – |
| 48 px | 0.96 px | 2 px | – |
| 96 px | 1.92 px | 2 px | – |