SVGSVG to PNG Converter
↑Drop SVG here or click to browse.svg files only
Scale
Output size
×
Background
PNG Preview
🖼PNG preview will appear here
🔖
Bookmark this page
Press Ctrl+D to save this tool in your browser for instant access anytime — no sign-up needed.

SVG to PNG Converter — Free Online SVG to PNG with Custom Size & Transparent Background

Share

About this tool

Free SVG to PNG Converter — 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.

Features

  • Upload SVG via drag-and-drop or file picker — accepts .svg files, auto-detects native width and height from SVG width/height/viewBox attributes
  • Paste SVG code — switch to code tab and paste raw SVG markup for inline SVGs, icon library code, and programmatically generated vectors
  • Scale selector — 1×, 2×, 3×, 4× multiplies native SVG dimensions; 2× for @2x Retina assets, 4× for print-quality output
  • Custom dimensions — type exact pixel values up to 8192×8192; aspect ratio lock keeps proportions when changing one dimension
  • Background options — Transparent (preserves SVG alpha), White, Black, or Custom color with color picker and hex input
  • Auto-convert on load — PNG renders immediately when an SVG is loaded without pressing any button; Re-convert for manual refresh after settings change
  • Live PNG preview — checkered background shows transparency; preview updates after each conversion
  • SVG source preview — small rendered SVG shown below the preview for quick reference
  • Download PNG — full resolution, no watermark, filename based on uploaded file name
  • Copy image to clipboard — one-click via Clipboard API; falls back to download if Clipboard API is unavailable
  • File size comparison — shows SVG source size and output PNG size side by side
  • 100% browser-based — HTML Canvas API + browser SVG renderer; no files sent to server; works offline

How to Use

Either drag and drop an SVG file onto the upload area, click it to browse for a file, or switch to the "Paste Code" tab and paste your SVG markup. The tool auto-detects the SVG's native dimensions and converts immediately. Select a scale from 1×, 2×, 3×, or 4× to set the output size relative to the native SVG size — or type exact pixel values in the width and height fields. Toggle the 🔒 lock to keep the aspect ratio when typing a dimension. Choose a background: Transparent, White, Black, or Custom (with color picker). The PNG preview updates on the right. Click "Download PNG" to save the file, or "Copy Image" to copy to clipboard. Use "Re-convert" after changing settings without changing the SVG. The size comparison at the bottom shows SVG source size vs PNG output size.

Common Use Cases

🎨
Convert SVG icons to PNG for app development
Export SVG icons at multiple resolutions for iOS and Android apps. Use 1× for mdpi (base), 1.5× for hdpi, 2× for xhdpi/Retina, 3× for xxhdpi, and 4× for xxxhdpi. Type exact target sizes (24×24, 48×48, 192×192) in the custom dimension fields. Use a transparent background to keep icons layerable over any UI color. For app store icons (1024×1024 iOS, 512×512 Android), enter the exact size and download. For favicon generation from an SVG logo, use our dedicated Favicon Generator which also produces ICO and multi-size bundles.
🌐
Convert SVG logo to PNG for websites and social media
Many platforms don't support SVG uploads — WordPress media library, Shopify, Facebook, Twitter, and LinkedIn all require raster images. Upload your SVG logo and convert to PNG at the platform's required size. For Twitter/X profile pictures: 400×400 with transparent or white background. For Facebook page cover: 820×312. For LinkedIn company logo: 300×300. For email signatures: 200–300px wide. Use a white background when the destination has a white background, or transparent when you need the logo to adapt to any color.
🖨
Convert SVG illustrations to high-resolution PNG for print
Print production requires images at 300 DPI minimum. If your document is 4" × 4" at 300 DPI, you need a 1200×1200 pixel PNG. Upload your SVG illustration and enter 1200 in the width field — aspect ratio lock adjusts the height automatically. For full-bleed A4 print (210mm × 297mm at 300 DPI), you need 2480×3508 pixels. Type those values directly. The SVG's vector nature means conversion at any size produces sharp, clean edges — far superior to enlarging a raster image.
📧
Convert SVG to PNG for email templates and newsletters
Email clients have inconsistent SVG support — Gmail, Outlook, and Apple Mail each render or block SVG differently. Convert your SVG header images, icons, and illustrations to PNG for reliable cross-client rendering. Use a white background if the email has a white background, so the PNG blends seamlessly. For Retina email rendering (common on Apple Mail and iOS Mail), use 2× scale and set the HTML image tag to display at half the pixel dimensions (<img width="200"> for a 400px PNG).
📸
Generate Open Graph images from SVG templates
If you design OG images as SVG templates in Figma or Inkscape and export the SVG, use this converter to produce the 1200×630 PNG required for og:image meta tags. Enter 1200 width — if the SVG is proportioned correctly, height will auto-set to 630 with aspect ratio lock off, or you can type 630 manually. Use the OG Image Generator if you want to create OG images from scratch without an existing SVG.
🔧
Extract PNG from inline SVG or CSS SVG
Developers often encounter SVG code embedded in CSS (as data URIs or background-image values) or inline in HTML. Copy the SVG markup, switch to "Paste Code", and paste it directly. The tool parses the SVG, renders it at your specified size, and exports to PNG. This is useful when you need a PNG version of an SVG sprite, a CSS-generated icon, or an SVG element inspected from a website using browser DevTools. Pair with our Image to SVG tool for the reverse conversion.

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.