SVG to PNG
Rasterize SVG source or .svg files into PNG at 1x/2x/4x, with an optional transparent or solid background — rendered locally in your browser.
Runs in your browserEvery computation happens in your browser — your data never leaves this device.
Files never leave your browser — everything runs locally
A PNG exported at 2x still displays at the original size in CSS — ideal for retina screens.
Source size: — Output size: —
No output yet
What this tool does
- Convert an SVG exported from a design tool or an icon set into PNG for systems that reject vectors (older Office, some chat apps, upload endpoints that only take bitmaps).
- Export a retina version at 2x or 4x: a 24 × 24 icon becomes 48 × 48 but still displays at 24 px in CSS, so edges stay crisp.
- Tick "Transparent" when you need an alpha channel, or set a solid background colour when the image lands in a white document.
- Upload a .svg file or paste the source directly — the file never leaves your browser, which makes it safe for internal assets.
Example
Input
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" fill="#4D6BFE"/></svg> at 2x
Output
Source size 24 × 24; output size 48 × 48; file name image-2x.png (with no uploaded file the base name falls back to image)
The size comes from width / height first (unitless, px and pt supported, 1pt = 4/3 px); if both are missing the viewBox is used and the ratio preserved. Rasterisation itself is done by the browser with Image + Canvas, so a Canvas-capable environment is required.
Frequently asked questions
Why is an SVG containing `<script>` refused?
Scripts usually do not run while an SVG is rendered as an image, but once a user saves the source as a .svg and opens it directly they do — a classic XSS path. The tool checks before rendering and rejects any source containing `<script>`.
How is the size worked out?
It reads width / height from the root tag first (unitless, px and pt supported). With only one of them the other is derived from the viewBox ratio; with neither, the viewBox width and height are used. Percentages and em units have no definite pixel value, so it asks for pixel values, and a complete lack of size reports that width/height or viewBox is missing.
How large can the export be?
8192 px per side. Beyond that most browsers fail to allocate the Canvas, so the tool reports that the target size exceeds the limit. Scale the source down or use another approach for anything bigger.
The PNG colours do not match the SVG.
Usually the SVG depends on external resources: linked fonts, linked images, or currentColor / custom properties from CSS. Those may be unavailable during rasterisation, so text falls back to another font or colours go black. Inline the dependencies (fonts to paths, hard-coded colours) and export again.
Is the file uploaded?
No. An uploaded .svg is read into memory with FileReader, and rendering and export both happen in the browser with no network requests at all.
Keywords：svgpngsvg 转 pngsvg to png光栅化rasterizeretinacanvas图标导出image convert