You add an SVG to a page, give it a sensible width, and the artwork still looks too small. Before increasing every CSS size, inspect the frame around the drawing.
The viewBox defines the coordinates
An SVG’s viewBox has four numbers: the minimum x coordinate, the minimum y coordinate, width, and height. Together they describe the internal rectangle mapped into the displayed viewport.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 200">
<path d="M100 50h200v100H100z" fill="#83e3b1" />
</svg>Here the rectangle uses only part of the viewBox. Making the SVG element wider scales the empty space along with the drawing. MDN’s viewBox reference explains the coordinate system and its relation to the viewport.
Check the source canvas first
If your original PNG has generous empty space around the mark, start by deciding whether you want that space in the output. Cropping before conversion is a straightforward way to keep the input focused on the artwork.
Do not crop so tightly that an intentional border, stroke, or edge gets clipped. Inspect all four sides.
Edit the frame with the artwork visible
For an existing SVG, use a vector editor to fit the document frame to the artwork, then inspect the result. Changing coordinate values blindly can crop a shape or shift its alignment.
Keep the unedited SVG so you can compare versions. Check the framed result on the actual page or canvas where it will be used.
Set display size separately
Once the internal frame is useful, choose the image’s display size in your layout. An img element can use a fixed or responsive width while maintaining its aspect ratio.
<img src="/logo.svg" alt="Your brand" width="160" height="80" />Use dimensions that match your own asset’s ratio. The numbers above illustrate a 2:1 image, not a requirement for every SVG.
For conversion issues beyond framing, see the troubleshooting guide.