SVG to PNG Converter

Rasterizing SVG: When and How

SVG is the source of truth for icons, logos, and most graphics in modern design systems. But the world hasn't fully caught up, many places still want PNG, JPG, or other raster formats. This tool rasterizes SVG to PNG entirely in your browser, with control over scale and background.

When You Need PNG Instead of SVG

Email

Most email clients (Outlook in particular) strip or block SVG attachments and inline SVG for security reasons (script tags can hide inside SVG; XXE attacks). Email-embedded graphics: PNG or JPG.

Social media

Platform uploads (Twitter, LinkedIn, Slack, Discord) often accept SVG but render it as raster on the receiving end; uploading PNG bypasses the conversion step. Preview/share images (og:image, Twitter card images) must be raster, typically 1200×630 PNG or JPG.

App icons

iOS, Android, Windows, macOS all want PNG (or PNG-derived) at specific sizes:

• iOS: 1024×1024 source, generated to ~18 sizes (20px to 1024px, 1× / 2× / 3×).
• Android: 48 / 72 / 96 / 144 / 192 / 512 px (mdpi to xxxhdpi).
• macOS: 16 / 32 / 64 / 128 / 256 / 512 / 1024.
• Favicon: 16, 32, 48, 192, 512.

Keep an SVG source; generate PNGs for the build.

Pre-rendering for performance

Embedding a 10KB SVG inline vs loading a 3KB PNG: PNG can be smaller for very complex graphics. Trade-off: PNG locks the resolution; SVG scales. Pre-render at a known display size when the size is known.

Print

Older print workflows may want raster (300+ DPI) for predictable output. Render at the target DPI from SVG.

Choosing Scale

A 24×24 icon should be rendered as:

Render-then-downsample is fine: a 96×96 PNG displayed at 24×24 will be downscaled by the browser/OS, usually with good quality. The reverse (rendering smaller than display) blurs.

Background Options

Transparent

PNG supports alpha. The rasterized image has only the visible shapes; areas outside fill or stroke are fully transparent.

When transparent works:

• Icons displayed on a colored UI.
• Logos overlaid on varied backgrounds.
• Spritesheets where each icon is positioned by code.

When transparent fails:

• Old apps that render alpha as black or pink (rare in 2026).
• Print workflows that flatten transparency in unexpected ways.
• Some PDF generators that strip alpha.

Solid color

A flat background, usually white, dark, or brand color.

When solid works:

• Email signatures (avoid transparency issues across clients).
• OG/share images (typically solid brand color).
• Print: predictable.

Gradient or pattern

Some tools (this one's preview) allow a background image; useful for share-card style PNGs (foreground icon over branded gradient).

Common Pitfalls

Missing viewBox

Without viewBox, the SVG has a fixed display size of 24×24; scaling to 96 doesn't quadruple sharpness because the internal coordinates aren't defined.

Always include viewBox="0 0 24 24" (or appropriate width/height).

External fonts

If MyCustomFont is loaded via @font-face from a CSS file or web font service, it may not be available inside the rasterization sandbox. Result: the text renders in a fallback font.

Fixes:

• Inline the font as a data URI inside the SVG <defs>.
• Convert text to paths (in Figma/Illustrator: "Outline text" / "Object to Path"). Loses text accessibility but guarantees appearance.
• Use system fonts with web-safe stacks.

External images

Cross-origin images without CORS headers "taint" the canvas; canvas.toBlob then throws SecurityError.

Fix: embed the image as a data URI:

CSS in external stylesheets

External CSS won't load in the rasterizer. Use inline styles or embed:

Filters and effects rendering differently

Some SVG filters (Gaussian blur, drop shadow) may render slightly differently in the browser's SVG renderer vs in PNG raster. Check the preview before committing.

Antialiasing artifacts

At 1× scale, small details can blur. Render at 2× and downsample for crisper edges. Modern browsers do this well via image-rendering: -webkit-optimize-contrast for pixel art or image-rendering: auto for photos.

How the Conversion Works

Browser-native pipeline:

1. Serialize SVG: take the markup string.
2. Create a Blob URL or data URI: URL.createObjectURL(new Blob([svg], { type: 'image/svg+xml' })).
3. Load into an Image: const img = new Image(); img.src = blobUrl; wait for onload.
4. Draw to canvas:
5. Extract PNG: canvas.toBlob(blob => download(blob), 'image/png') or canvas.toDataURL('image/png').

All client-side. No server interaction.

Alternative Output Formats

JPG

Lossy compression; smaller for photos, larger or unusable for line art. canvas.toBlob(blob, 'image/jpeg', 0.92) with quality 0-1.

For icons/logos: PNG. For photo-like content: JPG.

WebP

Better compression than PNG/JPG for most images. canvas.toBlob(blob, 'image/webp'). Browser support is universal (since 2020).

For modern web targets, WebP often beats PNG for size at equal quality.

AVIF

Even better compression. Browser support is broad (Safari 16+, all evergreen). Encoding to AVIF in browser is less universally supported but available in Chrome/Firefox.

Bulk Operations

For converting many SVGs to PNG (e.g., generating app icon variants from one source):

• CLI tools: sharp (Node.js), svgexport, rsvg-convert (GTK).
• Build pipelines: Webpack/Vite loaders, image plugins.
• Build-time hooks: pre-render at build, ship the PNGs to production.

This tool is for one-off conversions; for automation, scripts or build plugins scale better.

Tips for Crisp Output

• Always include viewBox in the source SVG.
• Render at 2× minimum for any display destination.
• Round coordinates to integers where possible (avoids sub-pixel positioning blur).
• Use simple stroke widths (1, 1.5, 2 px) instead of arbitrary values like 1.347.
• Avoid sub-pixel-level effects at small sizes, they don't read.

Privacy

The conversion uses <img> + <canvas> + canvas.toBlob, all browser-native APIs running entirely in your tab. The SVG markup is converted to a Blob URL only for the local <img> to load; nothing leaves the browser. Open DevTools Network during use: zero outbound requests. SVG content frequently encodes brand logos, unreleased app icons, or proprietary illustrations; sending it to a third-party conversion service would expose design IP. This tool runs everything locally so anything you paste, including pre-release brand assets, stays in the tab.