SVG to PNG: When Vector Graphics Break and How to Convert Them Correctly

Keyword target: “svg to png converter” — 30K+ monthly searches, developer audience with high intent. Existing tools have poor UX and zero explanation of resolution considerations. A guide that actually explains the technical decisions (DPI, transparency, when to use PNG vs SVG) will significantly outperform thin tool pages.

---

SVG is the correct format for almost everything it is used for: logos, icons, illustrations, UI elements, diagrams. It scales infinitely, has tiny file sizes, animates cleanly, and can be styled with CSS. For web use, it is strictly superior to rasterized alternatives for these use cases.

And yet there are specific situations where SVG simply does not work, and you need a PNG instead. Understanding exactly when and why — and how to convert correctly when you do — is part of the practical toolkit for any developer or designer working with graphics.

When SVG breaks down

Email clients. Email HTML rendering is notoriously inconsistent, but on the SVG question it is nearly unanimous: do not use SVG in emails. Gmail ignores SVG entirely — the image does not render at all, which is worse than looking wrong. Outlook uses Microsoft Word’s rendering engine for HTML emails and has limited or no SVG support depending on version. Apple Mail supports SVG in some contexts. The safe choice for any email image — logos, banners, signatures — is PNG.

Old iOS webviews. SVG support in iOS WebKit is comprehensive in the main browser, but some older UIWebView implementations in apps have SVG rendering bugs. If you are building a mobile app using a web view component and your users might be on older iOS versions, PNG is safer for critical UI elements.

Open Graph images. When you share a URL on social media (Twitter, Facebook, LinkedIn, Slack), these platforms fetch the page’s open graph image and display it in the preview card. All of these platforms expect rasterized images — JPEG or PNG. SVG is not accepted for OG images. Your site’s social preview image needs to be a PNG or JPG regardless of what format you use everywhere else.

PDF embedding. Some PDF workflows and generators expect raster images. When embedding a logo in a PDF generated server-side using libraries like jsPDF or WeasyPrint, PNG is more reliably handled than SVG. SVG can be embedded in PDF natively, but the implementation varies across tools.

Apps and platforms with limited SVG support. Many SaaS platforms, content management systems, and design tools either do not accept SVG uploads (for security reasons — SVG is XML and can contain scripts) or handle them inconsistently. If a client’s platform cannot accept SVG, you need PNG.

App store assets. Apple App Store and Google Play both require PNG format for app icons, screenshots, and promotional images. SVG is not accepted regardless of its quality advantages.

Legacy browser rendering inconsistencies. While modern browsers handle SVG well, complex SVG files with advanced filter effects, clip paths, or gradients sometimes render differently across browsers. Converting to PNG at the required resolution eliminates rendering inconsistencies at the cost of scalability.

The resolution question

This is where most SVG to PNG conversions go wrong.

SVG is a vector format — it has no inherent resolution. When you convert it to PNG, you are choosing a resolution at that moment. The PNG is then locked to those dimensions. If you later need it at a different size, you convert again from the original SVG (not from the PNG — never upscale a rasterized PNG, it only degrades quality).

For web use:

Standard displays: export at the display dimensions. A logo that appears at 200px wide on your website should be exported at 200px wide minimum.

Retina/HiDPI displays: export at 2× the display dimensions. A 200px logo should be exported at 400px. Most modern websites serve this as a 2× asset and reference it with srcset or CSS image-set(). If you are exporting for a React or Vue component that handles retina itself, 2× is the standard.

For email:

Export at 2× the intended display size. Email clients on retina devices will use the full pixel density, and unlike web pages, email has no mechanism for serving different assets to retina vs standard displays. A header image that displays at 600px wide in an email should be exported as a 1200px PNG.

For app store icons:

Apple requires multiple sizes. The base is typically 1024×1024px for the App Store, with smaller sizes generated from that. When converting an SVG app icon to PNG, start at 1024×1024 and the smaller sizes can be generated from that PNG (for icons this small and sharp, re-rasterizing from SVG is cleaner than downscaling, but the differences are minor).

For print:

Print resolution is measured in DPI relative to physical size. 300 DPI at the print dimensions is the standard. A logo printed at 3 inches wide needs 900px (3 inches × 300 DPI). When in doubt, export larger rather than smaller — downscaling is always cleaner than upscaling.

Transparency in SVG to PNG conversion

SVG files frequently have transparent backgrounds — logos and icons are designed this way so they can be placed over any color background. PNG natively supports transparency (alpha channel). This is one of the reasons PNG is the correct raster format for SVG conversions rather than JPG (which has no alpha channel).

When converting SVG to PNG using browser canvas, the default behavior preserves transparency if the PNG is saved with an alpha channel. TinyTransform’s SVG to PNG tool maintains the alpha channel by default — a transparent SVG background becomes a transparent PNG background.

If you need a specific background color instead of transparency — for example, converting a logo for use on a white email background — you can fill the background before exporting. Most conversion tools have a background color option for this purpose.

The browser canvas approach: SVG is loaded as an Image object via an ObjectURL, rendered onto a canvas element, then exported with canvas.toBlob('image/png'). Canvas preserves transparency by default when the PNG encoder is used. The conversion runs at whatever pixel dimensions you specify.

DPI settings and their actual meaning

“Export at 300 DPI” sounds precise, but DPI in raster images is metadata, not a physical property of the image. A PNG file stores DPI as metadata that some applications use to determine the physical print size, but the actual image quality is determined by the pixel count, not the DPI value.

An image that is 900 pixels wide:

• Stored with 300 DPI metadata: a print application will size it at 3 inches wide
• Stored with 72 DPI metadata: a print application will size it at 12.5 inches wide
• The actual pixels and visual quality are identical — only the intended print size interpretation differs

For web use, DPI metadata is irrelevant — browsers render at pixel dimensions regardless of metadata. For print, getting the DPI metadata right ensures print applications interpret the intended size correctly, but the actual quality depends on whether you have enough pixels for that size at that DPI.

When exporting SVG to PNG for print, the practical workflow is: calculate the pixel count you need (print width in inches × 300 DPI = pixels), export at that pixel count, and set the DPI metadata to 300.

How to convert SVG to PNG on TinyTransform

1. Open SVG to PNG
2. Drop your SVG file
3. Enter the output width in pixels (height updates automatically maintaining aspect ratio)
4. Choose whether to preserve transparency or fill with a background color
5. Click Convert
6. Download the PNG

The tool renders the SVG at the specified pixel dimensions using browser canvas. For complex SVGs with advanced CSS, filters, or embedded images, the canvas rendering uses the browser’s SVG implementation — the same engine that renders SVG on web pages — which handles complex SVG features correctly.

When to convert back from PNG to SVG

You cannot convert back. PNG is a raster format — it stores pixel values. SVG is a vector format — it stores geometric instructions. There is no reliable way to reconstruct vector paths from pixel data through automated conversion. Auto-tracing tools like Illustrator’s Image Trace or Inkscape’s trace bitmap produce approximations that are useful for simple graphics and unusable for complex ones.

This is why you should always keep the original SVG. Convert to PNG for specific deployment contexts, but the SVG is your source of truth. If you have only the PNG, you have only the rasterized version at that specific resolution.

For all SVG-to-PNG conversions, maintain a folder of original SVG files alongside the exported PNGs, labeled by resolution. This makes it straightforward to re-export at different sizes without starting from scratch.