SVG to PNG

About this tool

SVG to PNG Converter rasterises an SVG file into a PNG at the size you choose, entirely in your browser. Set an exact output width and height, or leave them blank and pick a scale such as 2x for sharp high-DPI exports. The background stays transparent by default, or you can fill it with white, black, or a custom colour for platforms that flatten alpha. SVG scales to any size without pixelation, but many platforms cannot read it: LinkedIn rejects it, Slack will not embed it, Open Graph previews skip it, and print shops want a raster file. The tool draws your SVG with the browser's native renderer, the same engine that displays SVG on web pages, so gradients, clip paths, and filters come out as they look on screen. Your files never leave your tab.

Why use it

• 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 crisply 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 white, black or a custom fill if the destination platform flattens alpha.

• Scale Slider for Retina: With width and height left blank, the Scale slider multiplies the SVG's own size from 1× up to 8×. Export a 24×24 icon at 48×48 (2×) or 72×72 (3×) without calculating dimensions by hand.

• Aspect-Ratio Preserved: Setting only the output width (or only the height) makes the tool derive the other side from the SVG's proportions, so logos and icons emerge at the correct shape. Fill in both when you need a specific canvas size, such as exactly 1200×630 for an Open Graph image.

• Native Browser Rendering: The browser's SVG renderer handles gradients, masks, clip paths, filters and inline styles, so what you see in the preview is what you get in the PNG.

• 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

1. Upload an .svg file from your device by clicking or dragging it onto the upload area.
2. Optionally set an Output width in pixels — leave height blank and it is calculated from the SVG's proportions.
3. Or leave both blank and move the Scale slider (1× to 8×, default 2×) for retina-ready exports.
4. Choose a Background: Transparent, White, Black, or Custom colour.
5. Click Convert to PNG and inspect the preview and the reported pixel size.
6. Click Download PNG to save the file.

When it helps

• 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

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 web font, convert the text to outlines in your design tool before exporting — fonts loaded from a URL are not available when the SVG is rendered as an image.
• Set only the width and let the height follow the SVG's proportions — 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

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.