svg + responsive

static/builder.js

@@ -295,8 +295,8 @@ document
             const loader =
                 document.querySelector(".loader");
 
-            const iframe =
-                document.getElementById("pdf_iframe");
+            const frame =
+                document.getElementById("img_svg");
 
             const pdflink =
                 document.getElementById("pdf_link");
@@ -304,9 +304,33 @@ document
 
             submitButton.disabled = true;
             loader.style.display = "block";
+            pdflink.disabled = true;
 
             try {
 
+                const response_svg =
+                    await fetch("/edt.svg", {
+                        method: "POST",
+                        headers: {
+                            "Content-Type": "application/json"
+                        },
+                        body: JSON.stringify({ cours })
+                    });
+
+                if (!response_svg.ok)
+                    throw new Error("Erreur lors de la génération du SVG.");
+
+                const blob_svg =
+                    await response_svg.blob();
+
+                const url_svg =
+                    URL.createObjectURL(blob_svg);
+
+
+                frame.src = url_svg;
+                frame.style.display = "block";
+
+
                 const response =
                     await fetch("/edt.pdf", {
                         method: "POST",
@@ -325,9 +349,6 @@ document
                 const url =
                     URL.createObjectURL(blob);
 
-                iframe.src = url;
-                iframe.style.display = "block";
-
                 pdflink.href = url;
                 pdflink.style.display = "block";
 
@@ -340,6 +361,7 @@ document
 
                 loader.style.display = "none";
                 submitButton.disabled = false;
+		pdflink.disabled = false;
 
             }
 
@@ -372,4 +394,4 @@ if (selectAll) {
             });
 
     };
-}
+}

static/style.css

@@ -169,9 +169,15 @@
 }
 
 
-#pdf_iframe {
-    width: min(100%, 1400px);
-    aspect-ratio: 297 / 210;
+.container {
+height: 100%;
+overflow-x: scroll;    
+white-space: nowrap;
+width: 100%;
+}
+
+#img_svg {
+    width: max(800px, 70%);
     border: 1px solid #ccc;
     margin: 1rem auto;
 }
@@ -179,4 +185,4 @@
 footer {
     margin-top: 2em;
     text-align: center
-}
+}