SVG to PNG Converter
Convert SVG vector files to PNG images — custom size, retina scale (1× – 4×), transparent or solid background. Batch convert and download as ZIP. No upload, no server.
2× recommended for retina/HiDPI displays
Leave blank to use SVG's natural size
What This Tool Does
SVG vector to PNG raster — with full control over size, scale, and background.
How to Use This Tool
.svg files onto the upload zone, or click "Choose SVG Files" to browse. You can also paste SVG markup directly using the "Paste SVG Code" button.Logic Behind the Tool
Blob with MIME type image/svg+xml. A temporary object URL is created with URL.createObjectURL() and assigned to an <img> element. The browser renders the SVG as a raster image at the requested dimensions.<canvas> sized to the target pixel dimensions using ctx.drawImage(img, 0, 0, w, h). The canvas is then exported with canvas.toDataURL('image/png') — a lossless PNG with full alpha channel support.width and height attributes on the root <svg> element. Without explicit dimensions, browsers render SVGs at a default size that may not match the target canvas dimensions, producing a blurry scaled result.viewBox attribute first (most reliable source of intrinsic dimensions), then falls back to width/height attributes, ignoring percentage values. This covers the full range of SVG authoring conventions across design tools.JSZip assembles the converted PNGs into a ZIP archive in memory. Each file's data URL is decoded from Base64 and added to the ZIP. zip.generateAsync({type:'blob'}) produces the final binary, then a temporary object URL triggers the browser download.toDataURL('image/png') preserves the alpha channel, so any transparent regions in the SVG become transparent in the PNG output.Frequently Asked Questions
Blurriness in the converted PNG usually means the output dimensions are too small for the intended display size. Use the 2× or 3× scale setting to export at a higher resolution. For example, if your SVG is 32×32 and you're displaying it at 32 CSS pixels on a retina screen, export at 2× (64×64) so it has enough pixels to stay sharp. If you need a specific size, use the Custom mode and enter the exact pixel dimensions directly.
This typically happens with SVGs that reference external resources: custom fonts via @font-face with external URLs, external images via <image> with remote src, or CSS stylesheets loaded from external links. Browser security (CORS) prevents loading these during canvas rendering. To fix: embed fonts as Base64 data URIs in the SVG, use inline <style> instead of external stylesheets, and convert text to outlines/paths in your vector editor before exporting.
SVG is a vector format — it stores shapes as mathematical descriptions (paths, curves, circles), so it scales to any size without quality loss. PNG is a raster format — it stores a fixed grid of pixels, which become blurry if scaled up beyond its resolution. Use SVG when you need an image to display at many different sizes (icons, logos, UI elements). Use PNG when you need a fixed-resolution image for contexts that don't support SVG — email clients, certain image editors, some older platforms, or when you need a specific pixel size for a design specification.
Yes. Select "Transparent" in the Background setting (it's the default). The exported PNG will have a fully transparent background. Any transparency already in the SVG is also preserved. PNG is one of the few raster formats that fully supports an alpha channel, so it's the correct format for logos and icons that need to sit on various background colors.
The tool supports all standard SVG features that browsers can render natively: paths, shapes, text (with system fonts), gradients, patterns, filters, clipping paths, masks, symbols, use references, and inline styles. Features that require external resources — external fonts, external images, external CSS — may not render correctly due to browser security restrictions. Animated SVGs (SMIL or CSS animations) will be converted as a static frame, not as an animated PNG (PNG doesn't support animation).