The problem: your SVG looks perfect at any size until someone needs a PNG
SVG is the only image format that scales without quality loss. A logo drawn at 16×16 looks identical at 1600×1600 because it's instructions (draw a circle here, fill it this color) not pixels. That's the whole point. But email clients like Gmail and Outlook strip SVG attachments or refuse to render them. Most CMS platforms don't accept SVG uploads. Social media pipelines expect PNG or JPEG. Print workflows sometimes demand a specific pixel dimension at 300 DPI. At some point, you need to rasterize — convert the vector instructions into a fixed grid of pixels — and that conversion is where things go wrong.
The three things that go wrong are always the same: the output is the wrong size because the SVG's viewBox wasn't understood, the transparency disappeared because the output format doesn't support it, or parts of the SVG silently vanished because they referenced external resources that the browser's security model blocked during rasterization. All three are preventable if you know what the conversion is actually doing.
Fastest path
Open the SVG to PNG Converter, upload your .svg file or paste the SVG markup, pick the output format (PNG, JPEG, WebP, or BMP), set the dimensions or scale factor, and click Convert. The tool rasterizes in your browser using the Canvas API — no server upload, no file leaving your machine.
What rasterization actually does
The conversion happens in three steps. First, the browser parses the SVG markup and creates an in-memory image at the vector level — the same thing it does when rendering an SVG on a web page. Second, the tool creates a Canvas element at your specified pixel dimensions and draws the SVG onto it using drawImage. The browser's rendering engine rasterizes the vector paths into a pixel grid at that exact resolution. Third, the tool calls toDataURL on the canvas, which reads the pixel buffer and encodes it in whatever format you selected.
The key insight is that step two is where the resolution decision is locked in. SVG is resolution-independent before this step and a fixed pixel grid after it. If you rasterize at 256×256 and then need 512×512, you can't re-rasterize from the PNG — you'd get pixelation. You need to go back to the SVG and rasterize at 512×512. This is why the tool keeps your SVG input and lets you re-convert at different sizes without re-uploading.
viewBox: the source of dimension confusion
SVG has two sizing mechanisms, and they interact in ways that cause most conversion errors. The viewBox attribute defines the internal coordinate system: viewBox="0 0 100 100" means the drawing uses coordinates from 0 to 100 on both axes. The width and height attributes define how large the SVG renders on a page. These are independent — a viewBox of 100×100 can render at 16×16 or 1600×1600.
The tool reads viewBox first (it defines the aspect ratio and coordinate space), then checks for explicit width/height attributes (they override the default render size). If neither exists, it falls back to 512×512. When you use the scale factor mode, the tool multiplies the SVG's native dimensions — so a 100×100 SVG at 3x produces a 300×300 PNG. When you use custom dimensions, you're overriding the native size entirely.
If your SVG has a viewBox but no width/height, the aspect ratio is preserved but the default size is arbitrary. If it has width/height but no viewBox, the coordinate system is in pixels and scaling works differently. Check both before converting.
Which format to pick
PNG for anything with transparency, sharp edges, text, or flat colors. Logos, icons, UI elements, diagrams. PNG is lossless — every pixel is exactly what the rasterizer produced. The downside is file size: a 1024×1024 PNG with transparency can be 500 KB or more.
JPEG for photographs and continuous-tone images. JPEG applies lossy compression that throws away high-frequency detail the eye can't see, which produces much smaller files. It does not support transparency — the tool forces a solid background (white by default) when you select JPEG. JPEG also introduces artifacts around sharp edges and text, so it's the wrong choice for logos or line art.
WebP for modern web use. WebP supports both transparency (like PNG) and lossy compression (like JPEG) in the same format, and produces files 25-35% smaller than either. Browser support is now universal among modern browsers. Use WebP when you control the rendering environment and don't need to support ancient email clients or legacy systems.
BMP for legacy compatibility only. BMP is uncompressed, supports no transparency, and produces enormous files. A 512×512 BMP is 768 KB — three times larger than the equivalent PNG. There's rarely a reason to choose BMP unless a specific tool or platform requires it.
Scale factors and retina
If the SVG will be displayed on a web page at 256×256 CSS pixels, you need to rasterize at 512×512 for a 2x retina display or 768×768 for 3x. The srcset attribute on an <img> tag lets you serve all three:
<img src="logo-1x.png" srcset="logo-2x.png 2x, logo-3x.png 3x"
width="256" height="256" alt="Logo">
The tool's scale factor mode (1x, 2x, 3x, 4x) handles this directly. Set the SVG's native size to the 1x display size, then export at each scale factor. The aspect ratio is preserved automatically because the scale applies to both dimensions.
Gotchas
- External resources don't load. If your SVG references an external image via
<image href="https://...">or an external stylesheet, the browser's canvas security model blocks it. The canvas becomes "tainted" andtoDataURLthrows a security error, or the external content is silently skipped. Inline all images as data URIs and embed all styles inside the SVG before converting. - foreignObject doesn't rasterize. SVG's
<foreignObject>element embeds HTML inside SVG, which is useful for rendering rich text. Most browsers cannot rasterize foreignObject content to canvas — it appears blank in the output. If your SVG uses foreignObject for text, replace it with<text>elements before converting. - Canvas has a maximum dimension. Browsers cap canvas size at around 32,767 pixels per side (Chrome) or 16,384 (Safari). The tool caps at 4,096 to stay safe. If you need larger output, you'll need a server-side rasterizer like Inkscape or ImageMagick.
- JPEG quality below 60% ruins sharp edges. The quality slider controls the compression level. At 90%+, artifacts are nearly invisible. Below 60%, ringing and blocking artifacts appear around text, lines, and color boundaries. For logos and icons, use PNG or WebP instead of low-quality JPEG.
- Rasterizing at the wrong size and scaling up defeats the purpose. If you rasterize at 64×64 and then display at 256×256, you get the same pixelation you were trying to avoid by using SVG in the first place. Always rasterize at the final display size (or 2x/3x that size for retina). The tool's scale factor mode prevents this mistake by anchoring to the SVG's native dimensions.
Summary
- Rasterization locks in a pixel resolution. SVG scales infinitely before rasterization, never after. Always convert at the final display size (or 2x/3x for retina).
- The tool reads viewBox for aspect ratio and coordinate space, then width/height for native size. Check both attributes if the output dimensions look wrong.
- PNG for transparency and sharp edges, JPEG for photos at 90%+ quality, WebP for modern web use with both, BMP only for legacy requirements.
- External resources and foreignObject content silently fail during canvas rasterization. Inline everything before converting.
- Use the SVG to PNG Converter for the rasterization, the Image Resizer for post-conversion dimension changes, the Favicon Generator for the multi-size icon workflow, and the Image Format Converter for conversions between raster formats.