Editing Pocket WebApps/SVG to PNG

=SVG code to PNG=

==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===
[https://dascent.github.io/4ai/source/projects/svg-to-png/ SVG to PNG Converter]

---

== Features==

* '''Live Preview:''' <del>See a real-time rendering of your SVG code as you type or after loading it from a URL</del> CORS issue
* '''Paste SVG Code:''' Directly paste your SVG markup into the text area.
* '''Load from URL:''' <del>Fetch and display an SVG from a given URL</del> 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 219 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')`.