UtilityKit

500+ fast, free tools. Most run in your browser only; Image & PDF tools upload files to the backend when you run them.

SVG to PNG

Rasterise SVG vectors to sharp PNG

About SVG to PNG

SVG files scale to any size without pixelation. But most platforms outside the browser cannot read SVG: LinkedIn rejects it, Slack will not embed it, Open Graph previews skip it, and print shops need a raster file. This tool loads your SVG in the browser's native renderer — the same engine that draws SVG on web pages — paints it onto a Canvas at your chosen resolution, and exports a PNG. Complex features like CSS filters, gradients, clip paths, and embedded webfonts are preserved because the browser renders them. Set the output width and height auto-derives from the viewBox so logos never come out squished. Retina presets (2x, 3x) are one click away. Transparent backgrounds stay transparent by default, or pick a solid fill for platforms that flatten alpha. Your brand assets never leave your tab — rasterisation happens locally without any server upload.

Why use SVG to PNG

Render at Any Resolution

Set the output to exactly 200×200, 1024×1024, or 2400×1200 pixels. Because SVG is a vector format, the browser renders it pixel-perfect at any size — unlike upscaling a small PNG, which introduces blur and compression artefacts at every doubling of size.

Transparent Background Preserved

Empty canvas areas in the SVG remain transparent in the PNG output by default, giving you a clean asset that composites over any background colour. Optionally pick a solid fill if the destination platform flattens alpha or if you need a specific white or dark background behind the graphic.

2x and 3x Retina Export

One-click presets render the SVG at twice or three times the base size for retina-ready assets. Export a 24×24 icon at 48×48 for standard retina or 72×72 for high-DPI without manually calculating dimensions or running the export tool multiple times for different screen densities.

Aspect-Ratio Preserved

Setting only the output width causes the tool to auto-derive height from the SVG viewBox, so logos and icons always emerge at the correct proportions. Manual override is available when you need a specific canvas size, such as exactly 1200×630 for an Open Graph image.

Embedded Fonts and Filters

The browser's SVG renderer handles inline CSS filters, gradients, masks, clip paths, and embedded webfonts — the same complex features that simpler server-side converters silently drop. What you see in the browser is exactly what you get in the PNG export.

Browser-Local Rasterise

Brand logos, unreleased product mockups, and confidential design assets stay inside your browser tab. The Canvas and Image APIs rasterise the SVG locally — there is no server upload, no file transfer, and no log of your assets on any external system.

How to use SVG to PNG

Paste SVG markup directly into the text input, or upload an .svg file from your device.
Set the output width in pixels — height is automatically calculated from the SVG viewBox to preserve the original aspect ratio.
Use a 2x or 3x retina preset if exporting assets for high-DPI screens, app icons, or marketing materials.
Choose whether to keep the background transparent or fill it with a solid colour for platforms that do not support alpha.
Click Render and inspect the preview — zoom in to check that gradients, shadows, and text have rendered correctly.
Download the PNG at the specified resolution.

When to use SVG to PNG

Exporting a Figma or Illustrator SVG as a PNG for LinkedIn, Slack, or another platform that rejects SVG uploads.
Creating Open Graph images (1200×630 PNG) from an SVG logo or illustration for social sharing previews.
Generating retina app icons at 2x and 3x from a single SVG source without opening a design tool.
Preparing print-ready PNG assets when the print vendor requires raster images rather than vector files.
Embedding an SVG graphic in a Word document, PowerPoint deck, or PDF form that does not support SVG.
Testing what an SVG looks like rasterised at small sizes — such as 16×16 or 32×32 — before committing to a favicon.

Examples

Logo for OG image

Input: logo.svg (8 KB, viewBox 0 0 240 80)

Output: PNG: 1200×400 transparent, 18 KB — perfect for Open Graph or LinkedIn share image

Icon set at 2x

Input: icon.svg (2 KB, viewBox 0 0 24 24)

Output: PNG: 48×48 transparent (2x retina from 24×24 base), 0.6 KB

Marketing graphic with gradient

Input: hero.svg (45 KB, gradient + drop shadow + webfont)

Output: PNG: 1920×1080 transparent, 280 KB — preserves gradient and shadow

Tips

