The SVG is now given a black rectangle as a background, and its top level element now has the proper xmlns attribute. Double-clicking the SVG renderer downloads the SVG as a file called "matrix.svg".

js/svg/main.js

@@ -34,19 +34,14 @@ export default async (artboard, config) => {
 	const rect = artboard.getBoundingClientRect();
 	[dimensions.width, dimensions.height] = [rect.width, rect.height];
 
-	if (document.fullscreenEnabled || document.webkitFullscreenEnabled) {
-		window.ondblclick = () => {
-			if (document.fullscreenElement == null) {
-				if (artboard.webkitRequestFullscreen != null) {
-					artboard.webkitRequestFullscreen();
-				} else {
-					artboard.requestFullscreen();
-				}
-			} else {
-				document.exitFullscreen();
-			}
-		};
-	}
+	window.ondblclick = () => {
+		const blob = new Blob([artboard.querySelector("svg").outerHTML], { type: "image/svg+xml" });
+		const url = URL.createObjectURL(blob);
+		const aTag = document.createElement("a");
+		aTag.download = 'matrix.svg';
+		aTag.href = window.URL.createObjectURL(blob);
+		aTag.click();
+	};
 
 	const effectName = config.effect in effects ? config.effect : "palette";
 	const context = { artboard, config };

js/svg/rainPass.js

@@ -194,7 +194,12 @@ export default ({ artboard, config }) => {
 
 		glyphElements.sort((p, q) => q[0] - p[0])
 
-		output.innerHTML = `<style>path { mix-blend-mode: screen; }</style>${defs.outerHTML}${glyphElements.map(([depth, tag]) => tag).join("\n")}`;
+		output.innerHTML = [
+			`<style>path { mix-blend-mode: screen; }</style>`,
+			defs.outerHTML,
+			`<rect width="100%" height="100%" />`,
+			glyphElements.map(([depth, tag]) => tag).join("\n")
+		].join("\n");
 
 		artboard.appendChild(output);
 	};

js/svg/utils.js

@@ -1,4 +1,9 @@
-const makePassSVG = () => document.createElementNS("http://www.w3.org/2000/svg", "svg");
+const svgNS = "http://www.w3.org/2000/svg";
+const makePassSVG = () => {
+	const svg = document.createElementNS(svgNS, "svg");
+	svg.setAttribute("xmlns", svgNS);
+	return svg;
+}
 
 const loadImage = (url) => {
 	const image = new Image();