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).
<!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:
- A simple sun SVG with basic shapes and rays
- A stylized pelican SVG using path commands
- 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:
- All SVGs are converted to base64 and embedded using the format:
data:image/svg+xml;base64,[base64 encoded SVG]
- The JavaScript SVG demonstrates that even though it contains
<script>
tags andonclick
handlers, they won't execute when embedded as an image - The page is responsive and will reflow based on screen size
- 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?