Use 2x export for retina assets — a 24×24 icon exported at 48×48 looks crisp on all modern screens without wasting bytes on 3x when 2x already exceeds the screen's DPI.
If your SVG uses a Google Font via @font-face, either load the page with network access or convert the text to outlines in your design tool to guarantee the font renders correctly on export.
Set only the width and let aspect ratio auto-derive from viewBox — manually entering both dimensions can accidentally squish logos if they differ from the original proportions.
For Open Graph images (1200×630), set both width and height explicitly so the PNG has the exact canvas size Facebook and Twitter expect for share card previews.
Keep the background transparent unless your destination flattens alpha — a transparent PNG composites cleanly over any surface, while a white-filled PNG is visually wrong on dark pages.

Frequently Asked Questions

What size PNG should I export for retina screens?▾

Export at 2x the intended display size for standard retina and 3x for high-DPI mobile screens. For example, a 24×24 icon should be exported as 48×48 (2x) or 72×72 (3x). Most platforms and CSS frameworks expect the 2x variant tagged with @2x in the filename.

Will my SVG's transparent background be preserved?▾

Yes. The default output is a transparent PNG. If the SVG has no explicit background fill, those pixels are exported as fully transparent in the PNG. You can optionally choose a solid background colour if the destination platform does not support alpha transparency.

Can I export at 4x or higher resolutions?▾

Yes. You can set any width manually — there are no hard limits beyond your browser's Canvas memory ceiling, which is typically 4096×4096 or 8192×8192 depending on the device. Very large exports may be slow on older machines.

What if my SVG uses external fonts?▾

Fonts referenced via @font-face with a URL load from the network and render in the browser before export. If the font is unavailable, the browser falls back to a system font, which may shift text layout. To guarantee font rendering, convert text to outlines in your design tool before exporting the SVG.

Why does my exported PNG look pixelated?▾

Pixelation occurs when the output resolution is too low — for example exporting a 24×24 icon at 24×24 and then displaying it at 96×96. Re-export at a higher resolution (2x or 3x the display size) to get crisp results. SVG never loses quality at the source; only the exported PNG resolution determines sharpness.

Can I batch convert multiple SVGs?▾

The current tool converts one SVG at a time to let you inspect the preview and dial in the correct dimensions for each asset. For batch conversion of many identically sized icons, download the first to confirm settings, then process the remainder using the same configuration.

Will gradients and filters render correctly?▾

Yes. This tool uses the browser's native SVG renderer — the same engine that draws gradients, drop shadows, blur filters, and clip paths on web pages. The PNG export is a pixel-accurate snapshot of what the browser renders, so complex visual effects are preserved.

Are my files uploaded anywhere?▾

No. Rasterisation uses the browser's Image and Canvas APIs entirely in your tab. SVG content is never sent to any server. This means unreleased brand assets and confidential design mockups stay completely private throughout the conversion process.

Explore the category

Glossary

SVG viewBox: An attribute in SVG files that defines the internal coordinate system: four values specifying the origin x, origin y, width, and height of the drawing canvas. The viewBox is what allows the tool to auto-calculate the output aspect ratio when you specify only one output dimension.
Rasterise: The process of converting a vector graphic (defined by mathematical curves and shapes) into a raster image (a fixed grid of pixels). Rasterisation is irreversible — the resulting PNG cannot be scaled up without quality loss, unlike the original SVG.
Transparent PNG: A PNG file that includes an alpha channel, allowing individual pixels to be fully or partially transparent. Transparent PNGs composite cleanly over coloured backgrounds without a visible white or black bounding box around the graphic.
Retina (2x/3x): Display technology that packs more physical pixels into each logical pixel. A retina screen has a device pixel ratio (DPR) of 2 or 3, meaning an image exported at 2x or 3x the intended CSS size renders sharply instead of appearing blurry.
Vector: An image format that stores shapes as mathematical descriptions — points, curves, and fills — rather than pixels. Vector files like SVG can be scaled to any size without loss of quality because the renderer re-calculates the pixel output for each new size.
Anti-aliasing: A rendering technique that blends edge pixels with the background colour to produce smooth, non-jagged curves and diagonal lines at any resolution. The browser's SVG renderer applies anti-aliasing automatically, which is why exported PNGs look smoother than screenshots taken with integer scaling.