How does an SVG viewBox affect PNG size?
A viewBox defines the SVG's internal coordinate system and aspect ratio; it does not automatically set the PNG's pixel dimensions. Use declared width and height when they are valid. If the SVG has only a viewBox, choose the PNG width you need and calculate the height from the viewBox ratio.
What to do for each width, height, and viewBox combination
| Root SVG attributes | What they tell you | How to choose the PNG size |
|---|---|---|
width, height, and viewBox | The file has a default rendered size plus an internal coordinate system. | Start with the declared width and height, or scale both dimensions proportionally. |
viewBox only | The aspect ratio is known, but a final pixel size is not. | Choose an output width and calculate height from the viewBox ratio. |
width and height only | A default viewport exists, but scaling intent is less explicit. | Use the declared ratio; add a correct viewBox in the source when responsive scaling is required. |
| No usable dimensions or viewBox | The intended canvas cannot be determined reliably from the root element. | Return to the source file and define a canvas before exporting. |
Do not treat viewBox numbers as pixels. In viewBox="0 0 24 24", the two 24 values describe user-space units. You can rasterize that artwork to 24 × 24, 240 × 240, or another square PNG.
Calculate PNG height from a viewBox
aspect ratio = viewBox width ÷ viewBox height
PNG height = chosen PNG width × viewBox height ÷ viewBox width
Example: viewBox="0 0 1200 800" has a 3:2 aspect ratio. If you choose a PNG width of 900 pixels, the proportional height is 900 × 800 ÷ 1200 = 600 pixels.
Square icon
viewBox="0 0 24 24" stays square. A 512-pixel width should use a 512-pixel height.
Wide banner
viewBox="0 0 1600 900" is 16:9. A 1280-pixel width gives a 720-pixel height.
Portrait graphic
viewBox="0 0 600 900" is 2:3. A 800-pixel width gives a 1200-pixel height.
Non-zero origin
viewBox="10 20 400 300" still uses 400 by 300 for the ratio. The first two values set the origin, not the size.
Why the PNG may stretch, crop, or show empty space
When the viewport ratio and viewBox ratio differ, the SVG's preserveAspectRatio behavior decides how artwork fits inside the viewport.
| Behavior | Visible result | What to inspect |
|---|---|---|
| Meet | The whole viewBox fits; unused space can remain on two sides. | A typical value such as xMidYMid meet. |
| Slice | The viewport is filled; artwork outside the viewport can be cropped. | A value ending in slice. |
| None | The artwork can stretch independently in each direction. | preserveAspectRatio="none". |
If you only need a proportional PNG, keep the converter's aspect-ratio control enabled and use an output ratio that matches the viewBox. Change fit behavior only when the crop or padding is intentional.
Fix a wrong SVG to PNG output size
- Open the SVG as text and find the root
<svg>element. - Record its
width,height,viewBox, andpreserveAspectRatiovalues. - Use the viewBox's third and fourth values—not its origin—to calculate the aspect ratio.
- Choose one PNG dimension and calculate the other before converting.
- If content is still clipped, inspect whether artwork or filters extend beyond the viewBox.
- If the preview contains extra space, check whether the artwork itself occupies only part of the viewBox.
Separate canvas problems from resolution problems: increasing export scale adds output pixels, but it does not repair a wrong viewBox, crop, or aspect ratio.
SVG viewBox and PNG questions
Does a 1000 × 1000 viewBox require a 1000 × 1000 PNG?
No. It defines a square coordinate system. The PNG can use any square pixel dimensions appropriate for its destination.
Which viewBox numbers control the aspect ratio?
The third value is the viewBox width and the fourth is its height. The first two values set the minimum x and y coordinates.
Why is my PNG padded even when the aspect ratio is correct?
The visible artwork may not fill the viewBox. Inspect the artwork bounds and any intentional margins inside the SVG canvas.
Can a converter infer the intended size when every size attribute is missing?
Not reliably. Define a valid viewBox and choose explicit output dimensions.
Choose a proportional output size and check the preview before downloading.
Open the SVG to PNG converterPublished September 27, 2026.