What pixel size should an SVG export use?

Your SVG looks sharp. Your PNG should too. Multiply its on-page width and height by the screen's pixel ratio to choose an export size that keeps edges crisp.

FluffyBench · 5 min read · Reviewed October 15, 2026

Why does a PNG look soft when the SVG stays sharp?

An SVG is like a set of drawing instructions: it describes shapes that can be drawn at different sizes. A PNG is a snapshot of one drawing, with a fixed grid of pixels. Enlarging that snapshot spreads the same pixels over more space; drawing again from the SVG gives the new size its own edges.

Here's the difference along one diagonal: a 64-pixel PNG stretched to 192 pixels beside a fresh 192-pixel export from the SVG.

Follow the diagonal: stretching the small PNG blurs an edge that a fresh SVG export can draw clearly. How we reviewed

How many pixels should you export for a screen?

Multiply both on-page dimensions by the highest screen pixel ratio you want to cover. The page's layout units are called CSS pixels; the pixel ratio tells you how many screen pixels fit across each one.

The display boxes stay the same size. A denser screen needs more image pixels inside the box; the 1× export fits a 1× screen.

For a 64 × 64 icon on a 3× screen, the calculation gives you a 192 × 192 PNG.

Worked example: display 64 by 64 CSS pixels, multiply width and height by 3, export 192 by 192 pixels. — Use your own display dimensions and target ratio. A larger export doesn't enlarge a display box whose CSS size is fixed.

Doing it in FluffyBench: export an SVG at a chosen PNG size

In FluffyBench's SVG to PNG converter, you can choose exact pixel dimensions or multiply the SVG's starting size. Here's the job from opening the drawing to saving the PNG.

Step 1. Load your SVG and keep it for future exports. This walkthrough uses a square botanical drawing with a 64 × 64 size.
1. Choose images opens your SVG.
2. Leave To set to PNG.
3. Settings opens the size controls.
Step 2. Dimensions sets a pixel box; Keep aspect ratio fits the drawing inside it without stretching its shape.
1. Choose Size → Dimensions for an explicit pixel size.
2. Set Width 192 and Height 192; leave Keep aspect ratio checked.
3. Original uses the SVG size; browser defaults can differ when its dimensions are missing.
Step 3. Percentage is an alternative to Dimensions. For this 64 × 64 SVG, Scale 300% also draws a 192 × 192 PNG; it isn't a universal export size.
1. Percentage multiplies the SVG's starting dimensions.
2. Scale 300% makes each dimension three times as large.
Step 4. Close Settings and convert from the SVG, so FluffyBench can draw fresh edges at the new size.
1. Press Settings again to close the panel.
2. Convert creates your PNG.
Step 5. Check the PNG dimensions and file size against your destination's requirements, then save it.
1. The completed row shows the output dimensions and bytes.
2. Download saves the PNG to your device.

Ready to export your drawing?

FluffyBench's SVG to PNG converter

Draw a PNG at the pixel dimensions you've calculated.

Does the PNG look right where you'll use it?

The completed row gives you dimensions and bytes. The final check is visual: your saved PNG should have clear lines at the size it'll appear in your page or app.

Inspect the PNG in its destination at its intended display size; use the close view to spot broken or missing fine lines. · Photo: Britton, N.L., and A. Brown, Public domain, U.S. work published before January 1, 1931; Public Domain Mark 1.0, via Wikimedia Commons.

How we reviewed

Reviewed October 15, 2026

The historical dimensions and 16.4 dB PSNR value come from the measurement record. A first-party 64-unit test icon through FluffyBench's SVG to PNG route on a local build, default settings; Size → Percentage for the 200% and 300% rows. Run in Chromium 153 and Firefox 155. The 300% export was compared with the same SVG drawn directly at 192 px in Chromium: identical pixels. The 1x export scaled up to 192 px by the browser scored PSNR 16.37 dB against that drawing.

The historical run used one first-party test icon. Its record names the browsers and local build, without a machine or raw-result path. The new botanical walkthrough and saved PNG illustrate the current controls; they add no benchmark result.

The comparison reuses the existing diagonal crops, from x 12–28 and y 36–52 in the 64-unit drawing. The stretched crop used the browser's high-quality smoothing; both stored crops are enlarged here without smoothing. The complete historical icon source isn't included in the crop record.

PSNR compares the stretched small PNG with the true larger drawing. The historical Chromium 300% export matched the same SVG drawn directly at the larger size, pixel for pixel.

The density diagram is schematic: each enlarged grid represents a four-CSS-pixel patch. The botanical drawing is a separate public-domain illustration fitted into a square SVG; its proportions are preserved.

Original-size results from the reviewed run follow. A viewBox describes the drawing area and proportions, without necessarily specifying output pixel dimensions.

width="64" height="64": Chromium 64 × 64 pixels; Firefox 64 × 64 pixels. The numbers are CSS pixels, so this is 64 × 64 pixels.

width="1in" height="1in": Chromium 96 × 96 pixels; Firefox 96 × 96 pixels. CSS counts 96 pixels to the inch.

viewBox with no width or height: Chromium 150 × 150 pixels; Firefox 300 × 300 pixels. The browser chooses, and these two choose differently.

2:1 viewBox with no width or height: Chromium 300 × 150 pixels; Firefox 300 × 150 pixels. Both fit the shape into a 300 × 150 default box.

No width, height or viewBox: Chromium 300 × 150 pixels; Firefox 300 × 150 pixels. Both use the 300 × 150 default box.

64 × 64 plus Size → Percentage → Scale 300%: Chromium 192 × 192 pixels; Firefox 192 × 192 pixels. Drawn again from the shapes at the requested size.

The historical method called the percentage control Resize output. This guide uses the current Size label, with Original, Percentage and Dimensions choices.

Image credits

Asclepias verticillata illustration — Britton, N.L., and A. Brown. Public domain, U.S. work published before January 1, 1931; Public Domain Mark 1.0. A white background was added behind the black line drawing; the drawing itself was not altered.