Related Tools
Image to SVGVectorize PNG, JPG & WebP
Favicon GeneratorAll sizes + ICO + WebManifest
Image CompressorCompress PNG · JPEG · WebP
Image to Base64Encode images to Data URI
OG Image GeneratorOpen Graph preview cards
Animated SVG IconsPure SVG icon library
SVG Animation GeneratorCSS, SMIL & GSAP
Color Palette GeneratorHarmony-based palettesSVG to PNG Converter — Free Online SVG to PNG with Custom Size & Transparent Background
What's included
Features
About this tool
SVG to PNG Converter — Free, Convert SVG Files and Code to PNG with Custom Size, Scale & Background
Drop an SVG file or paste SVG markup and download a full-resolution PNG in seconds — no account, no watermark, no upload limit. The converter uses the browser's native SVG renderer and HTML Canvas API to produce pixel-perfect output at any resolution.
SVG is a vector format — it scales infinitely without pixelation. PNG is a raster format — it has a fixed pixel grid. This tool bridges the two: it renders your SVG at a specific pixel size onto a canvas and exports that canvas as a PNG. The result is exactly what the browser would render, which means gradients, masks, blend modes, filters, and complex paths all convert correctly.
The scale selector (1×, 2×, 3×, 4×) multiplies the SVG's native dimensions. A 100×100 SVG at 2× produces a 200×200 PNG — the standard @2x asset for Retina/HiDPI screens. Use 4× for print-quality output. The custom size inputs let you set any target width and height in pixels up to 8192×8192. The aspect ratio lock keeps proportions correct when you change one dimension.
Background options give you full control: Transparent preserves SVG transparency in the PNG (useful for logos and icons that need to sit on any background color). White and Black fill the canvas before drawing. Custom opens a color picker and hex input for any background color.
The tool works in two input modes: Upload SVG accepts .svg files via drag-and-drop or the file picker. Paste Code takes raw SVG markup pasted into a text editor — useful for SVG code copied from CSS files, icon libraries, design tools, or inline SVG in HTML. The SVG is parsed to detect native dimensions from the width, height, or viewBox attributes automatically.
All conversion runs in your browser. No files leave your device.
Step by step
How to Use
- 1Load your SVG — file or codeDrag an SVG file onto the upload area or click it to open a file picker. Alternatively, switch to the Paste Code tab and paste raw SVG markup directly into the text editor — useful for SVG code copied from a CSS file, an icon library, browser DevTools, or a design tool export. The tool automatically parses width, height, and viewBox attributes to detect the SVG's native dimensions. Conversion begins immediately as soon as the SVG is loaded.
- 2Set the output scaleUse the scale selector to choose 1×, 2×, 3×, or 4×. The scale multiplies the SVG's native dimensions: a 100×100 SVG at 2× produces a 200×200 PNG, and at 4× produces a 400×400 PNG. Use 2× for standard @2x Retina/HiDPI assets. Use 4× for print-quality output at 300 DPI (when your base SVG is designed at 75 DPI screen resolution). The output width and height fields update automatically when you change the scale.
- 3Set exact dimensions if neededType precise pixel values directly in the Width and Height input fields to override the scale-calculated dimensions. This is useful for platform-specific sizes: 512×512 for macOS app icons, 1024×1024 for iOS App Store, 192×192 for PWA icons, 1200×630 for OG images, or 32×32 for favicons. Toggle the aspect ratio lock (🔒) to keep proportions when you change one dimension — the other adjusts automatically. For favicon packages across all sizes, use the dedicated Favicon Generator instead.
- 4Choose a background colorSelect Transparent to preserve SVG transparency in the output PNG — the checkered pattern in the preview represents transparency and does not appear in the downloaded file. Select White or Black to fill the canvas with a solid color before drawing. Select Custom to open a color picker and hex input for any background color — useful when the PNG needs to sit on a specific colored surface and you want the background pre-filled. The PNG preview on the right updates after each change.
- 5Download or copy the PNGClick Download PNG to save the full-resolution file to your computer — the filename is based on the original SVG filename where available. Click Copy Image to copy the rendered PNG directly to your clipboard via the Clipboard API — paste it into Figma, Sketch, Google Slides, an email, or a chat. The file size comparison strip below the preview shows the SVG source size vs the output PNG size for reference.
- 6Re-convert after settings changesThe tool converts automatically when you load a new SVG. If you change dimensions, scale, or background color after the initial load, click Re-convert to render a fresh PNG at the new settings. This manual trigger prevents excessive rendering when you are typing in the dimension fields. All conversion runs entirely in your browser using the HTML Canvas API — no SVG or PNG data is sent to any server.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
Upload your SVG file by clicking the drop zone or dragging and dropping it. Alternatively, switch to the "Paste Code" tab and paste your SVG markup directly. The tool automatically detects the SVG's native dimensions and converts it immediately. Choose a scale (1×, 2×, 3×, or 4×) and a background (transparent, white, black, or custom color). Click "Download PNG" to save the file, or "Copy Image" to copy it to your clipboard. All conversion happens in your browser — no file is sent to any server.
Select "Transparent" in the Background options (it is the default). When you download the PNG, the areas that were transparent in the SVG will remain transparent in the output file. The checkered pattern in the preview area represents transparency — this is a standard visual convention and does not appear in the actual PNG file. Note that JPEG format does not support transparency — use PNG if you need a transparent background.
The scale multiplier sets the output PNG resolution relative to the SVG's native dimensions. If your SVG is 100×100px, 1× produces a 100×100 PNG, 2× produces 200×200, 3× produces 300×300, and 4× produces 400×400. Higher scales are used for: high-DPI/Retina displays (2× is standard for @2x assets), print output (300 DPI typically requires 3×–4× over screen resolution), and social media images that need a minimum pixel size. The output dimensions update automatically when you change the scale — you can also type custom width and height values directly.
Yes — switch to the "Paste Code" tab and paste your SVG markup directly into the text area. The SVG is parsed and converted immediately as you type. This is useful when you have SVG code copied from a CSS file, a design tool, an icon library, or generated programmatically. The SVG must start with an <svg> tag and include either a viewBox attribute or explicit width and height attributes so the tool can determine the native dimensions. If neither is present, a default 512×512 canvas is used.
Upload your SVG or paste the SVG code. Then manually enter the desired width and height in the Output size fields. Type "512" in the width field — if aspect ratio lock is on (🔒), the height adjusts automatically to maintain the SVG's proportions. For square icons from a square SVG, both dimensions will be 512. Click "Re-convert" to render the PNG at the new size. Common sizes: 512×512 for macOS app icons, 1024×1024 for iOS app store, 192×192 for PWA icons, and 32×32 for favicons. For favicon generation specifically, use our Favicon Generator.
Several factors can cause differences between SVG and PNG rendering: (1) External fonts — SVGs that reference Google Fonts or system fonts by name may use a fallback font in the canvas renderer if the font is not available. Embed fonts as base64 in the SVG or convert text to paths in your design tool before converting. (2) External resources — SVGs that reference external images or CSS files via URLs may not load those resources during browser-based conversion. (3) CSS effects — complex CSS animations, filters, or pseudo-elements may render differently on a canvas. (4) Missing xmlns — the SVG must include xmlns="http://www.w3.org/2000/svg" to be parsed correctly. If differences persist, try converting in a browser that supports the features your SVG uses.
The tool supports output dimensions up to 8192×8192 pixels, set manually in the width and height fields. Practical limits depend on your browser's memory — modern browsers can handle 4096×4096 comfortably, 8192×8192 may be slow on low-memory devices. For very large output, consider using 2× scale with a base SVG designed at half the target resolution rather than extreme scale multipliers. The output PNG file size scales with the pixel count — a 4096×4096 PNG is typically 5–15 MB depending on content complexity.
Yes — once the page is loaded, all conversion runs entirely in your browser using the HTML Canvas API and the browser's built-in SVG renderer. No SVG file or code is sent to any server. The tool works offline after the initial page load, making it safe for converting confidential icons, proprietary illustrations, brand assets, and unreleased design files.