|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | +<head> |
| 4 | + <meta charset="UTF-8"> |
| 5 | + <title>SVG Base64 Embedding Demo</title> |
| 6 | + <style> |
| 7 | + body { |
| 8 | + font-family: system-ui, -apple-system, sans-serif; |
| 9 | + max-width: 800px; |
| 10 | + margin: 2rem auto; |
| 11 | + padding: 0 1rem; |
| 12 | + } |
| 13 | + .demo-grid { |
| 14 | + display: grid; |
| 15 | + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); |
| 16 | + gap: 2rem; |
| 17 | + margin: 2rem 0; |
| 18 | + } |
| 19 | + .demo-item { |
| 20 | + border: 1px solid #ccc; |
| 21 | + padding: 1rem; |
| 22 | + border-radius: 8px; |
| 23 | + } |
| 24 | + img { |
| 25 | + width: 100%; |
| 26 | + height: auto; |
| 27 | + margin: 1rem 0; |
| 28 | + } |
| 29 | + h2 { |
| 30 | + margin: 0 0 1rem 0; |
| 31 | + font-size: 1.2rem; |
| 32 | + } |
| 33 | + </style> |
| 34 | +</head> |
| 35 | +<body> |
| 36 | + <h1>SVG Base64 Embedding Demo</h1> |
| 37 | + |
| 38 | + <div class="demo-grid"> |
| 39 | + <div class="demo-item"> |
| 40 | + <h2>Simple Sun SVG</h2> |
| 41 | + <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMCIgZmlsbD0iI2ZmYjkwMCIvPjxnIHN0cm9rZT0iI2ZmYjkwMCIgc3Ryb2tlLXdpZHRoPSI0Ij48bGluZSB4MT0iNTAiIHkxPSIxMCIgeDI9IjUwIiB5Mj0iMCIvPjxsaW5lIHgxPSI1MCIgeTE9IjkwIiB4Mj0iNTAiIHkyPSIxMDAiLz48bGluZSB4MT0iMTAiIHkxPSI1MCIgeDI9IjAiIHkyPSI1MCIvPjxsaW5lIHgxPSI5MCIgeTE9IjUwIiB4Mj0iMTAwIiB5Mj0iNTAiLz48L2c+PC9zdmc+" alt="Simple sun SVG"> |
| 42 | + <p>A basic sun shape with rays</p> |
| 43 | + </div> |
| 44 | + |
| 45 | + <div class="demo-item"> |
| 46 | + <h2>Pelican SVG</h2> |
| 47 | + <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjAsMzAgQzIwLDMwIDQwLDI1IDQ1LDQwIEM0NSw0MCA1MCw0MCA2MCwzNSBDNzAsMzAgODUsMzUgODUsMzUgQzg1LDM1IDc1LDQ1IDY1LDUwIEM1NSw1NSA0NSw2MCA0NSw2MCBDNDV |
| 48 | +sNjAgMzUsNjUgMjUsNzAgQzI1LDcwIDIwLDUwIDIwLDMwIFoiIGZpbGw9IiM2NjY2NjYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIzNSIgcj0iMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==" alt="Pelican SVG"> |
| 49 | + <p>A stylized pelican shape</p> |
| 50 | + </div> |
| 51 | + |
| 52 | + <div class="demo-item"> |
| 53 | + <h2>SVG with JavaScript (ignored)</h2> |
| 54 | + <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48c2NyaXB0PmFsZXJ0KCdUaGlzIHdpbGwgbm90IHJ1biEnKTwvc2NyaXB0PjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZmY2YjZiIiBvbmNsaWNrPSJhbGVydChsb2NhdGlvbi5ocmVmICsgJyAtICcgKyBkb2N1bWVudC5jb29raWUpIi8+PHRleHQgeD0iNTAiIHk9IjU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjZmZmIj5KUyBJZ25vcmVkPC90ZXh0Pjwvc3ZnPg==" alt="SVG with JavaScript that will be ignored"> |
| 55 | + <p>SVG with JavaScript that gets ignored when embedded as an image</p> |
| 56 | + </div> |
| 57 | + </div> |
| 58 | + |
| 59 | + <footer> |
| 60 | + <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> |
| 61 | + </footer> |
| 62 | +</body> |
| 63 | +</html> |
0 commit comments