How the Four Numbers in viewBox Actually Work
Think of width and height as a picture frame on your webpage, and viewBox="min-x min-y width height" as the camera zoom window pointed at an infinite vector plane:
<!-- Original: 2px stroke at x=0..24 gets clipped by 1px on each outer edge -->
<svg viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="12" fill="none" stroke="currentColor" stroke-width="2" />
</svg>
<!-- Fixed: camera shifts to (-1, -1) and spans 26×26 units — zero clipping! -->
<svg viewBox="-1 -1 26 26" width="24" height="24">
<circle cx="12" cy="12" r="12" fill="none" stroke="currentColor" stroke-width="2" />
</svg>If you would rather normalize paths onto a clean 0 0 24 24 grid without negative offsets, load the file into SVG Nexus's browser-based SVG Editor and adjust canvas padding interactively.
Preventing the 'Giant Flash of Unstyled SVG' (CLS Protection)
When an inline <svg viewBox="0 0 24 24"> omits HTML width and height attributes and a stylesheet is delayed or stripped in an RSS reader, browsers fall back to the default replaced-element width (300×150 or 100% container width!). Always keep intrinsic attributes (width="24" height="24" or width="1em" height="1em") on the root <svg> tag; CSS utility classes like w-5 h-5 still override HTML presentation attributes cleanly.
When to Change preserveAspectRatio
By default, preserveAspectRatio="xMidYMid meet" acts like CSS object-fit: contain—centering the artwork without cropping. For decorative section wave dividers that should stretch horizontally across wide monitors, use preserveAspectRatio="none"; for hero background patterns that should fill a card like object-fit: cover, use preserveAspectRatio="xMidYMid slice".