Conversion guide

SVG to PNG: choose dimensions and export scale

Choose a pixel canvas, understand retina scaling and aspect ratio, and avoid oversized SVG-to-PNG exports.

Start with the size where the image will be displayed

PNG has a fixed pixel width and height. If an icon will be displayed at 128 × 128 CSS pixels, a 256 × 256 PNG can provide two image pixels for each CSS pixel on a higher-density screen. The page or application must still display it at the intended size; the export alone does not control layout.

For ordinary screen use, the actual pixel dimensions matter more than a DPI label. Choose dimensions for the destination rather than exporting every icon at the largest available size.

Calculate scale before hitting the cap

The server converter multiplies its selected base canvas by 1×, 2×, or 3×, with a final limit of 4096 pixels per side. A 512 × 512 canvas at 2× requests 1024 × 1024 pixels. A 2048 × 2048 canvas at 3× would request 6144 × 6144, so it is capped at 4096 × 4096 instead.

If only one side reaches the cap, the final canvas ratio may differ from the base ratio. Read the calculated dimensions in the workspace and inspect the result rather than assuming that a scale label always gives an exact multiplication.

Understand canvas ratio, artwork ratio, and empty space

The width-to-height lock preserves the current numeric ratio while dimensions are edited within bounds. It does not read the source SVG ratio, and choosing a square preset resets the lock. An SVG’s viewBox can also include empty space that remains visible in the export.

Transparent and white modes aim to fit and center artwork in the requested canvas. A wide illustration on a square canvas can therefore have padding. No BG is the engine’s fill-canvas mode and may change proportions; it is not a background-removal tool. SVG rendering rules and source structure can also affect the final appearance.

Check source detail and destination requirements

Vector paths can be rendered at different sizes, but embedded raster content remains limited by its source pixels. Missing fonts or unsupported effects can also change the export. Larger dimensions cannot compensate for those issues.

A 1024 × 1024 image has four times as many pixels as a 512 × 512 image. File size is content-dependent, but extra pixels generally require more processing and memory. Retain the SVG source and export only the sizes you actually need.

  • Choose the display size and desired pixel density.
  • Match the canvas ratio to the artwork where possible.
  • Select Transparent if the destination needs alpha, or White for a fixed white matte.
  • Inspect text, edge quality, padding, and final dimensions before publishing.

Put this guide into practice