Why does my SVG look different after converting to PNG?

The most common reasons are: (1) The SVG uses currentColor — enable the currentColor replacement option and select the intended colour. (2) The SVG references external fonts that are not available during rasterisation — the tool will warn you if it detects external font references, and the PNG will fall back to the system font. (3) The SVG contains cross-origin images — these may be blocked by browser security policies, resulting in missing image areas. In all cases, the tool shows a colour-coded warning on the file row before you convert.

What does '1x / 2x / 3x' mean and which should I choose?

These are pixel density scales. 1x is the base resolution for standard displays. 2x provides double the pixels for Retina/HiDPI screens (most modern phones and MacBooks). 3x provides triple pixels for the highest-density displays (latest iPhones, high-end Android phones). If you are exporting for web, select 1x and 2x. For iOS app assets, select all three. You can check multiple scales simultaneously — the tool exports all selected scales in one click and organises them in a ZIP.

What is the DPI option and when should I use it?

DPI (dots per inch) is a metadata tag embedded in the PNG file that tells applications at what physical size to display the image. The pixel dimensions of the exported PNG do not change — only the metadata tag changes. Use 72 DPI for web assets (the web standard). Use 96 DPI for Windows screen assets. Use 144 DPI for Apple @2x assets — macOS and iOS recognise 144 DPI as the marker for a Retina-scale image, which matters when dropping assets directly into Xcode or macOS Finder. Leave DPI disabled if you do not have a specific requirement, as web browsers and most apps ignore the DPI tag anyway.

Can I export with a transparent background?

Yes — transparent background is the default option. The exported PNG will have a full alpha channel, preserving any transparency present in the original SVG. If the target platform does not support transparency (for example, some email clients or ad platforms), switch to the white or custom colour background option.

What happens if my SVG has no width or height attributes?

If the SVG has a viewBox attribute but no explicit width or height, the tool automatically infers the dimensions from the viewBox — no warning is shown and conversion proceeds normally. If the SVG has neither a viewBox nor width/height attributes, the tool defaults to 300×150 pixels (the browser default for SVG) and shows a yellow warning on the file row so you can set a custom output size manually.

What is currentColor and why does my icon export as solid black?

currentColor is a CSS keyword used in SVG icons to inherit the text colour from the parent element — it makes icons themeable. When exporting to PNG, there is no CSS context, so currentColor resolves to its browser default (black). Enable the currentColor replacement option and pick the colour you want — the tool replaces all currentColor references in the SVG source before rasterising, so the PNG renders at the exact colour you choose.

How is the ZIP file organised when exporting at multiple scales?

You can choose between two ZIP structures. Folders mode creates separate subfolders (1x/, 2x/, 3x/) with the original filename in each — this matches Xcode asset catalog conventions and most CI/CD pipelines. Flat mode puts all files in the root directory with scale suffixes in the filename (icon.png, icon@2x.png, icon@3x.png) — useful when the downstream tool expects a flat asset directory. Both modes preserve original filenames.

BulkPicTools

SVG to PNG Converter

Convert SVG to PNG online — free, no upload, batch supported. Set custom size, background, DPI, and export 1x/2x/3x for all platforms. All processing is local.

Upload SVG Files

Drag & drop SVG files here, or click to select. Batch upload supported.

Transparent Background • 1x/2x/3x Export • 100% Local

Related ToolsHEIC to JPG Converter

Bulk Image Converter

PNG to JPG Converter

Image to JPG Converter

Image to PNG Converter

Image to WebP Converter

Key Features of SVG to PNG Converter

Flexible Output Size

Export at original SVG size, set a specific width (proportional scaling), or specify exact width and height. Check 1x, 2x, and 3x simultaneously to export all scales in one click.

Batch with Per-File Warnings

Upload any number of SVG files. Each file shows its original dimensions and is automatically checked for issues: missing size info, external fonts, cross-origin images, or unresolved currentColor — with colour-coded warnings before you convert.

currentColor Replacement

Many icon SVGs use currentColor for theming. Enable the replacement option and choose a target color — the tool replaces all currentColor references before rasterising, so the PNG renders exactly as intended.

Background & DPI Control

Transparent, white, or any custom colour background. Optionally embed DPI metadata (72 / 96 / 144 for Apple @2x recognition, or custom) so the PNG opens at the correct physical size in Figma, Photoshop, and print tools.

Guides & Tips

SVG to PNG: When to Use Each Format

SVG and PNG serve different purposes, and understanding when to use each makes the conversion more intentional.

SVG (Scalable Vector Graphics) is resolution-independent — it renders perfectly at any size because it describes shapes mathematically rather than storing pixels. SVGs are ideal for logos, icons, illustrations, and any asset that must display at multiple sizes. The file is also human-readable XML, which means it can be styled and animated with CSS and JavaScript.

PNG (Portable Network Graphics) is a raster format — a fixed grid of pixels at a specific resolution. It supports lossless compression and full alpha-channel transparency, which is why it is the standard for web icons, app assets, and images that must appear on platforms that do not support SVG (email clients, some CMS platforms, older apps).

When PNG is the right choice

Email templates — most email clients do not render SVG reliably
App stores and OS icon requirements — iOS, Android, and macOS require PNG at specific pixel dimensions
Social media uploads — platforms accept PNG universally but SVG support is inconsistent
Figma and design handoff — PNG assets are easier to use for developers who are not working with SVG tooling
Third-party platforms — CMSes, ad platforms, and analytics tools often accept PNG but not SVG

Exporting Icons at 1x / 2x / 3x — What the Scales Mean

Multi-scale PNG export is the standard workflow for icon and UI asset delivery across iOS, Android, and web.

Why multiple scales exist

Modern device screens have varying pixel densities — a phone screen may pack 3 physical pixels into every 1 logical pixel (3x / @3x). If you export only a 1x PNG and display it on a Retina or high-DPI screen, it will appear blurry because the OS scales it up. Exporting at 2x and 3x provides the additional pixel density the device needs.

Scale naming conventions

1x — base resolution, for standard displays. File: icon.png
2x (@2x) — double pixel density, for Retina displays (most modern phones and MacBooks). File: icon@2x.png
3x (@3x) — triple pixel density, for high-DPI Android and the latest iPhones. File: icon@3x.png

ZIP folder structure

When exporting multiple scales, the tool generates a ZIP with scale folders (1x/, 2x/, 3x/) or a flat structure with scale suffixes — matching the folder conventions expected by Xcode asset catalogs, Android drawable folders, and web build pipelines.

DPI and Apple @2x recognition

Setting DPI metadata to 144 causes macOS and iOS to identify the PNG as a @2x asset — useful when dropping assets directly into Xcode or Finder. The DPI value does not change the pixel dimensions; it only writes a metadata tag that applications read to determine the intended display size.

Handling currentColor in SVG Icons

currentColor is a CSS keyword that tells an SVG element to inherit its fill or stroke colour from the surrounding CSS context — typically the text colour (color) of the parent element. It is the standard technique for making icon libraries themeable.

When you embed an SVG inline in HTML, currentColor picks up whatever color value is set on the parent element. But when you export to PNG — a static raster format — there is no CSS context. The browser will resolve currentColor to its default value (usually black), which may not match the intended appearance.

How the replacement works

Before rasterising, the tool scans the SVG source code and replaces every instance of currentColor (in fill, stroke, stop-color, and other properties) with the hex colour you specify. The result is a PNG that renders at the exact colour you chose, regardless of any CSS context.

When to enable it

Your icon appears entirely black or invisible in the PNG preview
You are exporting icons for use on a coloured background and need the icon in white or a specific colour
You are exporting icons for a design system handoff where the icon should appear in the brand colour

The tool automatically detects SVGs that contain currentColor and shows a blue info badge on the file row — a reminder to enable the replacement option if the default rendering does not match your intent.

Batch SVG to PNG for Design Workflows

The most common batch SVG-to-PNG use case is icon set export. A typical design system might contain hundreds of SVG icons that need to be exported as PNG for documentation, app stores, or platforms that do not support SVG.

Use case 1 — iOS and macOS app icon export

Xcode requires PNG assets at specific sizes for app icons (1024×1024 for the App Store, plus smaller sizes for various contexts). Upload the master SVG, set custom width and height, enable 1x/2x/3x export, set DPI to 144, and download the ZIP. The folder structure matches what Xcode's asset catalog expects.

Use case 2 — Design system documentation

Icon documentation sites and Storybook instances often display PNG previews alongside code examples. Upload the full icon set, export at 24×24 (1x) and 48×48 (2x), and download as ZIP. All filenames are preserved.

Use case 3 — Email template assets

Most email clients (Outlook, Gmail mobile) do not render inline SVG. Export your SVG icons as PNG at the exact pixel size used in the template — typically 24px or 32px — with white or transparent background to match the email design.

Use case 4 — Social media and ad platform uploads

Ad platforms (Google Ads, Meta, LinkedIn) accept PNG but not SVG. Export your logo or icon at the required dimensions with the correct background colour (white for platforms that do not support transparency) in a single batch operation.

How to use

Upload SVG Files

Drag and drop your SVG files or click to select. Each file immediately shows a thumbnail preview, original dimensions, and any detected warnings (missing size, external fonts, currentColor).

Configure Output

Set output size (original / width / custom) and select export scales (1x, 2x, 3x — multiple allowed). Choose background, enable currentColor replacement if needed, and optionally embed DPI metadata.

Convert & Download

Click Convert. Download individual PNGs from each file row, or download all as a ZIP — with scale folders (1x/, 2x/, 3x/) or flat structure with scale suffixes (@2x, @3x).

Frequently Asked Questions About SVG to PNG Converter

All processing happens locally in your browser using the Canvas API. Your SVG files are never uploaded to any server. This means your files remain private, conversion works offline after the page has loaded, and there are no file size limits imposed by upload restrictions.