diff --git a/js/svg/main.js b/js/svg/main.js
index 1a6c4b6..4ac2484 100644
--- a/js/svg/main.js
+++ b/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 };
diff --git a/js/svg/rainPass.js b/js/svg/rainPass.js
index 1583b5f..51387da 100644
--- a/js/svg/rainPass.js
+++ b/js/svg/rainPass.js
@@ -194,7 +194,12 @@ export default ({ artboard, config }) => {
glyphElements.sort((p, q) => q[0] - p[0])
- output.innerHTML = `${defs.outerHTML}${glyphElements.map(([depth, tag]) => tag).join("\n")}`;
+ output.innerHTML = [
+ ``,
+ defs.outerHTML,
+ ``,
+ glyphElements.map(([depth, tag]) => tag).join("\n")
+ ].join("\n");
artboard.appendChild(output);
};
diff --git a/js/svg/utils.js b/js/svg/utils.js
index 836b408..c811190 100644
--- a/js/svg/utils.js
+++ b/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();