-
-
Notifications
You must be signed in to change notification settings - Fork 37
/
svg-sandbox.html
125 lines (112 loc) · 4.77 KB
/
svg-sandbox.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!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,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48c2NyaXB0PmFsZXJ0KCdUaGlzIHdpbGwgbm90IHJ1biEnKTwvc2NyaXB0PjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9IjgwIiBoZWlnaHQ9IjgwIiBmaWxsPSIjZmY2YjZiIiBvbmNsaWNrPSJhbGVydChsb2NhdGlvbi5ocmVmICsgJyAtICcgKyBkb2N1bWVudC5jb29raWUpIi8+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>
<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>