Skip to content
Toolars
Explore

Convert SVG to PNG

Open an SVG and this page cleans it with a strict allowlist, then renders the safe version onto a transparent PNG at the scale you pick, all within your browser. Scripts never run and the file is not uploaded. The caveat to know: anything outside the allowlist, such as CSS styling, filters, markers or embedded images, is removed before rendering.

Tool facts

SVG size limit
2 MiB of markup, identified as image/svg+xml
Scale
1x, 2x, 3x and 4x buttons with 2x preset here; Export scale also accepts 0.01 to 32
Output ceiling
8,192 px per side and 24 MP after scaling
Removed before rendering
Scripts, event handlers, style attributes and <style>, filters, markers, <image>, foreignObject, external and data: URLs
Refused outright
DOCTYPE or ENTITY declarations, and files with neither width/height nor a viewBox
Background
Transparent in PNG; a fill color is applied only if you switch to JPEG

Task path / input to outcome

How to rasterize an SVG to PNG

  1. 01

    Add the SVG

    Choose file accepts one .svg at a time. The raw markup is never placed in the page; a preview appears only after the sanitized render.

  2. 02

    Choose the size

    Click 1x, 2x, 3x or 4x under Export scale, or type exact pixel values into Output width and Output height.

  3. 03

    Sanitize & convert

    Press Sanitize & convert. The summary states the final pixel size and how many unsafe or unsupported items were removed.

  4. 04

    Check and download

    If the removal count is above zero, compare the preview with the original artwork before you download the PNG.

Turning vector artwork into pixels

SVG describes shapes, so it stays sharp at any size, yet many destinations such as slide tools, document editors and store listings want a fixed bitmap. Rasterizing to PNG keeps transparency and loses nothing beyond the pixel grid you choose.

That grid is the decision that matters. Scale multiplies the SVG's own width and height, or its viewBox when those attributes are missing, so a 64×64 icon becomes 128×128 at 2x. Enlarging the PNG later will blur it, so render at the largest size you need.

Sanitization explains most surprises. Paths, basic shapes, text, gradients, clip paths, masks, patterns and local <use> references survive, along with presentation attributes like fill and stroke. Styling that lives in CSS classes, style attributes or a <style> block is dropped, so artwork exported that way can render black or unfilled.

Common questions

Why does my PNG look black or lose its colors?
The colors were probably set with CSS: a <style> block, class rules or style attributes. Those are stripped, and SVG shapes default to a black fill. Re-export the SVG with presentation attributes (fill, stroke) instead of CSS, or ask your design tool for an inline-attribute export.
Which scale should I pick for high-density screens?
This page opens at 2x, which doubles the SVG's declared dimensions and suits most high-density displays. Use 3x or 4x for larger placements, keeping in mind the result must still fit 8,192 px per side and 24 MP.
Why are arrowheads or drop shadows missing?
In SVG, arrowheads are drawn with marker elements and drop shadows with filter elements, and neither is on the sanitizer's allowlist. Convert those effects to plain paths in your editor before exporting the SVG.
Why was my SVG refused?
Common reasons are a DOCTYPE or ENTITY declaration, a file over 2 MiB, a file not reported as image/svg+xml, or a root element with no width, height or viewBox. A scale that would push the render past the pixel ceiling is refused with the limit named.
Do linked fonts and images appear in the PNG?
No. External URLs, data: URLs and <image> elements are removed, so linked pictures and web fonts never load. Text is drawn with a font the browser already has for the named font-family, so outline text in your editor when exact lettering matters.

SVG to Image Converter