SVG to PNG: Exporting Crisp Bitmaps at the Right Scale
SVG stays sharp at any size; PNG does not. When you rasterise an SVG, the export scale determines whether the resulting image is usable or soft.
When you need to turn SVG into PNG
Many platforms accept only PNG or JPG. App store assets, social images, slide decks, some marketplace backends, and print shops will not take an SVG directly. If your logo, icon, or QR code exists as a vector, it has to be rendered to a bitmap before it can be uploaded or placed in a document.
Fixed-size output is the other reason. The same icon may be needed at 1x for a standard screen, 2x for a high-density display, and larger still for print or further editing. Re-rendering from the SVG at each scale gives cleaner edges than exporting a small PNG and enlarging it. PNG also preserves an alpha channel when you need transparency.
Choosing the scale and export settings
Check the SVG's own dimensions first. The output is normally the SVG's width and height multiplied by the scale, so a 24×24 icon at 4x becomes 96×96. A file with only a viewBox and no explicit width or height may fail or produce an unexpected size; add the dimensions in an editor before exporting.
Pick the scale from the final use. Web and app icons are often fine at 1x or 2x, while print work needs the target pixel size calculated from the physical dimensions and DPI before you choose a multiplier. More is not always better: larger bitmaps take more space and can hit canvas limits. Inspect the result at 100%, including the transparent areas.
- Confirm the SVG has explicit width and height
- Choose a scale from the target pixels, not the maximum
- Enable a transparent background if you need one
Alternatives, and when to keep SVG
Icons and logos on the web should stay SVG where possible: the file is small, scales cleanly, and can be recoloured with CSS. Export PNG only when a recipient will not accept SVG or when you need a bitmap for preview or print. Once rasterised, the image is bound by normal bitmap resolution limits.
External images, remote fonts, and remote CSS inside an SVG are usually blocked when the file is rendered as an image, which leads to missing text, missing images, or broken styling. Outline the text, embed images as base64, or use an exporter that supports embedded resources. Scripts and animations will also be reduced to a static frame.
FAQ
What scale should I choose for SVG to PNG?
Base it on the pixels the final image needs, not on the largest option. Web icons are often fine at 1x or 2x. For print, calculate the target pixels from the physical size and DPI, then divide by the SVG's original dimensions. Higher scales mean larger files and a greater chance of hitting canvas limits.
Why is text or an image missing from my PNG?
When an SVG is loaded as an image, it cannot fetch external fonts, linked images, or remote CSS, and scripts do not run. Convert text to paths, embed images as base64, or use a tool that inlines those resources. Missing assets are usually a packaging problem, not a rendering bug.
Can I enlarge the PNG afterwards without losing quality?
No. PNG is a bitmap, so enlarging it only softens the edges. Keep the SVG master if you may need other sizes, or re-export at a larger scale. PNG is a delivery format for a fixed size, not a scalable master.
Related tool：SVG to PNG