SVG to PNG — Free, No Upload

How to convert SVG to PNG

1. Drop your SVG file onto the upload area, or click to browse. The SVG is loaded and its natural dimensions are displayed.
2. Set the output width in pixels if you need a specific size — leave it blank to keep the SVG's original dimensions. Choose a scale multiplier (1×, 2×, or 3×) for retina and high-DPI displays.
3. Select a background. SVGs often have transparent backgrounds — choose transparent to preserve that, or white or black if the PNG will be used in a context that does not support transparency.
4. Click Convert to PNG. The PNG downloads immediately. Nothing is sent to a server.

You can verify this yourself: open DevTools → Network while converting. You will see the initial page load and no further requests — the conversion runs entirely in your browser using the Canvas API.

When to convert SVG to PNG

• Sending files to people who cannot open SVG. SVG is a vector format that most image viewers, email clients, and non-technical tools cannot display. Converting to PNG creates a universally compatible raster image that opens in any photo viewer, browser, and image processing app.
• Uploading to platforms that do not accept SVG. Social media platforms (Instagram, Twitter, LinkedIn, Facebook), e-commerce platforms (Shopify, Amazon), and many CMS platforms reject SVG uploads for security reasons. PNG is the safe, accepted format for rasterized graphics.
• Using vector artwork at a fixed size. When you know the exact pixel dimensions needed — a 1200×630px Open Graph image, a 400×400px avatar, a 300×250px ad banner — converting the SVG to PNG at that exact size produces a pixel-perfect output without the complexity of CSS scaling or browser rendering differences.
• Creating retina-ready assets. Use the 2× or 3× scale option to export a PNG at double or triple the display size. Serve the 2× version on retina screens for sharp graphics on high-DPI displays.
• Preparing icons for use in apps and documents. App icons, document templates, and presentation slides often need raster formats. Converting SVG icons to PNG at the required sizes (16×16, 32×32, 64×64, 128×128, 512×512) is a common workflow in design and development.
• Archiving vector files with a visual reference. Keeping a PNG alongside an SVG in a design archive provides a quick visual preview without needing an SVG-capable viewer.

SVG vs. PNG: understanding the trade-off

SVG (Scalable Vector Graphics) stores images as mathematical descriptions of shapes, paths, and text. An SVG of a circle is literally an XML element describing the circle's position, radius, and fill colour. This means SVG files are infinitely scalable — zoom in as far as you like and the edges remain perfectly sharp.

PNG (Portable Network Graphics) stores images as a grid of pixels. Every pixel has an explicit colour value. At any fixed display size, a PNG looks identical to the SVG — but if you zoom in beyond 100%, you will see individual pixels. At the right size, the difference is invisible. At the wrong size (especially for icons that must render at multiple sizes), the difference is significant.

The correct workflow for icons and logos is to keep the master file as SVG and export PNG versions at each required size. Never generate the PNG at a small size and try to scale it up — always export from the SVG at the target size.

Output size and the scale option

The width field sets the output size in CSS pixels. On a standard display, 1 CSS pixel = 1 device pixel. On a retina display (2× device pixel ratio), 1 CSS pixel = 4 device pixels (2×2). An image displayed at 200px CSS width on a retina screen needs 400 actual pixels to appear sharp.

The scale multiplier handles this: if you need a PNG to display at 200px on a retina screen, set the output width to 200 and the scale to 2×. The result is a 400×400px PNG that will appear perfectly sharp on retina and standard displays alike.

Common size guidelines:

• Open Graph / social sharing images: 1200×630px, scale 1×
• Twitter card images: 1200×600px, scale 1×
• Favicon: export at 16×16, 32×32, 48×48, and 512×512 separately, then use an ICO generator
• App icon (iOS): 1024×1024px, scale 1× (Apple's App Store submission size)
• Standard web image: use 2× scale for any image that will appear at less than half the SVG's natural width on screen

How browser-based SVG to PNG conversion works

The conversion uses a two-step process that runs entirely in your browser:

First, the SVG text is loaded into an <img> element via a blob URL (URL.createObjectURL). The browser's built-in SVG renderer parses the SVG XML, lays out the vector elements, applies styles, and rasterises the result at the requested pixel dimensions. This is the same rendering engine used to display SVG images on web pages — it correctly handles paths, gradients, filters, text, and most SVG features.

Second, the rendered image is drawn onto an HTML5 <canvas> element using ctx.drawImage(). The canvas provides access to the pixel data, which is then exported to PNG format using canvas.toBlob('image/png'). The PNG blob is offered as a download via a temporary object URL.

The canvas step also applies the background colour option: before drawing the SVG, the canvas is either left transparent (default) or filled with the chosen colour. This is why the transparent option preserves SVG transparency while the white and black options produce a solid-background PNG.

Limits and what to expect

• External resources. SVG files can reference external images, fonts, or stylesheets. Because the conversion runs locally in your browser without fetching network resources, external references in the SVG may not render. Self-contained SVGs (no external resources) convert reliably; SVGs that reference fonts or assets hosted at external URLs may render with fallbacks.
• Complex filters and effects. Most SVG filters (blur, drop shadow, colour matrix) render correctly in modern browsers. Very complex filter chains or browser-specific SVG extensions may produce different output than an SVG editor or server-side renderer would produce.
• Text rendering. SVG text uses fonts available in your browser. If the SVG specifies a font by name that is not installed on your device, the browser substitutes a fallback font. For consistent text rendering across devices, use SVG text-as-paths (convert text to outlines in your vector editor before exporting).
• Maximum canvas size. Browsers impose a maximum canvas size (typically 16,384×16,384px on most platforms). Very large output dimensions may fail silently or produce a blank image on some browsers.
• Output is always PNG. This tool converts SVG to PNG. For other output formats, use the Convert Image tool to convert the PNG further.
• Browser support: Chrome 90+, Firefox 90+, Safari 15+, Edge 90+.

Privacy: what happens to your SVG

Your SVG file is read into browser memory using the File API and converted to PNG using the Canvas API. Nothing is sent to a server. The PNG output is created in browser memory and downloaded directly to your device.

SVG files sometimes contain embedded business logic, proprietary design assets, or sensitive schematic information. Browser-based conversion means that content never leaves your device — open DevTools → Network while converting to confirm zero outbound activity.

Frequently asked questions