From e4300cc4ba2379915126d6c7fb8f34d7df8953ff Mon Sep 17 00:00:00 2001
From: John Kenyon <JLKenyon@gmail.com>
Date: Sun, 9 Mar 2025 20:43:17 -0700
Subject: [PATCH] Add the SVGtoPNG webapp

---
 README.md  |  1 +
 index.html | 72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 73 insertions(+)
 create mode 100644 README.md
 create mode 100644 index.html
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..5d3a47c
--- /dev/null
+++ b/README.md
@@ -0,0 +1 @@
+A tool for converting SVG files to PNG files, allowing for a scaling multiplier.
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0730f57
--- /dev/null
+++ b/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SVG to Canvas</title>
+</head>
+<body>
+    <span>Scale value: <input type="text" id="scale" value="1.0"/></span>
+    <div id="drophere" style="width: 300px; height: 300px; border: 1px dashed black; text-align: center; vertical-align: middle;">
+        Drop an SVG file here to convert it to PNG!
+    </div>
+    <script>
+        const drophere = document.getElementById('drophere');
+        drophere.addEventListener('dragover', function(e) {
+            e.preventDefault();
+        });
+
+        drophere.addEventListener('drop', function(e) {
+            e.preventDefault();
+            const file = e.dataTransfer.files[0];
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                const svgString = e.target.result;
+                const svgBlob = new Blob([svgString], { type: 'image/svg+xml;charset=utf-8' });
+
+                const url = URL.createObjectURL(svgBlob);
+
+                const img = new Image();
+                img.onload = function() {
+                    scaleElement = document.getElementById('scale');
+                    scaleValue = parseFloat(scaleElement.value);
+
+                    // If the scale value is not a number, default to 1.0
+                    if (isNaN(scaleValue)) {
+                        scaleValue = 1.0;
+                        scaleElement.value = scaleValue;
+                    }
+
+                    const parser = new DOMParser();
+                    const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
+                    const svgElement = svgDoc.documentElement;
+                    svgElement.setAttribute('width', img.width * scaleValue);
+                    svgElement.setAttribute('height', img.height * scaleValue);
+
+                    var canvas = document.createElement('canvas');
+                    canvas.id     = "CursorLayer";
+                    canvas.width  = img.width * scaleValue;
+                    canvas.height = img.height * scaleValue;
+                    canvas.style.zIndex   = 8;
+
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                    const pngUrl = canvas.toDataURL('image/png');
+
+                    const downloadLink = document.createElement('a');
+                    downloadLink.href = pngUrl;
+                    downloadLink.download = file.name.replace(/svg$/,'png')
+
+                    downloadLink.click();
+                    downloadLink.remove();
+
+                    URL.revokeObjectURL(url);
+                };
+
+                img.src = url;
+            };
+            reader.readAsText(file);
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
