Skip to content

Instantly share code, notes, and snippets.

@simonw
Last active October 26, 2024 00:26
Show Gist options
  • Save simonw/4e6ff3b3c56b7a4810aa4c8becfc2f40 to your computer and use it in GitHub Desktop.
Save simonw/4e6ff3b3c56b7a4810aa4c8becfc2f40 to your computer and use it in GitHub Desktop.

Embedding SVG Files with Base64 URIs

human (Oct 25, 2024, 05:22 PM)

Build me an artifact - just HTML, no JavaScript - which demonstrates embedding some SVG files using img src= base64 URIs

I want three SVGs - one of the sun, one of a pelican and one that includes some tricky javascript things which I hope the img src= tag will ignore

assistant (Oct 25, 2024, 05:22 PM)

I'll create an HTML artifact that demonstrates embedding SVGs using base64 data URIs, including one that attempts to include JavaScript (which will be safely ignored when embedded as an image).

SVG Base64 Embedding Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SVG Base64 Embedding Demo</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            max-width: 800px;
            margin: 2rem auto;
            padding: 0 1rem;
        }
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        .demo-item {
            border: 1px solid #ccc;
            padding: 1rem;
            border-radius: 8px;
        }
        img {
            width: 100%;
            height: auto;
            margin: 1rem 0;
        }
        h2 {
            margin: 0 0 1rem 0;
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <h1>SVG Base64 Embedding Demo</h1>
    
    <div class="demo-grid">
        <div class="demo-item">
            <h2>Simple Sun SVG</h2>
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSIzMCIgZmlsbD0iI2ZmYjkwMCIvPjxnIHN0cm9rZT0iI2ZmYjkwMCIgc3Ryb2tlLXdpZHRoPSI0Ij48bGluZSB4MT0iNTAiIHkxPSIxMCIgeDI9IjUwIiB5Mj0iMCIvPjxsaW5lIHgxPSI1MCIgeTE9IjkwIiB4Mj0iNTAiIHkyPSIxMDAiLz48bGluZSB4MT0iMTAiIHkxPSI1MCIgeDI9IjAiIHkyPSI1MCIvPjxsaW5lIHgxPSI5MCIgeTE9IjUwIiB4Mj0iMTAwIiB5Mj0iNTAiLz48L2c+PC9zdmc+" alt="Simple sun SVG">
            <p>A basic sun shape with rays</p>
        </div>

        <div class="demo-item">
            <h2>Pelican SVG</h2>
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48cGF0aCBkPSJNMjAsMzAgQzIwLDMwIDQwLDI1IDQ1LDQwIEM0NSw0MCA1MCw0MCA2MCwzNSBDNzAsMzAgODUsMzUgODUsMzUgQzg1LDM1IDc1LDQ1IDY1LDUwIEM1NSw1NSA0NSw2MCA0NSw2MCBDNDV
sNjAgMzUsNjUgMjUsNzAgQzI1LDcwIDIwLDUwIDIwLDMwIFoiIGZpbGw9IiM2NjY2NjYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyIi8+PGNpcmNsZSBjeD0iMzUiIGN5PSIzNSIgcj0iMyIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==" alt="Pelican SVG">
            <p>A stylized pelican shape</p>
        </div>

        <div class="demo-item">
            <h2>SVG with JavaScript (ignored)</h2>
            <img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48c2NyaXB0PmFsZXJ0KCdUaGlzIHdpbGwgbm90IHJ1biEnKTwvc2NyaXB0PjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZmY2YjZiIiBvbmNsaWNrPSJhbGVydCgnQ2xpY2sgd2lsbCBub3Qgd29yaycpIi8+PHRleHQgeD0iNTAiIHk9IjU1IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBmaWxsPSIjZmZmIj5KUyBJZ25vcmVkPC90ZXh0Pjwvc3ZnPg==" alt="SVG with JavaScript that will be ignored">
            <p>SVG with JavaScript that gets ignored when embedded as an image</p>
        </div>
    </div>

    <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>
</body>
</html>

I've created an HTML page that demonstrates three different SVGs embedded using base64 data URIs:

  1. A simple sun SVG with basic shapes and rays
  2. A stylized pelican SVG using path commands
  3. An SVG that includes JavaScript (both inline script and event handlers) which will be safely ignored when embedded as an image

Each SVG is displayed in its own card with a title and description. The page is styled with a responsive grid layout that will adjust based on screen size.

Key points about the implementation:

  1. All SVGs are converted to base64 and embedded using the format: data:image/svg+xml;base64,[base64 encoded SVG]
  2. The JavaScript SVG demonstrates that even though it contains <script> tags and onclick handlers, they won't execute when embedded as an image
  3. The page is responsive and will reflow based on screen size
  4. I've included some basic styling to make the demo look clean and organized

Would you like me to explain any particular aspect of the implementation in more detail?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment