Skip to main content
ToolsHub

SVG ↔ PNG Converter

Turn scalable SVG graphics into crisp PNG images at the exact size you need, with a custom scale factor for high-DPI exports. You can also wrap a raster image into an SVG — all client-side.

Updated

Files never leave your browser
Files never leave your browser

Drop an SVG here, or click to browse

How to use SVG ↔ PNG Converter

Convert SVG vector graphics to crisp PNG images at any resolution — or wrap a raster image inside an SVG container — entirely in your browser. Set a custom scale factor for 1×, 2×, or 4× HiDPI exports, choose a transparent or solid background, and download the rasterised PNG instantly. No server upload, no registration, no file size limit imposed by a remote process.

  1. Upload your SVG file using the file picker or paste SVG source code directly.
  2. Set the output scale factor: 1× for 1:1 pixel export, 2× for HiDPI/Retina, or enter a custom scale.
  3. Choose a background: transparent (PNG alpha), white, or a custom colour.
  4. Preview the rasterised output at the target dimensions.
  5. Click "Download PNG" to save the file at the computed pixel size.

Your data never leaves your device — 100% private processing.

SVG vs. PNG: when to use each format

SVG (Scalable Vector Graphics) is an XML-based format that describes shapes, paths, and text as mathematical instructions. It scales to any size without pixelation, making it ideal for logos, icons, diagrams, and illustrations. The file size of a simple SVG is often smaller than the equivalent PNG. PNG (Portable Network Graphics) is a raster (pixel) format. It is universally supported including in environments that cannot render SVG — old email clients, certain image processing APIs, and print workflows that require flat pixel data. Converting SVG to PNG is necessary when you need an exact pixel-dimension preview, a bitmap for social media card images (Open Graph), or an input for tools that only accept raster formats.

PropertySVGPNG
ScalabilityInfinite, losslessFixed resolution
File size (simple shapes)Very smallLarger
Browser supportAll modern browsersUniversal (all browsers, apps, email)
TransparencyYesYes (alpha channel)
Animation supportYes (SMIL / CSS)No (use GIF/WebP/APNG)
EditabilitySource code, design toolsPixel editing only
Print workflowVector output possibleRequires sufficient DPI

Rasterisation: how SVG is converted to pixels

SVG rasterisation converts the mathematical path descriptions into a pixel grid at a specific resolution. The browser's built-in SVG renderer (based on the SVG specification) interprets the viewBox attribute to determine the coordinate system, then scales the drawing to the target canvas size. The viewBox (e.g., "0 0 24 24" for a 24-unit icon) defines the SVG's internal coordinate space, while the width and height attributes (or your chosen scale factor) determine the output pixel dimensions. A 24×24 viewBox rendered at 4× scale produces a 96×96 px PNG. Text within SVG may render differently across systems unless fonts are embedded or converted to paths.

HiDPI and Retina export best practices

Modern high-resolution displays (Apple Retina, 4K monitors, OLED phones) use 2× or 3× device pixel ratios, meaning a "48 px" CSS icon is physically rendered at 96 or 144 device pixels. Exporting SVG icons at 2× or 3× scale before converting to PNG ensures the raster fallback stays sharp on HiDPI screens. For Open Graph (og:image) tags, export at the target social media preview size: 1200×630 px for most platforms. For favicon generation from SVG, export at 512×512 px and allow the favicon generator to create all required smaller sizes.

Worked examples

4× icon export

Inputs: 24×24 viewBox SVG at 4× scale

Result: 96×96 px PNG

Open Graph image

Inputs: Logo SVG set to 1200×630 output

Result: 1200×630 px PNG

Glossary

SVG
Scalable Vector Graphics — an XML-based format describing 2D shapes and paths mathematically; scales losslessly to any size.
Rasterisation
The process of converting a vector image (SVG) into a pixel-based bitmap (PNG, JPEG) at a specific resolution.
viewBox
An SVG attribute that defines the internal coordinate system of the drawing, independent of the rendered pixel size.
HiDPI / Retina
Displays with a device pixel ratio > 1 (typically 2× or 3×), requiring higher-resolution image assets to appear sharp.
Alpha channel
The transparency component of a PNG image; SVG backgrounds are transparent by default and can be preserved during rasterisation.

Related reading

Free · No spam

Get weekly tool tips & updates

New tools, power-user tips, and productivity hacks — delivered free every Friday.

No spam, ever. Unsubscribe with one click.

Related Image Tools

Explore all Image Tools.