diff --git a/src/index.html b/src/index.html
index 9dfeb04de0353207ada0f6f4c89e5babb9d6be38..c77682710a17b92d14e095fc15f2dd982c239c96 100644
--- a/src/index.html
+++ b/src/index.html
@@ -36,11 +36,15 @@
         .table {
             display: inline-grid;
             grid-template-columns: repeat(2, auto);
+            grid-template-rows: repeat(3, auto);
         }
         .table > * {
             margin: 5px 7px;
         }
-        #preview h2 {
+        .dynamic_table {
+            width: 100%;
+        }
+        #preview h2, #preview button {
             margin-bottom: 5px;
         }
         .katakana {
@@ -97,6 +101,13 @@
             svg_big_template = new DOMParser().parseFromString(atob("@SVG_BIG_TEMPLATE@"), "image/svg+xml").querySelector("svg");
             svg_small_template = new DOMParser().parseFromString(atob("@SVG_SMALL_TEMPLATE@"), "image/svg+xml").querySelector("svg");
 
+            svg_big_png_width = 2048;
+            svg_small_png_width = 512;
+
+            svg_big = svg_big_template.cloneNode(true);
+            svg_small = svg_small_template.cloneNode(true);
+            file_name_prefix = "DiVOC-BB3_DiVOC_ブリッジ・バブルス_bunny_";
+
             // Base64 encoder which supports unicode
             btoaUnicode = (bin) => {
                 return btoa(encodeURIComponent(bin).replace(/%([0-9A-F]{2})/g,
@@ -106,6 +117,61 @@
                 ));
             }
 
+            // https://stackoverflow.com/a/27419542
+            dataURItoBlob = (dataURI) => {
+                // convert base64/URLEncoded data component to raw binary data held in a string
+                var byteString;
+                if (dataURI.split(',')[0].indexOf('base64') >= 0)
+                    byteString = atob(dataURI.split(',')[1]);
+                else
+                    byteString = unescape(dataURI.split(',')[1]);
+
+                // separate out the mime component
+                var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+                // write the bytes of the string to a typed array
+                var ia = new Uint8Array(byteString.length);
+                for (var i = 0; i < byteString.length; i++) {
+                    ia[i] = byteString.charCodeAt(i);
+                }
+
+                return new Blob([ia], {type:mimeString});
+            }
+
+            // Moddified version of https://gist.github.com/danallison/3ec9d5314788b337b682
+            download_string = (text, file_type, file_name) => {
+                download_blob(new Blob([text], { type: file_type }), file_type, file_name);
+            }
+
+            download_blob = (blob, file_type, file_name) => {
+                var a = document.createElement('a');
+                a.download = file_name;
+                a.href = URL.createObjectURL(blob);
+                a.dataset.downloadurl = [file_type, a.download, a.href].join(':');
+                a.style.display = "none";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                setTimeout(() => URL.revokeObjectURL(a.href), 60000);
+            }
+
+            svg2png = (svg_data, width, height) => {
+                image = new Image();
+                image.src = "data:image/svg+xml;base64," + btoaUnicode(new XMLSerializer().serializeToString(svg_data));
+
+                if (height === null) {
+                    height = (image.height / image.width) * width;
+                }
+
+                canvas = document.createElement("canvas");
+                canvas.width = width;
+                canvas.height = height;
+
+                canvas.getContext('2d').drawImage(image, 0, 0, width, height);
+
+                return dataURItoBlob(canvas.toDataURL("image/png"));
+            }
+
             update_logo = () => {
                 // Might at least try to be a bit immutable
                 svg_big = svg_big_template.cloneNode(true);
@@ -140,6 +206,8 @@
 
                 // Generate a simple alt text
                 document.querySelector("#alt_text").innerHTML = "Stylized logo showing a " + animal_selected + " in a bubble. The text underneath reads \"" + headline_text + "\" and \"" + sub_headline_texts.join(" ") + "\".";
+
+                file_name_prefix = "DiVOC-BB3_" + headline_text + "_" + sub_headline_texts.join("-") + "_" + animal_selected + "_";
             }
             update_logo();
 
@@ -184,16 +252,16 @@
             });
 
             document.querySelector("#download_big_svg").addEventListener("click", (event) => {
-
+                download_string(new XMLSerializer().serializeToString(svg_big), "image/svg+xml", file_name_prefix + "big.svg");
             });
             document.querySelector("#download_big_png").addEventListener("click", (event) => {
-
+                download_blob(svg2png(svg_big, svg_big_png_width, null), "image/png", file_name_prefix + "big.png");
             });
             document.querySelector("#download_small_svg").addEventListener("click", (event) => {
-
+                download_string(new XMLSerializer().serializeToString(svg_small), "image/svg+xml", file_name_prefix + "small.svg");
             });
             document.querySelector("#download_small_png").addEventListener("click", (event) => {
-
+                download_blob(svg2png(svg_small, svg_small_png_width, null), "image/png", file_name_prefix + "small.png");
             });
         }
     </script>
@@ -204,15 +272,15 @@
         <div id="preview" class="table dynamic_table">
             <div>
                 <h2>big</h2>
-                <img id="preview_big"/>
                 <button id="download_big_svg">Save big SVG</button>
-            <button id="download_big_png">Save big PNG</button>
+                <button id="download_big_png">Save big PNG</button>
+                <img id="preview_big"/>
             </div>
             <div>
                 <h2>small</h2>
-                <img id="preview_small"/>
                 <button id="download_small_svg">Save small SVG</button>
                 <button id="download_small_png">Save small PNG</button>
+                <img id="preview_small"/>
             </div>
         </div>
         <h2>Alt text</h2>