CruxDevCruxDev Tools Studio Prompts
image Utility • Zero-Server Privacy • 100% Client-Side

SVG to PNG Converter

Render SVG code or files to PNG, JPG or WebP at any scale or exact size, with a transparent or solid background, entirely in your browser canvas.

Overview

Converts SVG vector graphics into PNG, JPG or WebP images in your browser. Paste SVG code or open an .svg file, choose a scale such as 2x or 4x or an exact pixel size, keep the background transparent or fill it with a colour, and download the raster file. The SVG is drawn on a local canvas and never uploaded.

How It Works

Open an .svg file or paste the markup, and the tool reads its intrinsic size from the width and height attributes or, when those are missing, from the viewBox. Pick PNG, JPG or WebP and a quality for the lossy formats. Size the output by scale factor, by width, by height or as an exact width and height. Leave the background transparent for PNG and WebP, or choose a colour; JPG always gets one. Download writes a file named with its pixel dimensions.

Step-by-Step Usage Guide

  1. Open an .svg file or paste the SVG code into the editor.
  2. Choose PNG, JPG or WebP as the output format.
  3. Pick a scale such as 2x or 4x, or set an exact width and height in pixels.
  4. Keep the background transparent or choose a fill colour.
  5. Click Download to save the image named with its dimensions.

Technical Specifications & Standards

Width and height values in px, pt, pc, mm, cm, in and em are converted to CSS pixels at 96 per inch, so a 1in icon becomes 96 px at 1x. Percentage sizes fall back to the viewBox, and an SVG with neither uses the browser default of 300 by 150 with a warning. Before rasterising, the markup is rewritten: the root gets the SVG namespace if it lacks one, a viewBox is added from the intrinsic size so a new width and height scale the drawing instead of cropping it, and script elements, on-event attributes and external http links are removed. An SVG loaded as an image cannot run script or fetch resources anyway, which is also why web fonts referenced by URL do not load; embed fonts or convert text to paths first. The image is then drawn onto a canvas of the target size and encoded with canvas.toBlob. Output is capped at 8192 pixels on the longest side, a limit most browsers share for canvas memory.

Targeted Use Cases

  • Exporting an SVG logo as a high-resolution PNG for slides or documents.
  • Creating 2x and 4x raster icons for apps that do not accept SVG.
  • Turning a vector illustration into a JPG for an email newsletter.
  • Producing a WebP social preview image from an SVG design.
  • Checking how an SVG renders at a fixed pixel size before shipping it.

Notes & Gotchas

  • Export at 2x or higher for screens with high pixel density, then let the page scale it down.
  • Convert text to outlines or embed the font, because an SVG drawn as an image cannot fetch web fonts.
  • Use PNG or WebP when you need transparency; JPG fills transparent areas with the background colour.
  • Give the SVG a viewBox so resizing keeps the whole drawing in frame.

Frequently Asked Questions

How do I convert an SVG to a transparent PNG?

Open or paste the SVG, choose PNG, leave Transparent background ticked and click Download. Areas the SVG does not paint stay fully transparent in the PNG.

Can I export the SVG at a larger size without losing quality?

Yes. Vector shapes are redrawn at the target size rather than stretched, so a 4x or 2048 px export stays sharp. The limit is 8192 pixels on the longest side.

Why does the text in my PNG use the wrong font?

Browsers do not load external fonts for an SVG drawn as an image. Embed the font in the SVG as a data URL or convert the text to paths in your editor before converting.

Is my SVG file uploaded anywhere?

No. The file is read and rendered on a canvas inside your browser tab, and the PNG, JPG or WebP is created locally, so it never leaves your device.

Why were scripts removed from my SVG?

Script elements, event handlers and external links are stripped before rendering. An SVG used as an image would ignore them anyway, and removing them keeps the preview safe.

Related tools

  • SVG Optimizer - Optimize SVG files by removing metadata, comments, and unnecessary attributes. Reduce file size.
  • SVG to React / Vue / JSX Converter - Convert raw SVG markup into production-ready React (JSX/TSX), Vue 3, or Svelte component with customizable props.
  • SVG → CSS Background Converter - Convert SVG markup into a CSS background-image: url(data:image/svg+xml,...) with proper URL encoding and optimization.
  • Universal Image Studio - Convert between PNG, JPG, WebP, and GIF. Resize, compress, and download — fully offline.
  • Image Converter (PNG, JPG, WebP, AVIF, BMP, ICO, GIF) - Batch convert images between PNG, JPG, WebP, AVIF, BMP, ICO and GIF in your browser. Set quality, pick a background for transparent areas, keep file names and download everything as one ZIP.
  • Vector Editor (SVG, Pen Tool & Boolean Paths) - Draw and edit vector art in your browser: pen, pencil, shapes and text, gradients, boolean path operations, layers, snapping and smart guides, then export clean SVG, PNG up to 4x or a vector PDF. Nothing is uploaded.