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.

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.

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.