Display decoded SVGs on page

Some help from https://gist.github.com/simonw/e07899a173ffe9f5723994e1405f909a

Author: simonw

svg-sandbox.html

@@ -59,5 +59,67 @@ <h2>SVG with JavaScript (ignored)</h2>
     <footer>
         <p>Note: When SVGs are embedded using <code>img</code> tags with base64 data URIs, any JavaScript or interactive elements are safely ignored by the browser.</p>
     </footer>
+
+<script>
+    // Function to decode base64 to string
+function decodeBase64(str) {
+    // Remove data URL prefix if present
+    const base64Data = str.replace(/^data:image\/svg\+xml;base64,/, '');
+    try {
+        return atob(base64Data);
+    } catch (e) {
+        console.error('Error decoding base64:', e);
+        return null;
+    }
+}
+
+// Function to create and append SVG section
+function appendSVG(title, svgContent) {
+    const container = document.createElement('div');
+    container.style.marginTop = '20px';
+    container.style.padding = '10px';
+    container.style.border = '1px solid #ccc';
+
+    // Add title
+    const heading = document.createElement('h3');
+    heading.textContent = title;
+    container.appendChild(heading);
+
+    // Add SVG content
+    const pre = document.createElement('pre');
+    pre.style['white-space'] = 'pre-wrap';
+    pre.innerText = svgContent.replace(/>/g,'>\n');
+    container.appendChild(pre);
+
+    return container;
+}
+
+// Main function to process images and display SVGs
+function displayDecodedSVGs() {
+    // Create container for decoded SVGs
+    const decodedContainer = document.createElement('div');
+    decodedContainer.id = 'decoded-svgs';
+
+    // Find all images
+    const images = document.querySelectorAll('img');
+    let svgCount = 0;
+
+    images.forEach(img => {
+        const src = img.getAttribute('src');
+        if (src && src.startsWith('data:image/svg+xml;base64,')) {
+            const decodedSVG = decodeBase64(src);
+            if (decodedSVG) {
+                const title = img.getAttribute('alt') || `SVG ${++svgCount}`;
+                const svgContainer = appendSVG(title, decodedSVG);
+                decodedContainer.appendChild(svgContainer);
+            }
+        }
+    });
+    document.body.appendChild(decodedContainer);
+}
+
+// Run the script
+displayDecodedSVGs();
+</script>
 </body>
 </html>