SVGSketch Learn

How to Convert SVG to PNG

Export PNG at 1x, 2x, 3x, or any custom resolution - with the option to fix the source SVG before it becomes a bitmap.

Open SVGSketch

Quick answer

Open the SVG in SVGSketch, open the Export panel on the right, choose PNG, set the scale preset (1x to 4x) or exact pixel dimensions, toggle transparent background, and click Download to save the .png.

Steps at a glance

  1. Open the SVG

    Drag the .svg onto SVGSketch or use File > Open... (Ctrl+O).

  2. Set canvas size

    Deselect everything and confirm width, height, and viewBox in the Geometry panel Document section.

  3. Choose PNG and resolution

    In the Export panel, select PNG and pick a 1x-4x scale preset or explicit pixel dimensions.

  4. Set background

    Toggle transparent background on for overlays, off for a solid white backdrop.

  5. Export

    Click Download to save the PNG locally.

Step 1: Open the SVG in SVGSketch

Drag your .svg onto app.svgsketch.com or use File > Open... (Ctrl+O). The editor renders the SVG live, so what you see on canvas is exactly what the PNG will capture.

If the source SVG has missing fonts, broken external references, or clipping issues, the canvas and the Elements panel will surface the problem before export - fix it here instead of shipping it into the bitmap.

Step 2: Set the canvas size and viewBox

Deselect everything and open the Geometry panel - its Document section shows the root width, height, and ViewBox fields. PNG export samples the document viewBox, so cropping or resizing here directly controls what ends up in the bitmap.

For social media or app icons with strict pixel sizes, set the document to those exact dimensions rather than resizing afterward in another tool.

Step 3: Choose PNG and a resolution

Open the Export panel and select PNG. Choose a scale preset (1x for the document size, 2x or 3x for retina displays, 4x for print-quality raster) or type explicit width and height in pixels - up to 8192 on each axis.

High-DPI exports are the same vector source rendered at higher pixel density, so there is no quality loss compared with starting from a larger document.

Step 4: Decide on background

Toggle "Transparent background" on for icons, logos, and overlay assets that need to sit on different page colors. Toggle it off for a solid white backdrop; if you need a specific background color, draw a full-size rectangle behind the artwork before exporting.

Step 5: Export, and keep the SVG

Click Download and the PNG saves locally - nothing uploads to a server. Save the SVG (File > Save, Ctrl+S) alongside the PNG so you can re-export at a different size later without rebuilding the artwork.

FAQ

Can I export PNG with transparency?

Yes. Toggle "Transparent background" on in the Export panel before exporting and the alpha channel is preserved.

What resolutions does the PNG export support?

PNG export supports 1x, 2x, 3x, and 4x of the document size, plus arbitrary pixel dimensions typed directly into the width and height fields.

Will the PNG look pixelated at high zoom?

Not if you exported at the right multiplier. PNG is rasterized at export time, so render at 2x or higher when the asset will be displayed on retina screens or upscaled.

Can I batch export multiple PNG sizes?

Yes. SVGSketch Pro supports batch ZIP export so you can render the same document at every required size in one pass.

Is the conversion private?

Yes. The SVG never leaves your browser. The PNG is rendered locally with the Canvas API.

Why use SVGSketch instead of a plain online converter?

A plain converter rasterizes the source as-is. SVGSketch lets you fix fonts, paths, colors, and bounds first, so a flawed source SVG does not become a flawed PNG.

Open your SVG in SVGSketch

Start with a blank canvas, import an SVG, or use the editor as a conversion and cleanup step.

Open SVGSketch