What it does
This tool turns SVG code or an .svg file into a PNG, JPG or WebP image. Paste the markup, drop a file, choose a scale or an exact width, and download the bitmap. Rendering happens in your browser, so icons, logos and diagrams never leave your machine.
It is useful whenever a place does not accept SVG: app icons, social media images, slide decks, documents, email signatures, or older software. You get a live preview on a checkerboard so you can see exactly which parts are transparent.
How to use it
- Paste your
<svg>code into the editor, click Upload to open a file, or drag one onto the page. Sample loads a small logo. - Choose a size: 1× uses the SVG’s own dimensions, 2×–4× multiply them. Or type a custom width in pixels; the height follows the aspect ratio.
- Choose the format: PNG for lossless output with transparency, JPG for photos and compatibility, WebP for small files.
- Choose the background: transparent, white, or any color.
- Click Download. The line under the preview shows the final pixel size, format and file size.
To convert many icons at once, select or drop several .svg files together. They appear in a Batch list with each file’s output size (or the reason it failed), and Download all (ZIP) saves every image with the current settings. A batch holds up to 50 files of at most 5 MB each; anything beyond that is skipped with a message.
How the size is worked out
The tool looks at the root <svg> element. width and height in px, pt, mm, cm, in or em are converted to pixels. If they are missing or given as percentages, the viewBox width and height are used instead. The chosen scale or custom width is then applied, and the SVG is rewritten with explicit pixel sizes so every browser draws it the same way.
Example
An icon with viewBox="0 0 24 24" and no width or height becomes a 24 × 24 PNG at 1×. At 4× it becomes 96 × 96, and with a custom width of 512 it becomes a 512 × 512 PNG suitable for an app store icon, still perfectly sharp because it is rendered from vectors instead of being upscaled.
Tips
- Invalid XML is reported with a line number, so you can jump straight to the problem.
- Embedded raster images (
<image href="data:...">) work; external links do not. - Text uses fonts installed on your computer. For pixel-identical results everywhere, convert text to outlines in your design tool first.
- The largest output is 16,384 pixels per side, the limit of browser canvases.
FAQ
› Is the SVG uploaded anywhere?
No. Your browser draws the SVG onto a canvas and saves the result. The code and the image stay on your device.
› How do I get a sharper PNG?
Pick 2×, 3× or 4× scale, or type an exact width. SVG is a vector format, so rendering at a larger size gives crisp edges on high-density screens. 2× is a good default for retina displays.
› Why are some images or fonts missing in the output?
For security, browsers do not load external files (linked images, web fonts, CSS) when an SVG is drawn as an image. Embed images as data URLs and convert text to paths, or use system fonts.
› Can I keep the transparent background?
Yes. Choose Transparent with PNG or WebP output. JPG has no transparency, so transparent areas are filled with white or your chosen color.
› My SVG has no width or height. What size is used?
The tool reads the viewBox and uses its width and height. If neither size nor viewBox is present, it falls back to the browser default of 300 × 150 and says so.