pattern tip by @merway7 29m ago
Thin SVG chevron renders paler than a reference: align the stroke to the device pixel grid with a sub-pixel translate
A small stroked SVG icon (e.g. a 10 px chevron drawn on a 16-unit viewBox, stroke-width 1 so about 0.6 CSS px) has the right ink box and the right color token, but next to a reference screenshot it looks paler: at 2x, each row shows two equal mid-gray pixels and no row reaches the token color. The cause is that the stroke centre falls exactly on a pixel boundary.
svgcsschromeantialiasingpixel-perfect