📷 SVG to Raster

Paste or drop an SVG, pick dimensions and format, and export a pixel-perfect PNG or JPEG — all in your browser.

SVG input
Paste, drop, or upload an SVG to begin.
Output size
×
📐 Size presets

Presets ignore the aspect lock so they always set both dimensions.

Format

PNG is lossless — quality slider is disabled.

Preview
Live preview appears here once you paste valid SVG markup.
Source SVG — × —
Output 1200 × 630

About SVG to Raster

SVG is great in the browser — it scales crisply and stays editable as code — but you sometimes need a pixel image: a social-card preview, a chat-app upload, a printed asset, a screenshot for a slide deck. This tool rasterizes any SVG to PNG, JPEG, or WebP at the exact pixel size you ask for, using the browser's built-in renderer. Nothing leaves your machine.

How to use

  1. Paste SVG markup, drop a .svg file, or click Load sample SVG.
  2. The live preview updates automatically; the source SVG's natural size is detected from its viewBox / width/height attributes.
  3. Pick a preset or type a custom width × height; toggle Lock aspect to maintain the source ratio.
  4. Choose PNG (lossless), JPEG (smaller, opaque), or WebP (lossy, good compression). Tweak quality if applicable.
  5. Click Download or Copy image.

Common use cases

  • Render an OG card SVG to PNG at 1200×630 for <meta property="og:image">.
  • Export a logo SVG as a high-DPI PNG for places that can't use vector (chat avatars, app stores).
  • Generate a JPEG screenshot of a chart SVG for a slide deck.
  • Quick PNG export for Figma-imported icons without launching a design tool.

Tips

  • If your SVG references external fonts via @import or <link>, the canvas pipeline can't fetch them — inline font glyphs as paths, or use a system font.
  • SVGs with external <image href="…"> won't load cross-origin images here. Embed them as data URIs first.
  • For social cards, the OG Image Builder creates a 1200×630 card directly without writing SVG.
  • For QR codes the dedicated QR Code Generator already exports both SVG and PNG.

FAQ

How is this different from SVG to JSX?
SVG to JSX rewrites the markup for React (camelCase props, className) but keeps the result as SVG code. SVG to Raster renders the SVG to actual pixels — a PNG, JPEG, or WebP image — at the exact dimensions you ask for.
How does it know the SVG's natural size?
The parser reads the root <svg>'s width and height attributes first, falling back to the viewBox if either is missing. If none of those are present, it defaults to 300×150 (which is what browsers use for an SVG with no dimensions).
What does Lock aspect do?
When the source SVG has known dimensions, editing one of W or H auto-fills the other so the ratio matches the source. Presets ignore the lock so they always set both dimensions, since their whole point is to enforce a specific ratio.
Why is the exported image blank or missing parts?
The canvas pipeline can't fetch external assets — fonts referenced via @import or <link>, <image href> pointing at a different origin, and external stylesheets all silently fail. Inline fonts as glyph paths and embed images as data URIs.
Does the SVG ever leave my browser?
No. Parsing, rendering, and encoding all run locally — the SVG only ever becomes a Blob URL that gets painted onto a canvas, never a network request.

More tools

JSON

🗂️ JSON Formatter 🔷 JSON to TypeScript 🔍 JSON Diff 🔤 JSON Sort 📊 JSON ↔ CSV 📝 JSON ↔ YAML 🛡️ JSON to Validator Schema

Code

🧪 Regex Tester ⚛️ SVG to JSX ⏱️ Cron Decoder 📸 Code Snippet to Image 📄 Text Diff 📝 Markdown Preview 🏷️ SemVer Checker 🔑 JWT Decoder

Ornaments

🎨 Gradients 🫧 Blob Generator 〰️ Wave Generator

Image

🗜️ Image Compressor 📐 Image Resizer ✂️ Image Cropper 🖼️ Image Format Converter 🔏 Image Watermark

Web / SEO

🔍 Meta Tag Preview 🕵️ User Agent Parser 🖼️ OG Image Builder

Generators

📱 QR Code Generator 📜 Lorem Ipsum Generator 👤 Avatar Generator ⭐ Favicon Generator 🪪 UUID Generator

PDF

📄 PDF Merger 📑 Image to PDF 🤏 PDF Compressor ✂️ PDF Splitter 🗂️ PDF Page Manager