Should you export SVG to PNG at 1×, 2×, or 4×?
Use 1× when the PNG will be shown at its exact pixel size, 2× for a sharper high-density screen asset, and 4× only when you need extra pixels for zooming, cropping, or later editing. Pick the final display width first, then multiply it by the scale.
Convert SVG to PNG at the size you choose1×, 2×, and 4× compared
| Scale | Export width for a 400 px display | Use it when | Trade-off |
|---|---|---|---|
| 1× | 400 px | The image is displayed at 400 CSS pixels and file size matters most. | Fewer pixels are available on high-density screens. |
| 2× | 800 px | You want a high-density screen asset that will still display at 400 CSS pixels. | The PNG usually contains more data than a 1× export. |
| 4× | 1600 px | You expect close zooming, cropping, or another raster-editing step. | Often unnecessary for ordinary web display. |
Important: exporting at 4× does not add detail that was never present in an embedded raster image inside the SVG. It only rasterizes the SVG canvas to more output pixels.
Calculate the PNG dimensions before converting
export width = display width × scale
export height = export width × (SVG height ÷ SVG width)
For an SVG with a 3:2 aspect ratio that will display at 600 pixels wide:
- 1× export: 600 × 400 px
- 2× export: 1200 × 800 px
- 4× export: 2400 × 1600 px
Keep the aspect ratio locked unless you intentionally want to stretch the artwork. If an SVG has only a viewBox, use the viewBox width-to-height ratio for the same calculation.
Which size fits your job?
Website icon
Displayed at 32 × 32 CSS pixels: export 32 × 32 at 1× or 64 × 64 at 2×. Keep transparency if the icon sits on different backgrounds.
Documentation image
Displayed at 720 pixels wide: start with a 1440-pixel-wide 2× PNG, then confirm that text and thin lines are readable at the final display size.
Social graphic
Export the exact pixel dimensions required by the destination instead of choosing a scale by habit. The destination dimensions are the real target.
Future editing
Use 4× only if a later crop, zoom, or raster edit needs the extra pixels. Keep the original SVG as the editable master.
Four sizing mistakes to avoid
- Confusing scale with display size. An 800-pixel PNG can still be displayed at 400 CSS pixels.
- Breaking the aspect ratio. Changing only one dimension without proportional scaling can distort the artwork.
- Assuming more pixels always look better. Once the output has enough pixels for its display size, a larger export may only add weight.
- Ignoring SVG internals. External fonts, linked images, and filters can change the rendered result; inspect the preview before downloading.
SVG to PNG sizing questions
Does 2× change the aspect ratio?
No. Multiplying both width and height by two keeps the same aspect ratio.
Should every web image be exported at 2×?
No. Use 2× when high-density display quality is worth the additional pixels. A 1× asset can be appropriate when it is already large enough for its use.
Can I make a small PNG sharp by converting it to 4× later?
Not reliably. Re-export from the original SVG at the larger size instead of enlarging an already rasterized PNG.
Set the width, choose 1×, 2×, or 4×, and preview the result.
Open the SVG to PNG converterPublished September 25, 2026.