diff --git a/src/index.html b/src/index.html index 5b13947326223ab4a52d2719bfef183db918ad91..b1dfd52b9f384d4afbb3bb35f36dc58720167652 100644 --- a/src/index.html +++ b/src/index.html @@ -83,6 +83,11 @@ #preview_big, #preview_small { display: block; width: 100%; + /* TODO this is eyeballed and might not work for all + / screen / font sizes; unfortunately svg-element's dont + / resize to content automatically (and I'm not sure if + / they can) */ + height: 30em; } @media screen and (prefers-color-scheme: light) { body { @@ -173,9 +178,10 @@ } update_logo = () => { - // Might at least try to be a bit immutable - svg_big = svg_big_template.cloneNode(true); - svg_small = svg_small_template.cloneNode(true); + // don't copy this each time + // (unfortunately we're not in a lazy language … *sigh*) + svg_big = svg_big_template //.cloneNode(true); + svg_small = svg_small_template //.cloneNode(true); // Collect all options animal_selected = document.querySelector('#selector_animal input[name=animal]:checked').value; @@ -200,9 +206,6 @@ apply_color(".color_background_top", "stop-color", background_color.top); apply_color(".color_background_bottom", "stop-color", background_color.bottom); - // Display the SVG in the preview, it's incoded to prevent id conflics and make shure it's displayed correctly - document.querySelector("#preview_big").src = "data:image/svg+xml;base64," + btoaUnicode(new XMLSerializer().serializeToString(svg_big)); - document.querySelector("#preview_small").src = "data:image/svg+xml;base64," + btoaUnicode(new XMLSerializer().serializeToString(svg_small)); // 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(" ") + "\"."; @@ -211,6 +214,12 @@ } update_logo(); + // don't replace the entire svg each time, just add it once as svg, then + // mutate it in place; that way the browser can just ignore the font blob + // after it's been loaded once + document.querySelector("#preview_big").appendChild (svg_big); + document.querySelector("#preview_small").appendChild(svg_small); + // Add a event listener to every input event document.querySelectorAll( "#selector_animal input,\ @@ -274,13 +283,13 @@ <h2>big</h2> <button id="download_big_svg">Save big SVG</button> <button id="download_big_png">Save big PNG</button> - <img id="preview_big"/> + <svg id="preview_big"/> </div> <div> <h2>small</h2> <button id="download_small_svg">Save small SVG</button> <button id="download_small_png">Save small PNG</button> - <img id="preview_small"/> + <svg id="preview_small"/> </div> </div> <h2>Alt text</h2>