SVG to PNG

SVG to PNG

PNG is the format to use when an SVG needs to ship as a bitmap: app store screenshots, README banners, OG images, UI mockups, email graphics. This converter renders the SVG in your browser, applies the scale factor you choose, and keeps the alpha channel intact so transparent icons and round avatars do not pick up a white box.

How to export an SVG as PNG

  1. 1

    Load your SVG

    Upload a file or paste the SVG markup directly. Inline CSS and <style> blocks are rendered by the browser.

  2. 2

    Set the scale

    Choose a scale factor from 1x to 10x. The output size comes from the SVG width, height or viewBox before scaling.

  3. 3

    Check the transparent preview

    The preview keeps alpha transparency. If you need a solid background, add that background shape inside the SVG before export.

  4. 4

    Download the PNG

    Save image.png from the browser-side canvas. Your SVG markup is not uploaded to a server.

Common output sizes and where they fit

Destination Typical PNG size Notes
App icon master (iOS/Android) 1024 × 1024 Use a square SVG; stores usually require an opaque background
OG/social card 1200 × 630 Put the brand background in the SVG before exporting
README or docs header 1280-1600 wide Keep transparency so it works on light and dark GitHub themes
Slide or presentation asset 1920 wide Export at 2x when it will be projected or scaled
Email header or hero image 600-1200 wide Compress the result and keep it under 200 KB when possible

Why an SVG can look different after export

  • Fractional dimensions. Exporting at 33.5 px forces sub-pixel rounding. Use whole numbers, ideally multiples of 8.
  • Missing fonts. If the SVG references a font that is not available in the browser, the browser substitutes it and kerning can shift. Convert text to paths for the most reliable export.
  • External references. <image href="..."> that points to a remote URL can be blocked or taint the canvas. Embed the asset as base64 before converting.
  • Filters and shadows. Blur and drop-shadow filters compute in user units, so a 3x export can make shadows look softer. Adjust filter values in the source SVG if needed.
  • No explicit size. If an SVG has no width, height or viewBox, the tool falls back to 300 × 150 px before applying the scale factor.

Quick tips

  • Export at 2x or 3x for high-DPI screens, then let CSS or your layout size the PNG down.
  • Keep transparency for icons and logos; add a rectangle to the SVG first if the destination needs a solid colour.
  • Run the PNG through an image compressor to strip metadata and repack the palette.
  • For very large artwork, reduce the scale factor before downloading because PNG stores every pixel.

Frequently Asked Questions

The tool uses a scale factor. Set the SVG width, height or viewBox first, then choose the scale that gives the target PNG size.

Yes, it uses the browser SVG renderer. For the most consistent result, embed external images and convert important text to paths before exporting.

SVG is drawing instructions; PNG is a grid of pixels. A 4000 × 4000 px export stores 16 million pixels with RGBA data, so lowering the scale can reduce the file dramatically.

No. The file or pasted markup is read and rendered locally through the HTML canvas in your browser.

Related Tools