Update app.py

app.py

@@ -48,13 +48,12 @@ def html_output(input_file):
     function copySvgToClipboard() {
     const svgElement = document.getElementById('svgElement');
     const svgData = new XMLSerializer().serializeToString(svgElement);
-    const blob = new Blob([svgData], { type: 'image/svg+xml' });
-    const clipboardItem = [new ClipboardItem({ 'image/svg+xml': blob })];
 
-    navigator.clipboard.write(clipboardItem).then(() => {
-        alert("SVG copied to clipboard!");
+    // Copy the serialized SVG text to the clipboard
+    navigator.clipboard.writeText(svgData).then(() => {
+        alert("SVG text copied to clipboard!");
     }).catch(err => {
-        console.error("Could not copy SVG to clipboard: ", err);
+        console.error("Could not copy SVG text to clipboard: ", err);
     });
 }
 
@@ -67,19 +66,28 @@ function copyPngToClipboard() {
     const img = new Image();
 
     img.onload = function () {
+        // Ensure canvas size matches the SVG
         canvas.width = svgElement.clientWidth;
         canvas.height = svgElement.clientHeight;
+
+        // Clear the canvas (transparent background)
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        // Draw the SVG image on the canvas
         ctx.drawImage(img, 0, 0);
+
+        // Convert the canvas content to a PNG blob
         canvas.toBlob(blob => {
             const clipboardItem = [new ClipboardItem({ 'image/png': blob })];
             navigator.clipboard.write(clipboardItem).then(() => {
-                alert("PNG copied to clipboard!");
+                alert("PNG with transparent background copied to clipboard!");
             }).catch(err => {
                 console.error("Could not copy PNG to clipboard: ", err);
             });
         }, 'image/png');
     };
 
+    // Set the image source to the serialized SVG data
     img.src = 'data:image/svg+xml;base64,' + btoa(svgData);
 }