SVG to PNG with Custom Size: A Designer's Complete Guide

Converting SVG to PNG sounds like a one-click operation — until you need the output at a specific size. SVG is resolution-independent; PNG is not. Every SVG to PNG conversion involves picking a target resolution, and picking the wrong one gives you either a blurry image or a file that's 10× larger than it needs to be.

Search svg to png with size and you'll find a mix of design-tool tutorials, command-line snippets, and online converters that may or may not let you set dimensions. This guide covers all three approaches, gives you a reference table of the dimensions designers actually need, and explains how to do the whole thing locally — without uploading your SVG to a server.

Why SVG to PNG needs size control

SVG is a vector format. It stores shapes as paths, text, and gradients — not pixels. When you convert SVG to PNG, the converter has to rasterize the SVG: walk through every path, fill, and stroke, and render it onto a pixel grid at a specific width and height.

The size you pick determines two things:

• Sharpness. Too small, and fine lines and text become blurry or aliased. Too large, and you're storing pixels you'll never display.
• File size. PNG is lossless, so file size scales roughly with pixel count. A 1024×1024 PNG is roughly 16× larger than a 256×256 version of the same SVG.

There's no single "correct" size for an SVG — the right size depends on where the PNG will be displayed. That's why a converter that supports svg to png with size is more useful than one that just picks a default.

Three ways to control output size

1. Design software (Illustrator, Figma, Sketch)

Every vector design tool has an SVG export dialog with explicit width and height fields. This is the most flexible option: you can preview the result, adjust artboards, and export at any resolution.

The downside is that it requires the design software to be installed, and the export step is manual. If you're converting SVGs in bulk or as part of a build process, design software isn't the right tool.

2. Command-line tools (ImageMagick, rsvg-convert, sharp)

For developers, the CLI route is fast and scriptable:

• ImageMagick: convert -density 300 input.svg -resize 512x512 output.png
• rsvg-convert: rsvg-convert -w 512 -h 512 input.svg -o output.png
• sharp (Node): sharp('input.svg', { density: 300 }).resize(512, 512).png().toFile('output.png')

These give you full control, but require installing native dependencies (librsvg, Inkscape, or a Node toolchain) and are impractical for non-developers or one-off conversions.

3. Browser-based converters

The third option is a browser-based SVG to PNG converter. These run the same kind of rendering engine your browser uses to display SVGs, but let you set the output dimensions before rasterizing.

Browser-based converters split into two categories:

• Upload-based: the SVG goes to a server, gets rasterized there, and the PNG comes back. Works, but your file leaves your device.
• Local: the conversion runs in your browser via WebAssembly. The SVG is read into memory, rasterized at the size you specify, and handed back as a download. Nothing is uploaded.

A local browser converter is the right default for most people: it has the flexibility of the CLI without the install step, and the privacy of doing it yourself without the upload cost.

A reference table of common PNG sizes

When you're converting SVG to PNG with a specific target in mind, here are the dimensions you'll reach for most often:

The rule of thumb for retina displays: export at 2× the CSS dimensions you'll display the image at. A logo shown at 120×40 in CSS should be a 240×80 PNG.

Common pitfalls when sizing SVG to PNG

A few issues show up repeatedly when converting SVG to PNG at specific sizes:

Aliasing on small sizes. At 16×16, fine strokes and thin text become a mess of jagged pixels. If you're generating favicons, design a simplified version of the SVG specifically for small sizes — don't just rasterize the full-resolution logo at 16×16.

Aspect ratio distortion. Most converters will let you set width and height independently, which means you can stretch or squash the SVG. Unless you deliberately want distortion, lock the aspect ratio and only specify one dimension — the other should scale automatically.

Transparent backgrounds. SVGs often have transparent backgrounds. PNG supports transparency, but if you're rasterizing for a context that expects an opaque image (an email header, a printed document), make sure to set a background color in the converter before exporting. Otherwise you'll get a PNG that looks fine in some contexts and invisible in others.

Text rendering. If the SVG contains text and the converter doesn't have the font installed, the text will fall back to a default font and look wrong. A local browser converter uses the browser's font stack, which usually matches what you saw when designing the SVG. A server-side converter might not.

Embedded raster images. Some SVGs embed JPG or PNG data inside them (for complex effects or photographic content). Rasterizing these at a larger size than the embedded image will upscale the embedded pixels, not the vectors — the result looks upscaled, not sharp. If your SVG has embedded rasters, the largest sharp PNG you can make is the size of the largest embedded image.

The local approach: svg to png with size, no upload

For most people, the right workflow is:

1. Open a local browser-based SVG converter.
2. Drop in the SVG file.
3. Set the target width and height (or just one, with aspect ratio locked).
4. Download the PNG.

This gives you the size control of the CLI approach without the install step, and the privacy of doing it yourself without the upload cost of server-side tools. The SVG never leaves your device, the conversion is instant, and there's no business reason for the tool to add watermarks or signup walls.

i2pic's SVG converter runs on this model — files are rasterized in your browser via WebAssembly, and you can set custom dimensions before exporting. If you're working with SVGs that contain sensitive content (logos for unreleased products, client work, anything with embedded text), the privacy guarantee is structural rather than promised: there's no upload server because there is no upload server.

When to pick which approach

• Designing iteratively — use design software. The preview loop is worth the install.
• Converting in bulk or as part of a build — use a CLI tool. Scripting wins for volume.
• One-off conversions, or anything sensitive — use a local browser converter. No install, no upload, instant result.

The bottom line

SVG to PNG isn't hard, but getting the size right matters more than people expect. Pick the dimensions from the table above based on where the PNG will actually be displayed, lock the aspect ratio unless you're deliberately distorting, and use a converter that lets you set both dimensions explicitly. For most use cases — and for anything where the SVG contains sensitive content — a local, browser-side converter gives you the same sharp, correctly-sized PNG you'd get from a server-side tool, without the upload.