Overview / Images & Graphics / SVG to PNG & Data URL
Images & Graphics 100% In-Browser & Offline

SVG to PNG & Data URL

Paste SVG code, see a live preview, export a square PNG at a size you choose and copy the SVG as a CSS Data URI or Base64 Data URI.

Drop or choose a file; settings change the result instantly.

Your files and input never leave your browser – nothing is uploaded.

Enter SVG code or paste a file:

SVG live preview

Export

Pixels (square)

The live preview adds an xmlns attribute for display only, so it shows an SVG that has none. The PNG export and the copied Data URI do not add it. Keep this in mind when you copy an SVG Data URI for a stylesheet or export a PNG: a good-looking preview does not prove that the file loads as an image.

The missing xmlns trap

For the PNG, the browser loads your code as an image. Without xmlns="http://www.w3.org/2000/svg" this usually fails. Then the download does not start and no error message appears. Add the attribute and press the button again.

Copy, convert, check: the steps

  1. Paste SVG code into the text field. It starts with a sample, a blue circle with a white star.
  2. Look at the preview. It sits on a dark checkered background, so light shapes stay visible.
  3. Press Copy Data URI for a data:image/svg+xml,... string, or Copy Base64 for data:image/svg+xml;base64,.... Both buttons copy the full URI with its data: prefix.
  4. For a PNG, enter a size in pixels and press Download as PNG. The file name carries the size, for example vector-512x512.png.

SVG Data URI or Base64: which one to paste

The first button uses percent-encoding and also escapes single and double quotes, so the string fits inside a CSS url() or an HTML attribute. For SVG this form is often shorter. The second button adds about a third to the text length, but it contains only safe characters, and it handles non-ASCII text. The tool does not minify your SVG. The URI holds your code as it is, only encoded. A small icon, for example a 400-byte chevron for a custom select box, saves one request this way.

What the PNG and the preview do with your code

The PNG is always square. The graphic is drawn into a size-by-size canvas, so a wide drawing is stretched. The background stays transparent. An empty or invalid size falls back to 512, and a decimal is cut to an integer. External images, fonts and stylesheets that the SVG links to are not loaded. Very large sizes can fail, depending on the canvas limit of the browser.

Everything runs on your device. A button press sends no request, and the copy buttons write to your clipboard. The preview is an image element with a data URI, so scripts and event handlers in the pasted code do not run.

Frequently asked questions (FAQ)

It is the SVG code written into a URL that starts with data:image/svg+xml. Browsers read it like a file, so you can use it in CSS or an img tag without an extra request.