From 72d6dc8a0347584eb7d792b84e398b2de1ee745f Mon Sep 17 00:00:00 2001
From: s3lph <s3lph@kabelsalat.ch>
Date: Mon, 29 Jan 2024 23:26:22 +0100
Subject: [PATCH] feat: increase browser and scg editor support

---
 index.html | 75 +++++++++++++++++++++++++-----------------------------
 1 file changed, 34 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index feee56b..70c788c 100644
--- a/index.html
+++ b/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
+	<meta charset="utf-8">
+	<title>Antifa Sticker Generator</title>
 	<style>
 	 form {
 	     display: grid;
@@ -16,21 +18,12 @@
         <p>
             A purely client-side sticker generator. <a href="https://git.kabelsalat.ch/s3lph/antifa-sticker-generator">Source Code.</a>
         </p>
-	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" width="500" height="500" id="svg">
-	    <style>
-	     text {
-		 fill: white;
-		 font-family: sans-serif;
-		 font-weight: bold;
-		 font-size: 40px;
-		 text-align: center;
-		 text-anchor: middle;
-	     }
-	    </style>
+	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" width="500" height="500" id="svg">
 	    <defs>
 		<filter id="black">
         	    <feColorMatrix in="SourceGraphic" type="matrix"
-        			       values="1 0 0 0 0
+        			   values="1 0 0 0 0
+				       
         			       0 1 0 0 0
         			       0 0 1 0 0
         			       0 0 0 1 0" />
@@ -42,58 +35,58 @@
         			       0 0 0 0 0
         			       0 0 0 1 0" />
 		</filter>
-		<path id="upper" stroke="red" fill="none" d="M 249.999 460 A 210 210 0 1 1 250.001 460" />
-		<path id="lower" stroke="red" fill="none" d="M 249.999 10 A 240 240 0 1 0 250.001 10" />
 	    </defs>
             <g id="svgroot" transform="scale(1, 1)">
 	        <circle id="bleed" cx="250" cy="250" r="249" stroke="#ff00ff" fill="none" stroke-width="0" />
 	        <circle cx="250" cy="250" r="225" stroke="black" fill="white" stroke-width="50" />
 	        <g id="icon">
-		    <image transform="translate(0 0) translate(-9 -2) scale(1, 1)" id="iconred" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiCiAgICAgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xMjUuNjY3LDEyMi45MTdjMCwwLDI4LDMzLjA4Myw4OS4yNSwzNC4zMzNjNjEuMjUxLDEuMjUsOTUuOTE3LTM3LjkxNywxMzAuOTE3LTMzLjMzM3M2Myw0My4zMzMsNzcuNzUsNTAuMTY3TDMzMyw0MjUuNzUKICAgICAgICBjMCwwLTEuODMzLDEuMzM0LTExLDQuNjY3cy0xMS4zMzMsNC4zMzMtMTEuMzMzLDQuMzMzbDQwLjI1LTEyMi45MTdjMCwwLTM4Ljc1LTMyLjY4Ny03My43NS0zNQogICAgICAgIGMtMzUuMDAxLTIuMzEzLTUwLjkxNywyMy43NS0xMTAuMDgzLDEzLjc1QzEwNy45MTcsMjgwLjU4Myw2OS41LDI0My41LDY5LjUsMjQzLjVzLTEuNDE1LTIxLjA2NywxNC41LTU5LjgzMwogICAgICAgIEM5OS45MTQsMTQ0LjkwMiwxMjUuNjY3LDEyMi45MTcsMTI1LjY2NywxMjIuOTE3eiIvPgo8L3N2Zz4K" width="512" height="512" filter="url(#red)" />
-		    <image transform="translate(0 0) translate(-9 -2) scale(1, 1)" id="iconblack" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiCiAgICAgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik02OS45MTcsMjUxLjI1YzAsMCw0MS4wODQsMzguNDE2LDEwMi40MTcsNDYuMDgzYzYxLjMzMiw3LjY2Nyw2Ny4wMzktMTQuNDkxLDEwMC45MTYtMTQuMjUKICAgICAgICBjMjEuNTQ4LDAuMTUzLDI5LjMzNCw5LjU4NCwyOS4zMzQsOS41ODRsLTUzLjUwNiwxNDkuNjdjMCwwLTQuMTgtMC4wNDQtMTAuMDkyLTAuNjkyYy01LjkxMS0wLjY0OC05LjU0MS0xLjI5NC05LjU0MS0xLjI5NAogICAgICAgIEwyNTcsMzU3LjVjMCwwLTEzLjU4NC04LjcwNy0yNy4yNS0xMC41Yy0xMy42NjgtMS43OTMtMjEuMDQyLDMtNDYuNSwyLjVjLTI0LjA3My0wLjQ3My03MS4yNS0xMi43NS05My4zMzMtNDUuNzUKICAgICAgICBTNjkuOTE3LDI1MS4yNSw2OS45MTcsMjUxLjI1eiIvPgo8L3N2Zz4K" width="512" height="512" filter="url(#black)" />
+		    <image transform="translate(0 0) translate(-9 -2) scale(1, 1)" id="iconred" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiCiAgICAgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik0xMjUuNjY3LDEyMi45MTdjMCwwLDI4LDMzLjA4Myw4OS4yNSwzNC4zMzNjNjEuMjUxLDEuMjUsOTUuOTE3LTM3LjkxNywxMzAuOTE3LTMzLjMzM3M2Myw0My4zMzMsNzcuNzUsNTAuMTY3TDMzMyw0MjUuNzUKICAgICAgICBjMCwwLTEuODMzLDEuMzM0LTExLDQuNjY3cy0xMS4zMzMsNC4zMzMtMTEuMzMzLDQuMzMzbDQwLjI1LTEyMi45MTdjMCwwLTM4Ljc1LTMyLjY4Ny03My43NS0zNQogICAgICAgIGMtMzUuMDAxLTIuMzEzLTUwLjkxNywyMy43NS0xMTAuMDgzLDEzLjc1QzEwNy45MTcsMjgwLjU4Myw2OS41LDI0My41LDY5LjUsMjQzLjVzLTEuNDE1LTIxLjA2NywxNC41LTU5LjgzMwogICAgICAgIEM5OS45MTQsMTQ0LjkwMiwxMjUuNjY3LDEyMi45MTcsMTI1LjY2NywxMjIuOTE3eiIvPgo8L3N2Zz4K" width="512" height="512" filter="url(#red)" />
+		    <image transform="translate(0 0) translate(-9 -2) scale(1, 1)" id="iconblack" xlink:href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiCiAgICAgaGVpZ2h0PSI1MTJweCIgdmlld0JveD0iMCAwIDUxMiA1MTIiPgogIDxwYXRoIGZpbGw9IiMwMDAwMDAiIGQ9Ik02OS45MTcsMjUxLjI1YzAsMCw0MS4wODQsMzguNDE2LDEwMi40MTcsNDYuMDgzYzYxLjMzMiw3LjY2Nyw2Ny4wMzktMTQuNDkxLDEwMC45MTYtMTQuMjUKICAgICAgICBjMjEuNTQ4LDAuMTUzLDI5LjMzNCw5LjU4NCwyOS4zMzQsOS41ODRsLTUzLjUwNiwxNDkuNjdjMCwwLTQuMTgtMC4wNDQtMTAuMDkyLTAuNjkyYy01LjkxMS0wLjY0OC05LjU0MS0xLjI5NC05LjU0MS0xLjI5NAogICAgICAgIEwyNTcsMzU3LjVjMCwwLTEzLjU4NC04LjcwNy0yNy4yNS0xMC41Yy0xMy42NjgtMS43OTMtMjEuMDQyLDMtNDYuNSwyLjVjLTI0LjA3My0wLjQ3My03MS4yNS0xMi43NS05My4zMzMtNDUuNzUKICAgICAgICBTNjkuOTE3LDI1MS4yNSw2OS45MTcsMjUxLjI1eiIvPgo8L3N2Zz4K" width="512" height="512" filter="url(#black)" />
 	        </g>
-	        <text><textPath id="uppertext" startOffset="50%" href="#upper">ANTIFASCHISTISCHE</textPath></text>
-	        <text><textPath id="lowertext" startOffset="50%" href="#lower">AKTION</textPath></text>
+		<path id="upper" stroke="none" fill="none" d="M 250 460 A 210 210 0 0 1 250 40 A 210 210 0 1 1 250 460"/>
+		<path id="lower" stroke="none" fill="none" d="M 250 10 A 240 240 0 1 0 250 490 A 210 210 0 0 0 250 10"/>
+	        <text style="fill: white; font-family: sans-serif; font-weight: bold; font-size: 40px; text-align: center; text-anchor: middle;"><textPath id="uppertext" startOffset="50%" xlink:href="#upper">ANTIFASCHISTISCHE</textPath></text>
+	        <text style="fill: white; font-family: sans-serif; font-weight: bold; font-size: 40px; text-align: center; text-anchor: middle;"><textPath id="lowertext" startOffset="50%" xlink:href="#lower">AKTION</textPath></text>
             </g>
 	</svg>
 	<form>
 	    <label for="input-text-upper">Upper text</label>
-	    <input type="text" id="input-text-upper" name="upper" value="ANTIFASCHISTISCHE" />
+	    <input type="text" id="input-text-upper" name="upper" value="ANTIFASCHISTISCHE">
 	    <label for="input-text-lower">Lower text</label>
-	    <input type="text" id="input-text-lower" name="lower" value="AKTION" />
+	    <input type="text" id="input-text-lower" name="lower" value="AKTION">
 	    <label for="input-range-shift-x">X Position</label>
-	    <input type="range" id="input-range-position-x" name="position-x" value="-9" min="-500" max="500" />
+	    <input type="range" id="input-range-position-x" name="position-x" value="-9" min="-500" max="500">
 	    <label for="input-range-shift-y">Y Position</label>
-	    <input type="range" id="input-range-position-y" name="position-y" value="-2" min="-500" max="500" />
+	    <input type="range" id="input-range-position-y" name="position-y" value="-2" min="-500" max="500">
 	    <label for="input-range-shift-x">X Shift</label>
-	    <input type="range" id="input-range-shift-x" name="distance-x" value="0" min="-250" max="250" />
+	    <input type="range" id="input-range-shift-x" name="distance-x" value="0" min="-250" max="250">
 	    <label for="input-range-shift-y">Y Shift</label>
-	    <input type="range" id="input-range-shift-y" name="distance-y" value="0" min="-250" max="250" />
+	    <input type="range" id="input-range-shift-y" name="distance-y" value="0" min="-250" max="250">
 	    <label for="input-range-scale-black">Black Scale</label>
-	    <input type="range" id="input-range-scale-black" name="scale-black" value="0" min="-3" max="3" step="0.01" />
+	    <input type="range" id="input-range-scale-black" name="scale-black" value="0" min="-3" max="3" step="0.01">
 	    <label for="input-range-scale-red">Red Scale</label>
-	    <input type="range" id="input-range-scale-red" name="scale-red" value="0" min="-3" max="3" step="0.01" />
-	    <label for="input-file-icon">Black Icon (black+white+alpha only)</label>
-	    <input type="file" id="input-file-icon-black" name="icon-black" accept="image/*" />
-	    <label for="input-file-icon">Red Icon (black+white+alpha only)</label>
-	    <input type="file" id="input-file-icon-red" name="icon-red" accept="image/*" />
+	    <input type="range" id="input-range-scale-red" name="scale-red" value="0" min="-3" max="3" step="0.01">
+	    <label for="input-file-icon-black">Black Icon (black+white+alpha only)</label>
+	    <input type="file" id="input-file-icon-black" name="icon-black" accept="image/*">
+	    <label for="input-file-icon-red">Red Icon (black+white+alpha only)</label>
+	    <input type="file" id="input-file-icon-red" name="icon-red" accept="image/*">
 	    <label for="input-range-bleed">Bleed (black in download)</label>
-	    <input type="range" id="input-range-bleed" name="bleed" value="0" min="0" max="50" />
+	    <input type="range" id="input-range-bleed" name="bleed" value="0" min="0" max="50">
 	    <div>
-		<input type="checkbox" id="input-check-swap-red-black" name="swap-red-black" />
+		<input type="checkbox" id="input-check-swap-red-black" name="swap-red-black">
 		<label for="input-check-swap-red-black">Red on top of black</label>
-		<input type="checkbox" id="input-check-lock-scale" name="lock-scale" />
+		<input type="checkbox" id="input-check-lock-scale" name="lock-scale">
 		<label for="input-check-lock-scale">Same scale for red and black</label>
 	    </div>
             <div>
-	        <input type="button" id="input-button-download" value="Download SVG" />
-	        <input type="button" id="input-button-download-png" value="Download PNG" />
+	        <input type="button" id="input-button-download" value="Download SVG">
+	        <input type="button" id="input-button-download-png" value="Download PNG">
             </div>
 	    <label for="input-file-import-svg">Import downloaded SVG</label>
-	    <input type="file" id="input-file-import-svg" name="import-svg" accept="image/svg+xml" />
+	    <input type="file" id="input-file-import-svg" name="import-svg" accept="image/svg+xml">
 	</form>
-	<a id="download" download="antifa.svg" filename="antifa.svg"></a>
-	<a id="download-png" download="antifa.png" filename="antifa.png"></a>
+	<a id="download" download="antifa.svg" href="#"></a>
+	<a id="download-png" download="antifa.png" href="#"></a>
 	<script>
 	 let doc = document.getElementById('svg');
 	 let inputTextUpper = document.getElementById("input-text-upper");
@@ -217,7 +210,7 @@
 	     let serialized = new XMLSerializer().serializeToString(doc);
 	     doc.getElementById("bleed").style.stroke = '#ff00ff';
 	     let a = document.getElementById('download');
-	     a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized));
+	     a.setAttribute('href', 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent('<?xml version="1.0" encoding="utf-8"?>\n' + serialized));
 	     a.click();
 	 };
 	 inputButtonDownloadPng.onclick = (ev) => {
@@ -260,7 +253,7 @@
 	         a.setAttribute('href', canvas.toDataURL());
 	         a.click();
              };
-             image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(serialized);
+             image.src = 'data:image/png;charset=utf-8,' + encodeURIComponent(serialized);
 	 };
 	 inputFileImportSvg.onchange = (ev) => {
 	     let file = ev.target.files[0];
