SVG to PNG export — 1×, 2×, 3× and the font fallback gotcha
Tomoda HinataTool author & maintainerPublished Apr 26, 202611 min read
SVG is a vector format — every line, curve, and text stays sharp at any size. The web wants vectors. But Slack, Discord, Office documents, social media uploads, and email all want PNG. Exporting an SVG to PNG looks trivial until you hit fonts (rendered by the browser, not the SVG) or need 1×/2×/3× outputs for HiDPI screens.
Tools used in this guide
Why convert SVG to PNG at all?
Almost every modern browser displays SVG natively, so for the web you usually want SVG. The conversion to PNG is for destinations that don't decode SVG: Slack message attachments (no inline SVG render), Discord image previews, Microsoft Office documents (Word imports SVG but converts to fixed-size internally), email clients (most strip SVG), Apple iMessage previews, marketplace listings (Mercari, Amazon), and social media uploads.
Pick the export size — the 2× rule
Find the largest size the PNG will be displayed at, then double it. A favicon at 32 px → export 64 px PNG (most retina screens render at 2×). A blog header at 1200 px → export 2400 px PNG. Going below 2× produces a soft image on HiDPI screens; going above 2× wastes bytes with no visible improvement. For email and Slack where the viewer might zoom, 3× is sometimes worth the extra bytes.
Fonts — the silent breaker
SVG with `<text>` elements relies on the rendering environment to provide the font. The browser exporter loads the font from the page's `@font-face` rules or the operating system. If you export an SVG containing 'Helvetica Neue' in a tool that lacks Helvetica Neue, the rasterizer falls back to a default sans — and your carefully-tracked logo suddenly looks slightly off. The robust workaround: in the source SVG editor, convert text to paths (`Object → Path`) before saving the .svg. The text becomes vector outlines that need no font.
Transparency and background
PNG inherits the SVG's transparency by default. The SVG drawing canvas is transparent unless you draw a `<rect>` background. If your destination needs a solid background (PowerPoint slides, some email signatures), set a background color in the export tool — it composites the SVG onto white/black/colored before encoding. Once flattened, transparency is gone permanently — keep the original SVG.
Animated SVG cannot become animated PNG
SVG supports SMIL animation and CSS-based motion. PNG is a single still frame. APNG exists for animation but Outlook, Slack, and most enterprise email completely ignore it. For animated logo / loading spinner export, the right move today is animated WebP — every modern browser renders it, file sizes are 30–60% of equivalent GIFs, and Slack/Discord both display them inline.
Steps
Drop the SVG
Drag a single .svg into the in-browser tool. Up to 5 MB, standard SVG 1.1 features supported.
Pick the target sizes
Type the largest display size, then check 1×/2×/3× to export the matching PNGs.
Set background
Default is transparent. Switch to a solid color only if the destination cannot handle alpha.
Download as ZIP
All exported PNGs go into one ZIP, named `name@1x.png`, `name@2x.png`, etc.
Frequently asked questions
Why does my exported PNG look different from the SVG in the browser?
Most likely a font fallback. Convert text to paths in your SVG editor before exporting, or embed the font via an `@font-face` data URI.
Can I export at 4× or higher?
Yes — the tool supports up to 8× export. Beyond 3× the file size grows quadratically while visible quality plateaus on every existing display.
Does the tool support SVG with embedded raster images?
Yes — base64-embedded raster images inside SVG are passed through. They will be re-encoded into the PNG at the export resolution.
Is transparency really preserved?
Yes. The SVG canvas is transparent by default; the PNG output preserves alpha channel for every pixel. Only flat-bake transparency if the destination requires it.
Can I convert SVG to JPG instead?
You can, but only if you don't need transparency — JPG has no alpha channel. The tool offers a JPG output checkbox for that case.
Are my files uploaded?
No. SVG parsing, raster, and ZIP packaging all run via WebAssembly in your browser tab.
Try it now
Rasterize SVG vectors to PNG at any size
SVG to PNG Converter