SVG to PNG, JPG & WEBP Converter

Paste SVG code or open an .svg file and turn it into a sharp PNG, JPG, WEBP or ICO image at any size. Everything happens in your browser, so your file never leaves your device.

  • 100% free
  • No sign-up
  • Runs in your browser

Paste SVG code

Works with SVG from Figma, Illustrator, Inkscape and icon sets, HTML that contains an <svg>, and data:image/svg+xml URIs.

Preview & download

Your image preview will appear here.

Output size
–
File size
–
Format
–
Image settings
Format
Background

About the tool

How the SVG to Image Converter works

The SVG to PNG, JPG & WEBP Converter turns SVG code into a normal image file you can use anywhere: in documents, slides, emails, social posts or apps that don't accept SVG. Paste the code (the whole <svg>…</svg> element, or HTML that contains one), open or drop an .svg file, or paste a data:image/svg+xml URI. The preview updates as you type and shows exactly what will be downloaded.

Because SVG is a vector format, the image is drawn fresh at the size you choose, so it stays sharp at any size. Use the 1×, 2×, 3× or 4× buttons for retina-ready copies, or type an exact width and height. Pick PNG for transparency, JPG for the widest support, WEBP for small files, or ICO to make a favicon with 16, 32, 48 and 256 px sizes in one file. You can keep the background transparent or fill it with white or any colour, and icons drawn with currentColor can be given any colour you like.

If the code has a mistake, the tool shows the browser's error and the line it is on. Missing xmlns attributes and HTML entities such as &nbsp; are fixed for you. Everything runs in your browser with its own SVG renderer, so your files never leave your device. It does not use AI. For safety, the SVG is drawn as an image, so scripts in it never run and it cannot load files from other websites: embed any images and fonts inside the SVG itself.

Frequently asked questions

Is my SVG uploaded to a server?

No. The SVG is read and drawn by your own browser, and the PNG, JPG, WEBP or ICO file is created on your device. Nothing is sent anywhere, and the tool keeps working if you go offline after the page has loaded.

Will the PNG be blurry if I make it bigger?

No. SVG is a vector format, so the tool draws it again at the exact size you choose instead of stretching a small picture. A 24 px icon exported at 1024 px is just as sharp as the original. Outputs can be up to 16,384 pixels on each side.

Why is part of my SVG missing in the image?

Browsers draw SVG files used as images in a safe mode: they cannot load external images, fonts or stylesheets from other websites, and scripts and animations do not run. Text uses the fonts installed on your device. To keep everything, embed images as data URIs, convert text to paths in your design app, and keep styles inside the SVG.

How do I make a transparent PNG from an SVG?

Choose PNG (or WEBP) and leave the background set to Transparent. Areas with no shapes stay see-through, shown by the checkerboard in the preview. JPG has no transparency, so the tool fills the background with white or the colour you pick.

My SVG has no width or height. What size will the image be?

The tool uses the width and height attributes when they are there, and otherwise the viewBox. If neither is set, it starts at 300 × 150 pixels, the size browsers use. You can always type the width and height you want, and with the lock on, the other side follows to keep the shape.

Can I change the colour of an icon?

Yes, if the icon uses currentColor, as Lucide, Feather, Heroicons and many icon sets do. An Icon colour picker then appears; it is black by default because that is what currentColor means outside a web page. Icons with fixed colours keep their own colours.

Keep exploring
  • Free
    Design

    Color Palette from Image

    Extract the main colours from any image and copy them as HEX, RGB or HSL, or export CSS, Tailwind and JSON.

    • HEX codes
    • Color picker
    • Tailwind
    Instant · No sign-upTry Tool: Color Palette from Image
  • Free
    Developer

    Favicon Generator

    Make a complete favicon set from a logo, letters or an emoji: ICO, PNG, Apple touch icon, Android icons and HTML.

    • favicon.ico
    • Apple touch icon
    • Web manifest
    Instant · No sign-upTry Tool: Favicon Generator
  • Free
    Design

    Logo to Brand Style Guide Generator

    Upload a logo to get brand colour roles, tints and shades, contrast checks, a font pairing idea, logo usage rules and CSS or Tailwind tokens.

    • Brand colours
    • Design tokens
    • Style guide
    Instant · No sign-upTry Tool: Logo to Brand Style Guide Generator
For makers

Have an AI Tool?

Submit your AI tool and help others discover it.

Submit Your Tool