infoOverview

Designers hand off icons as SVG, but most CMSs, email clients, and social platforms still expect a raster file — and many design tools don't give you pixel-level control over export size or padding. This SVG-to-PNG converter solves that: paste your SVG markup, preview it live, then fine-tune canvas size, background color, scale, and position before exporting a PNG that fits exactly where you need it. Everything runs client-side in your browser, so nothing you paste is ever uploaded anywhere.

checklistHow to Use

1. 1Paste the SVG code into the SVG Code area or select a sample.
2. 2Set the canvas Width and Height (in pixels) under Canvas Settings.
3. 3Specify a Background Color, or enable Transparent Background.
4. 4Adjust Scale and X Offset / Y Offset (drawing position offsets) under SVG Settings.
5. 5Preview the result and click Download as PNG to save the image.

menu_bookSpecifications & Glossary

• SVG (Scalable Vector Graphics): An XML-based vector format defined by the W3C SVG specification. Shapes are described mathematically via a viewBox and path data rather than a fixed pixel grid, so the same file stays crisp whether it's rendered at 16px or 1600px — unlike a raster format such as PNG, which is locked to the resolution it was exported at.
• How the conversion works: SVG is vector data, so it has to be rasterized before it can become a PNG. This tool draws your SVG onto an HTML5 Canvas via drawImage(), then reads the pixels back out with toDataURL('image/png') — the same rasterization step browsers perform internally when they paint an <img> tag.
• Scale: The rendering zoom factor, 100% by default. Because SVG is resolution-independent, bumping this to 200% (or higher) is the easiest way to produce a crisp @2x asset for Retina/HiDPI screens without re-exporting from your design tool.
• X Offset / Y Offset: Shifts the SVG's drawing position within the canvas, in pixels. Useful when your artwork isn't centered in its own viewBox and you need to nudge it into place before export.
• Transparent background: Since PNG supports an alpha channel (transparency), icons and logos can be output with a transparent background.
• Canvas size: The pixel dimensions of the exported PNG, 256×256 by default. Set this to match your final target size (e.g. 512×512 for a high-DPI app icon) instead of upscaling a small bitmap afterward.
• External references & fonts: An <image> tag pointing at an external href, or a web font declared through external CSS, may fail to load because of browser security restrictions. Embed images as base64 data URIs instead, and set fonts through an inline style attribute on the <text> element to be safe.
• Output resolution: The actual pixel size of the PNG is canvas size multiplied by scale. Because SVG is vector data, raising the scale never blurs the edges — but the final pixel count only grows if you also raise the canvas size itself.

lightbulbUse Cases

• Converting SVG icons created in design tools to PNG.
• Creating and verifying assets such as OGP images and favicons.
• Previewing and debugging SVG paths and animations.
• Exporting transparent-background PNG icons as app or website assets.

quizFAQ

Will external image references or web fonts inside my SVG show up in the exported PNG?

Not reliably. Browser security restrictions around the Canvas API can block images loaded from an external URL and web fonts loaded via CSS. To guarantee they show up, embed images as base64 data URIs directly in the SVG, and either convert text to outlines or stick to a standard system font.

What determines the resolution of the exported PNG?

Multiply the width and height you set under Canvas Settings by the Scale percentage — that product is the actual pixel dimensions of the exported PNG. For a crisp Retina-ready asset, set Scale to 200% instead of exporting at 100% and upscaling later.

Can I export a PNG with a transparent background?

Yes — turn on Transparent Background and the canvas is left unpainted before export. PNG supports an alpha channel, which makes it the right format for icons or logos that need to sit on top of any background color.

Are there limits on how large or complex an SVG can be?

Since rendering happens through your browser's Canvas API, an extremely complex path or a very large canvas size can be slow or fail outright, depending on your browser and device. Scale the canvas size down to what you actually need if you run into trouble.

Does SVG animation carry over into the exported PNG?

No. PNG is a still-image format, so SMIL or CSS animation is ignored and the export simply captures whatever frame was showing in the preview at the moment you clicked export. If you need to keep the motion, look at converting to GIF or a video format instead.

Is the SVG markup I paste in saved anywhere?

No. The SVG markup you paste, the preview, and the PNG conversion all run entirely in your browser — nothing is sent to or stored on a server. Closing the tab or reloading the page discards whatever you had entered.