Overview
What does this SVG to PNG converter do?
The SVG to PNG converter rasterizes vector SVG markup to a fixed pixel-size PNG image, at any scale you choose. Drop a file or paste markup, pick a scale (1x to 8x), pick a background (transparent or color), and download. Everything happens in your browser using the Canvas API. No upload, no server, no tracking.
When you need a raster
Why convert SVG to PNG?
App icons
iOS and Android require specific PNG sizes (1024×1024 for stores, plus a dozen smaller variants). Export an SVG once, generate PNGs at every needed size.
Social media
Platforms like Facebook, Twitter, and LinkedIn favor PNG/JPG for profile and cover images. SVG often gets rejected or rendered incorrectly.
Email signatures
Many email clients (Outlook, older Gmail) cannot render inline SVG. PNG is universally supported.
Slide decks
PowerPoint and Keynote handle SVG inconsistently. PNG embeds cleanly with predictable sizing.
Print drivers always rasterize at some point. Pre-rasterizing at high DPI (4x or 8x) gives you control over the final pixel density.
Logos for legacy platforms
Older CMSes, e-commerce platforms, and B2B portals often require PNG uploads. Convert once, use everywhere.
DPI in plain English
Picking the right scale
1x
The SVG's intrinsic size. Use this for logos that will display at exact pixel sizes on standard displays.
2x (retina)
Doubles the pixel count. Required for HiDPI displays — modern phones, MacBooks, iPads, and most laptops sold since 2017. If you're not sure, pick 2x.
3x and 4x
For larger displays with even higher pixel density (some smartphones), or for use cases where the image might be zoomed. App icons usually need 4x of the base size.
6x to 8x
For print at 300-600 DPI, large promotional materials, or any situation where you want to future-proof the asset.
When in doubt, go higher
The choice that breaks PNGs
Transparent vs solid background
PNG supports an alpha channel — transparency. Choose "transparent" if your SVG has no inherent background (logos, icons, signatures). This preserves the alpha channel so the PNG sits on whatever color background you place it on.
Choose a solid color if:
- Your destination doesn't render PNG transparency well (some legacy email clients)
- The final use will be on a known background (white slide, dark hero)
- You're avoiding the 'wrong-color halo' problem where anti-aliased edges appear as a fringe on the destination background
Edge cases
Things that can go wrong
External fonts
If your SVG references a Google Font or other external font via@font-face, the rasterizer can't fetch it (cross-origin). The PNG will fall back to a default font and look wrong. Fix: convert text to outlines/paths before exporting from your design tool, or embed the font data inline.
External images
SVGs that <use> external images may fail to load due to CORS. Embed images as base64 data URIs first.
Filters and effects
Most SVG filters (Gaussian blur, drop shadow, color matrix) rasterize correctly in modern browsers. Older browsers or unusual filter chains may not. Test the preview before downloading.
No declared dimensions
If your SVG has only a viewBox and no width/height attributes, the tool uses the viewBox dimensions. If neither is set, it defaults to 512×512.
Behind the scenes
Privacy and how it runs
Your file never uploads
Common questions
Is the output PNG lossless?
Yes. PNG uses lossless compression — every pixel is preserved exactly. Re-saving a PNG repeatedly does not degrade the image. That's different from JPG, which is lossy and degrades with each re-save.
What's the largest PNG I can create?
Browsers limit canvas size to roughly 16,384 × 16,384 pixels (Safari is sometimes lower at 4,096 × 4,096). A 512×512 SVG at 8x gives 4,096 × 4,096, which works everywhere.
Can I batch convert multiple SVGs?
One at a time in this tool. For batch SVG → PNG at the command line, use ImageMagick (magick convert input.svg -resize 200% output.png) or Inkscape's CLI.
SVG looks crisp, PNG looks blurry. Why?
You're exporting at 1x to a HiDPI display. Pick 2x — your display has twice as many physical pixels per CSS pixel, so a 1x export shows up "scaled" and blurry. 2x maps each PNG pixel to one physical display pixel.
Why does my PNG have jagged edges?
Aliasing at the rasterization step. Increase the scale (a 4x or 6x PNG will look smoother than 1x even when displayed at the original size). The smoother edges come from anti-aliasing, which works better at higher resolutions.
Can I export SVG to JPG instead?
Not in this tool, but the workflow is: export to PNG here, then use our PNG to JPG converter. (JPG cannot represent transparency, so pick a solid background color first.)