The practical answer
Set explicit root width and height with a viewBox of the matching aspect ratio. Export the required PNG dimensions directly from the SVG master. Check the downloaded dimensions, complete artwork and actual display size. Enlarging a small PNG does not recreate missing detail.
Separate drawing coordinates, output pixels and page display
Write down the destination before exporting. A card might display at 300×150 CSS pixels while its upload specification requires a 600×300 pixel file. Follow that specification. There is no universal high-resolution size: display scaling and device pixel density also affect appearance. A file passing a byte limit can still have too few pixels.
The MDN viewBox reference explains how the internal coordinate rectangle maps to the SVG viewport. Our drawing uses 200×100 coordinate units and an explicit 600×300 root size. Both have a 2:1 ratio. To increase output size, you do not need to multiply every circle coordinate by three.
| Measurement | Example | What to inspect |
|---|---|---|
| Drawing coordinates | viewBox="0 0 200 100" | Shapes remain within the coordinate rectangle |
| PNG output | 600×300 pixels | Dimensions of the downloaded file |
| Page display | 300×150 CSS pixels | Scaling and readability in the real destination |
Start with a sample that has no external dependencies
Keep the SVG master. Open the SVG-to-PNG tool, paste the sample below and start conversion. This entry has no separate output-width or scale control. Its canvas uses the browser-decoded image’s natural dimensions, so this workflow writes explicit dimensions into the root SVG element.
The expected composition is a pale blue rounded rectangle with a centered blue circle and transparent space around it. This is a reproducible diagnostic sample, not a compatibility test report for a complex design file.
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="300" viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="80" rx="12" fill="#dbeafe"/>
<circle cx="100" cy="50" r="28" fill="#2563eb"/>
</svg>Change the vector output size, then inspect the download
- Convert, download the result and open the PNG. Use file properties or an editor to verify 600×300 pixels. The tool’s responsive preview can be smaller on screen; its displayed width is not the file’s resolution.
- Temporarily change root width and height to 200 and 100 while keeping viewBox unchanged. Export a second file and compare both at the same display size. This is a comparison you can reproduce; the article does not claim measured quality scores.
- Return to the SVG master and set the dimensions required by the destination. Convert again. Exporting a small PNG and enlarging that raster file is a different operation and cannot substitute for this step.
- Name the deliverable for its use and dimensions, such as icon-card-600x300.png. Place it in the actual page or document and check scaling, proportions, transparent margins and background. A file-manager thumbnail is insufficient.
Larger canvases require more memory. There is no device-independent safe pixel limit here. If a phone fails, validate with moderate dimensions before trying a very large canvas again.
Fix coordinate bounds when artwork disappears
In this sample the rectangle spans x=10 to 190 and y=10 to 90, inside the 200×100 coordinate rectangle. The circle also fits. Moving the rectangle to x=180 while keeping its width at 180 crosses the right boundary. A PNG quality adjustment cannot move that artwork back into the viewport.
Allow space for strokes, shadows and filters in a real icon. Changing viewBox changes the framing and can affect the scaled size. Confirm the intended bounds and whitespace first. For stretched artwork, inspect the aspect ratio and preserveAspectRatio rather than changing unrelated numbers.
Original case: two failures require two fixes
A 200×100 PNG is displayed at 600×300, while a line also extends outside the SVG viewBox.
Export 600×300 directly from the complete SVG master. Separately adjust the coordinate bounds or the line’s position to keep it in frame.
Accept the image in its real destination
Use the upload dimensions and aspect-ratio guide to check the required pixels, ratio and byte limit. A bitmap embedded inside SVG still depends on its original pixels; enlarging the SVG does not turn that embedded image into vector detail.
Fonts, linked images and filters can behave differently in a browser. Establish that the simple sample works, then inspect the formal file’s dependencies. Keep PNG when transparency is required and use the image-format guide to check destination compatibility.
Downloaded PNG acceptance
- The actual dimensions match the specification, independently of the filename.
- All edges, strokes and intended margins are present.
- Fine lines and text work at the target display size without stretching.
- Transparent areas work on the destination background; the SVG master remains available.
Common questions
Can an SVG have viewBox without width and height?
Yes, but the browser determines natural dimensions from its context. This workflow sets explicit root dimensions so that the converter’s output can be checked rather than inferred from defaults.
Why is an enlarged PNG still soft?
Its pixels are fixed. Rasterize the SVG master again at the required size. Any embedded bitmap still needs sufficient original resolution.
What if text uses a different font?
Font availability and loading affect browser output. Check the dependency and its license, or prepare an appropriate version from the design source without external font dependencies. This entry does not package fonts.
Further reading & sources
Put the guide into practice
Open the relevant tool, preview the result and check your exported file.
