fix(#944): uploaded svg emblems can conflict with fmg ids

index.css

@@ -1731,7 +1731,7 @@ div.states > div.biomeArea {
 #emblemUploadControl,
 #emblemDownloadControl {
   margin-top: 0.3em;
-  text-align: center;
+  width: 100%;
 }
 
 div.editorLine {

index.html

@@ -128,7 +128,7 @@
       }
     </style>
 
-    <link rel="preload" href="index.css?v=1.89.19" as="style" onload="this.onload=null; this.rel='stylesheet'" />
+    <link rel="preload" href="index.css?v=1.89.21" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="icons.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
     <link rel="preload" href="libs/jquery-ui.css" as="style" onload="this.onload=null; this.rel='stylesheet'" />
   </head>
@@ -4902,7 +4902,10 @@
           >
             Any image
           </button>
-          <button id="emblemsUploadSVG" data-tip="Upload prepared SVG image, e.g. SVG from Armoria">
+          <button
+            id="emblemsUploadSVG"
+            data-tip="Upload prepared SVG image (SVG from Armoria or SVG processed with 'Optimize vector' tool)"
+          >
             Prepared SVG
           </button>
           <a
@@ -7896,7 +7899,7 @@
     <script defer src="modules/ui/markers-overview.js?v=1.89.20"></script>
     <script defer src="modules/ui/regiment-editor.js"></script>
     <script defer src="modules/ui/battle-screen.js"></script>
-    <script defer src="modules/ui/emblems-editor.js"></script>
+    <script defer src="modules/ui/emblems-editor.js?v=1.89.21"></script>
     <script defer src="modules/ui/markers-editor.js"></script>
     <script defer src="modules/ui/3d.js"></script>
     <script defer src="modules/ui/submap.js"></script>

modules/ui/emblems-editor.js

@@ -239,12 +239,9 @@ function editEmblem(type, id, el) {
     input.value = "";
 
     if (file.size > 500000) {
-      tip(
-        `File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB`,
-        true,
-        "error",
-        5000
-      );
+      const message =
+        "File is too big, please optimize file size up to 500kB and re-upload. Recommended size is 200x200 px and up to 100kB";
+      tip(message, true, "error", 5000);
       return;
     }
 
@@ -253,40 +250,37 @@ function editEmblem(type, id, el) {
     reader.onload = function (readerEvent) {
       const result = readerEvent.target.result;
       const defs = document.getElementById("defs-emblems");
-      const coa = document.getElementById(id); // old emblem
+      const oldEmblem = document.getElementById(id);
 
-      if (type === "image") {
-        const svg = `<svg id="${id}" xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><image x="0" y="0" width="200" height="200" href="${result}"/></svg>`;
-        defs.insertAdjacentHTML("beforeend", svg);
-      } else {
+      let href = result; // raster images
+      if (type === "svg") {
         const el = document.createElement("html");
         el.innerHTML = result;
 
-        // remove sodipodi and inkscape attributes
         el.querySelectorAll("*").forEach(el => {
-          const attributes = el.getAttributeNames();
-          attributes.forEach(attr => {
+          if (el.id === "adobe_illustrator_pgf") el.remove(); // remove Adobe Illustrator inner data
+
+          el.getAttributeNames().forEach(attr => {
+            // remove sodipodi and inkscape attributes
             if (attr.includes("inkscape") || attr.includes("sodipodi")) el.removeAttribute(attr);
           });
         });
 
         const svg = el.querySelector("svg");
         if (!svg) {
-          tip(
-            "The file should be prepated for load to FMG. Please use Armoria or other relevant tools",
-            false,
-            "error"
-          );
+          const message = "The file is not a valid SVG. Please use Armoria or other relevant tools";
+          tip(message, false, "error");
           return;
         }
 
-        const newEmblem = defs.appendChild(svg);
-        newEmblem.id = id;
-        newEmblem.setAttribute("width", 200);
-        newEmblem.setAttribute("height", 200);
+        const serialized = new XMLSerializer().serializeToString(svg);
+        href = "data:image/svg+xml;base64," + window.btoa(serialized);
       }
 
-      if (coa) coa.remove(); // remove old emblem
+      const svg = `<svg id="${id}" viewBox="0 0 200 200"><image width="200" height="200" href="${href}"/></svg>`;
+      defs.insertAdjacentHTML("beforeend", svg);
+
+      if (oldEmblem) oldEmblem.remove();
       el.coa = "custom";
       emblemShapeSelector.disabled = true;
     };

versioning.js

@@ -1,7 +1,7 @@
 "use strict";
 
 // version and caching control
-const version = "1.89.20"; // generator version, update each time
+const version = "1.89.21"; // generator version, update each time
 
 {
   document.title += " v" + version;