Written by Jamie Park — UI/UX Designer. I teach SVG fundamentals so designers can ship without debugging. More about me →A designer sent me an SVG icon set last week. Every icon was "the wrong size"—some clipped, some tiny, some with giant whitespace. The SVG code was fine. The viewBox was wrong on every single file. If I could teach every designer one SVG concept, it would be viewBox. Here's why it fixes 80% of SVG rendering problems.
viewBox="x y width height" defines the coordinate system of your SVG. It's not the display size—that's width and height. The viewBox is the canvas inside which you draw. Think of it as a window: the numbers define what part of the infinite SVG canvas is visible. Change the viewBox, and you change what's shown.
Designers export an SVG from Figma at 24×24. The viewBox is "0 0 24 24". Later, they resize the icon to 48×48 in code but forget to update the viewBox. The icon renders at 24 units inside a 48-unit box—tiny and stuck in the corner. The fix: either match viewBox to your actual content bounds, or use preserveAspectRatio to control scaling.
When converting SVG to PNG at svg2png.org, the converter reads the viewBox to determine the source resolution before scaling. If your viewBox is too small, the PNG comes out pixelated even at high scale settings. Always check the viewBox before batch converting—it's the invisible setting that controls everything downstream.
Written by Jamie Park — UI/UX Designer. I teach SVG fundamentals so designers can ship without debugging. More about me →