SVG code to PNG

SVG to PNG web app coded by **Gemini Ai**

Convert SVG code to PNG image file

SVG to PNG Converter

This is a simple, one-page web application that allows you to convert Scalable Vector Graphics (SVG) code into a downloadable PNG image. You can either paste your SVG code directly into a text area or provide a URL to an SVG file. The app features a live preview and is built entirely in a single HTML file with no external dependencies.

Issues

CORS - feathing svg image via URL doesn't work due to CORS policy.

Demo

SVG to PNG Converter

Features

Live Preview: ~~See a real-time rendering of your SVG code as you type or after loading it from a URL~~ CORS issue
Paste SVG Code: Directly paste your SVG markup into the text area.
Load from URL: ~~Fetch and display an SVG from a given URL~~ CORS issue
Download as PNG: Convert the SVG to a PNG and download it to your computer with a single click.

How It Works

The magic of this converter happens in the browser, all thanks to a few powerful Web APIs. When you click the "Convert & Download as PNG" button:

SVG to Image: The SVG code is read from the input field. It's then used to create a JavaScript Blob, which is then used as the source for an Image object. This effectively treats your SVG code as a complete image.

Image to Canvas: The app uses a hidden <canvas> element. Once the Image object has fully loaded the SVG data, it is drawn onto this canvas.
Canvas to PNG: The canvas.toDataURL('image/png') method is called. This is the key step that takes the content of the canvas and encodes it as a PNG image in a Base64-encoded string.
Download: A temporary <a> link element is created programmatically. The PNG data URL is set as the link's href and the download attribute is set to a filename (e.g., ds-image.png). Finally, the link is "clicked" to trigger the download, and then it's removed from the page.

Customization

This single-file application is very easy to modify. Here are a few ways you can customize it:

Change the Styles: All of the CSS is located in the <style> tag in the <head>. You can easily change colors, fonts, spacing, and layout directly in this section.
Change the Default Size: The default canvas dimensions are set to 500x500 pixels in the JavaScript. You can modify these values in the downloadButton.addEventListener function by changing `500`.
Change the Filename: The default filename for the downloaded image is svg-image.png. You can change this on line 200 + or so by editing the link.download property.

Use a Different Image Format: You can easily change the output format by modifying the toDataURL() method. For example, to save as a JPEG, you can change canvas.toDataURL('image/png') to canvas.toDataURL('image/jpeg').

Pocket Web App created by Gemini Ai

Demo and Source code on GitHub