SVG to PNG Converter

Self-contained SVG only

Paste SVG markup or choose a .svg file. The browser renders it to a canvas and exports PNG. External font files, cross-origin images, and script inside SVG may not render the way a desktop app would.

For predictable results, embed paths and shapes, set an explicit viewBox or width/height, and avoid relying on external CSS.

Worked example: matching export size to the viewBox

A 128x128 icon SVG with a viewBox exports a crisp PNG when you pick a matching pixel size. Upscaling a tiny viewBox to 2000px invents pixels; start from detailed vectors when you need large PNGs.

Limits

Filters, foreignObject HTML, and some SMIL animations are inconsistent across browsers. This is not Inkscape. Huge exports can exhaust canvas memory on phones.

Worked sizing

If the SVG has viewBox="0 0 24 24" and you export at 240 pixels wide, you get 10x rasterization. Soft edges on curves may need a larger export or a different stroke width in the SVG itself. Always glance at the preview zoomed in before shipping icons.

Worked example: an icon with no width or height

An SVG that only has viewBox="0 0 24 24" and no width/height has no fixed pixel size. Browsers often fall back to a default size, so the PNG can come out tiny or oddly sized. Add width="512" height="512" to the root <svg> tag (keeping the viewBox), then convert again to get a crisp 512×512 PNG.

Pitfalls

• Web fonts. Text that uses a font loaded by CSS elsewhere may render in a fallback font. Convert text to paths in your editor before exporting.
• External images. <image href="https://..."> inside the SVG may be blocked when drawn to a canvas. Embed images as data URIs.
• Transparency. PNG keeps transparent areas transparent. If you need a white background, add a full-size white <rect> as the first child.

FAQ