-
Notifications
You must be signed in to change notification settings - Fork 1
/
testpage.html
executable file
·412 lines (407 loc) · 44.6 KB
/
testpage.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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
<!DOCTYPE html>
<html>
<head>
<title>LapisLegit, a font to test the OpenType SVG table</title>
<meta charset="utf-8">
<style type="text/css">
@font-face {
font-family: LapisLegit;
src: url("dist/LapisLegit.ttf?v=0.5861968285713933");
}
th {
text-align: left;
}
.glyph,
.inline,
.image,
.iframe {
weidth: 3em;
padding: 20px;
background: #9ef;
}
.glyph {
font-family: LapisLegit, monospace;
font-size: 3em;
line-height: 1;
}
.inline svg,
.image img {
width: 3em;
vertical-align: bottom;
}
.iframe iframe {
width: 3em;
height: 3em;
border: none;
}
.glyph-W .glyph,
.glyph-X .glyph,
.glyph-Y .glyph {
color: purple;
}
:root {
--color0: hotpink;
--color1: blue;
--color2: yellow;
}
</style>
</head>
<body>
<h1>LapisLegit, a font to test the OpenType SVG table</h1>
<p>By <a href="https://twitter.com/pixelambacht">Roel Nieskens</a>. More info on <a href="https://github.com/RoelN/LapisLegit">Github</a>!</p>
<p>If you see black squares or nothing in the first column, your browser doesn't <a href="https://pixelambacht.nl/2014/multicolor-fonts/">support OpenType SVG</a> yet.</p>
<p><em>At this moment, some glyphs cause browsers to crash. A "!" will be shown instead of the letter. Click and select the cell to enter the characters yourself... if you dare!</em></p>
<hr>
<table>
<tr>
<th>Glyph</th>
<th>Image</th>
<th>Iframe</th>
<th>Inline</th>
<th>Description</th>
</tr>
<tr class="glyph-A"><td class="glyph"><span contenteditable>A</span></td><td class="image"><img src="./src/svg/0041.svg?v=0.24231030659544084"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0041.svg?v=0.8245953243859135"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path fill="#090" d="M0 0h200v200H0z"/>
<circle fill="#F00" cx="100" cy="100" r="100"/>
<path fill="#FF0" d="M40 160h120L100 40z"/>
</svg>
<!--
Original SVG
-->
</td><td class="info"><a href="./src/svg/0041.svg">0041</a> (A): Original SVG</td></tr>
<tr class="glyph-B"><td class="glyph"><span contenteditable>B</span></td><td class="image"><img src="./src/svg/0042.svg?v=0.8451805634456037"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0042.svg?v=0.5253582688586821"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g style="transform-origin: 50% 50%; transform: rotate(30deg);">
<path fill="#090" d="M0 0h200v200H0z"/>
<circle fill="#F00" cx="100" cy="100" r="100"/>
<path fill="#FF0" d="M40 160h120L100 40z"/>
</g>
</svg>
<!--
Rotated 30 degrees with inline style on group
-->
</td><td class="info"><a href="./src/svg/0042.svg">0042</a> (B): Rotated 30 degrees with inline style on group</td></tr>
<tr class="glyph-C"><td class="glyph"><span contenteditable>C</span></td><td class="image"><img src="./src/svg/0043.svg?v=0.6995402530991276"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0043.svg?v=0.4005965896401287"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g style="opacity: 0.5">
<path fill="#090" d="M0 0h200v200H0z"/>
<circle fill="#F00" cx="100" cy="100" r="100"/>
<path fill="#FF0" d="M40 160h120L100 40z"/>
</g>
</svg>
<!--
Opacity: 0.5 with inline style on group
-->
</td><td class="info"><a href="./src/svg/0043.svg">0043</a> (C): Opacity: 0.5 with inline style on group</td></tr>
<tr class="glyph-D"><td class="glyph"><span contenteditable>D</span></td><td class="image"><img src="./src/svg/0044.svg?v=0.09253390939778539"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0044.svg?v=0.1279840948508829"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
@-webkit-keyframes fadeglyph {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
@-moz-keyframes fadeglyph {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
@-o-keyframes fadeglyph {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
@keyframes fadeglyph {
0% { opacity: 0.1; }
100% { opacity: 1; }
}
#glyph0044 {
-webkit-animation: fadeglyph 1s infinite alternate;
-moz-animation: fadeglyph 1s infinite alternate;
-o-animation: fadeglyph 1s infinite alternate;
animation: fadeglyph 1s infinite alternate;
}
</style>
<g id="glyph0044">
<path fill="#090" d="M0 0h200v200H0z"/>
<circle fill="#F00" cx="100" cy="100" r="100"/>
<path fill="#FF0" d="M40 160h120L100 40z"/>
</g>
</svg>
<!--
Animating opacity from 0.1 to 1
-->
</td><td class="info"><a href="./src/svg/0044.svg">0044</a> (D): Animating opacity from 0.1 to 1</td></tr>
<tr class="glyph-E"><td class="glyph"><span contenteditable>E</span></td><td class="image"><img src="./src/svg/0045.svg?v=0.22403459448683183"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0045.svg?v=0.4135501379347727"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path id="jstest1" fill="#090" d="M0 0h200v200H0z"/>
<circle id="jstest2" fill="#F00" cx="100" cy="100" r="100"/>
<path id="jstest3" fill="#FF0" d="M40 160h120L100 40z"/>
<script type="text/javascript">
<![CDATA[jstest1.style.fill="#00f";jstest2.style.fill="#00f";jstest3.style.fill="#00f"]]>
</script>
</svg>
<!--
Use JavaScript to turn all elements in the SVG blue
-->
</td><td class="info"><a href="./src/svg/0045.svg">0045</a> (E): Use JavaScript to turn all elements in the SVG blue</td></tr>
<tr class="glyph-F"><td class="glyph"><span contenteditable>F</span></td><td class="image"><img src="./src/svg/0046.svg?v=0.2684369702875137"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0046.svg?v=0.3176007960144942"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
.hoverme {
transition: fill 1s;
}
.hoverme:hover,
.hoverme:hover {
fill: black;
}
</style>
<path class="hoverme" fill="#090" d="M0 0h200v200H0z"/>
<circle class="hoverme" fill="#F00" cx="100" cy="100" r="100"/>
<path class="hoverme" fill="#FF0" d="M40 160h120L100 40z"/>
</svg>
<!--
Turn each element black on hover, using CSS transition of 1 second
-->
</td><td class="info"><a href="./src/svg/0046.svg">0046</a> (F): Turn each element black on hover, using CSS transition of 1 second</td></tr>
<tr class="glyph-G"><td class="glyph"><span contenteditable>G</span></td><td class="image"><img src="./src/svg/0047.svg?v=0.07962237521855686"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0047.svg?v=0.7389942632179662"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<g>
<animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="3s" repeatCount="indefinite"/>
<path fill="#090" d="M0 0h200v200H0z"/>
<circle fill="#F00" cx="100" cy="100" r="100"/>
<path fill="#FF0" d="M40 160h120L100 40z"/>
</g>
</svg>
<!--
Rotating with SMIL's animateTransform
-->
</td><td class="info"><a href="./src/svg/0047.svg">0047</a> (G): Rotating with SMIL's animateTransform</td></tr>
<tr class="glyph-H"><td class="glyph"><span contenteditable>H</span></td><td class="image"><img src="./src/svg/0048.svg?v=0.18013515293881033"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0048.svg?v=0.8706794542882665"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<foreignobject x="0" y="0" width="200" height="200">
<body xmlns="http://www.w3.org/1999/xhtml">
<div style="background:lime">
<strong>Strong!</strong>
</div>
<div style="background:pink">
<em>Emphasis!</em>
</div>
<div style="background:yellow">
<h1>Big header!</h1>
</div>
</body>
</foreignobject>
</svg>
<!--
Foreignobject with HTML and some inline styles to change background color
-->
</td><td class="info"><a href="./src/svg/0048.svg">0048</a> (H): Foreignobject with HTML and some inline styles to change background color</td></tr>
<tr class="glyph-I"><td class="glyph"><span contenteditable>I</span></td><td class="image"><img src="./src/svg/0049.svg?v=0.7854817222896304"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0049.svg?v=0.49291433015792296"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<image width="200" height="200" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB9AAAAXcCAMAAABNu+UZAAAAXVBMVEXAwMCdnWbAwAAolnMAwMACqwYAwAAfkB/AAMCWBUPAAAATBI4AAMAFBY8TExN2CHYsECwQLCwIdnaPj48AIUzd3t////89GWUyAGohCzkPDw8JCQkLCwsdHR0WFhasIjVsAAATC0lEQVR4Ae3XRXoDMAyFwacy8/1PWG4Yuw15maQwcwTb8v+p0kY5HqfzO07H4Tgdp8NBAABBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABD0JQCAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6AAg6ACDoAICgAwCCDgCCDgAIOgAg6ACAoAOAoAMAgg4ACDoAIOgAIOgAgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADgKADAIIOAAg6ACDoACDoAICgAwCCDgAIOgAIOgAg6ACAoAMAgg4Agg4ACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6AAg6ACAoAMAgg4ACDoACDoAIOgAgKADAIIOAIIOAAg6ACDoAICgA4CgAwCCDgAIOgAg6ABAXYWmqtBUw9B0Ngsth1+h6WYSmo5f8gfZ0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwDqKWxdVf4Ah0x1w7ZdVbapPrNVt9mqeg82dAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdAAQdABA0AEAQQcABB0ABB0AEHQAQNABAEEHAEEHAAQdABB0AEDQAUDQAQBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdAAQdABB0AEDQAQBBBwBBBwAEHQAQdABA0AFA0AEAQQcABB0AEHQAEHQAQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABQNABAEEHAAQdABB0ABB0AEDQAQBBBwAEHQAEHQAQdABA0AEAQQcAQQcABB0AEHQAQNABgD8SdADgG8XYE9D2DhqWAAAAAElFTkSuQmCC" />
</svg>
<!--
SVG with embedded PNG image
-->
</td><td class="info"><a href="./src/svg/0049.svg">0049</a> (I): SVG with embedded PNG image</td></tr>
<tr class="glyph-P"><td class="glyph"><span contenteditable>P</span></td><td class="image"><img src="./src/svg/0050.svg?v=0.2691676234093511"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0050.svg?v=0.5816920895780946"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200">
<image width="200" height="200" xlink:href="data:image/gif;base64,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" />
</svg>
<!--
SVG with embedded animating GIF image
-->
</td><td class="info"><a href="./src/svg/0050.svg">0050</a> (P): SVG with embedded animating GIF image</td></tr>
<tr class="glyph-Q"><td class="glyph"><span contenteditable>!</span></td><td class="image"><img src="./src/svg/0051.svg?v=0.09228050016809108"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0051.svg?v=0.4592748643074477"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<foreignObject x="0" y="0" height="200" width="200">
<div xmlns="http://www.w3.org/1999/xhtml">
<iframe xmlns="http://www.w3.org/1999/xhtml" width="200" height="200" frameborder="0" src="data:text/html,%3C!DOCTYPE%20html%3E%0A%3Chtml%3E%0A%3Chead%3E%0A%20%20%3Ctitle%3E0051%20iframe%20content%3C%2Ftitle%3E%0A%20%20%3Cstyle%3Ebody%20%7B%20background%3A%20purple%3B%20color%3A%20white%3B%7D%3C%2Fstyle%3E%0A%3C%2Fhead%3E%0A%3Cbody%3E%0A%3Ch1%3E0051%20iframe%20content%3C%2Fh1%3E%0A%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A"></iframe>
</div>
</foreignObject>
</svg>
<!--
Iframe in foreignObject loading a small base64'ed page. CRASHES FIREFOX!
-->
</td><td class="info"><a href="./src/svg/0051.svg">0051</a> (Q): Iframe in foreignObject loading a small base64'ed page. CRASHES FIREFOX!</td></tr>
<tr class="glyph-R"><td class="glyph"><span contenteditable>R</span></td><td class="image"><img src="./src/svg/0052.svg?v=0.920817120513257"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0052.svg?v=0.8017506888731534"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<text x="0" y="180" style="font-size:200px;
font-family: 'Comic Sans MS', 'Comic Sans', 'Times New Roman';
color: lime;
fill: #0000ff;">
ABC
</text>
</svg>
<!--
The letters "ABC" in Comic Sans font through SVG's text element
-->
</td><td class="info"><a href="./src/svg/0052.svg">0052</a> (R): The letters "ABC" in Comic Sans font through SVG's text element</td></tr>
<tr class="glyph-S"><td class="glyph"><span contenteditable>S</span></td><td class="image"><img src="./src/svg/0053.svg?v=0.8320378785111611"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0053.svg?v=0.7618918802834703"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="1em" height="1em" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Recursive SVG</title>
<desc>An SVG with two recursive image reference to itself.
One reference uses the file name as a relative URL,
the other uses a target fragment only.
When viewed in a processing mode that supports external file references,
the embedded images should be rendered;
however, the embedded image must be processed in secure mode,
so the recursion only happens once.
The appearance should be three nested red circles in a bulls-eye pattern;
the innermost circle has solid fill because of target styles.
</desc>
<style type="text/css">
#target:target {
fill: red;
}
</style>
<circle id="target" stroke="red" stroke-width="5" fill="none"
cx="50%" cy="50%" r="45%" />
<image xlink:href="0053.svg"
x="25%" y="25%" width="50%" height="50%" />
<image xlink:href="#target"
x="45%" y="45%" width="10%" height="10%" />
</svg>
<!--
Recursive SVG as taken from https://twitter.com/AmeliasBrain/status/758128946227605504
--></td><td class="info"><a href="./src/svg/0053.svg">0053</a> (S): Recursive SVG as taken from https://twitter.com/AmeliasBrain/status/758128946227605504</td></tr>
<tr class="glyph-T"><td class="glyph"><span contenteditable>T</span></td><td class="image"><img src="./src/svg/0054.svg?v=0.7089656374395837"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0054.svg?v=0.20922003385912302"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
@media screen and (max-width: 600px) {
#firstshape {
fill: #666;
}
#secondshape {
fill: #999;
}
#thirdshape {
fill: #ccc;
}
}
@media screen and (max-width: 300px) {
#firstshape {
stroke: #fff;
stroke-width: 6px;
}
#secondshape {
stroke: #fff;
stroke-width: 6px;
}
#thirdshape {
stroke: #fff;
stroke-width: 6px;
}
}
</style>
<path id="firstshape" fill="#090" d="M0 0h200v200H0z"/>
<circle id="secondshape" fill="#F00" cx="100" cy="100" r="100"/>
<path id="thirdshape" fill="#FF0" d="M40 160h120L100 40z"/>
</svg>
<!--
Media queries: < 600px image will turn greyscale, < 300px it will get white strokes
-->
</td><td class="info"><a href="./src/svg/0054.svg">0054</a> (T): Media queries: < 600px image will turn greyscale, < 300px it will get white strokes</td></tr>
<tr class="glyph-U"><td class="glyph"><span contenteditable>U</span></td><td class="image"><img src="./src/svg/0055.svg?v=0.20496036924024474"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0055.svg?v=0.36164695471383623"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style type="text/css">
#firstthingy {
mix-blend-mode: overlay;
}
#secondthingy {
mix-blend-mode: screen;
}
#thirdthingy {
mix-blend-mode: darken;
}
</style>
<g style="isolation: isolate">
<path id="firstthingy" fill="#090" d="M0 0h200v200H0z"/>
<circle id="secondthingy" fill="#F00" cx="100" cy="100" r="100"/>
<path id="thirdthingy" fill="#FF0" d="M40 160h120L100 40z"/>
</g>
</svg>
<!--
CSS blend modes: using mix-blend-mode on each of the three elements in the SVG
-->
</td><td class="info"><a href="./src/svg/0055.svg">0055</a> (U): CSS blend modes: using mix-blend-mode on each of the three elements in the SVG</td></tr>
<tr class="glyph-V"><td class="glyph"><span contenteditable>V</span></td><td class="image"><img src="./src/svg/0056.svg?v=0.3600779864734981"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0056.svg?v=0.14194608609834425"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<!-- <svg viewBox="0 0 125 115"> -->
<style type="text/css">
#rainbowtext {
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
}
</style>
<defs>
<linearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
<stop stop-color="#FF5B99" offset="0%"/>
<stop stop-color="#FF5447" offset="20%"/>
<stop stop-color="#FF7B21" offset="40%"/>
<stop stop-color="#EAFC37" offset="60%"/>
<stop stop-color="#4FCB6B" offset="80%"/>
<stop stop-color="#51F7FE" offset="100%"/>
</linearGradient>
</defs>
<text fill="url(#rainbow)" id="rainbowtext">
<tspan
font-size="30"
x="0"
y="30">
gradient
</tspan>
<tspan font-size="65" x="0" dy="60">text</tspan>
<tspan font-size="20" x="0" dy="20">all up in here</tspan>
</text>
</svg>
<!--
Gradient text, taken from http://codepen.io/brenna/pen/mybQVx
--></td><td class="info"><a href="./src/svg/0056.svg">0056</a> (V): Gradient text, taken from http://codepen.io/brenna/pen/mybQVx</td></tr>
<tr class="glyph-W"><td class="glyph"><span contenteditable>W</span></td><td class="image"><img src="./src/svg/0057.svg?v=0.32827444484571344"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0057.svg?v=0.8380471205986384"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path d="M0 0h200v200H0z"/>
<circle cx="100" cy="100" r="100"/>
<path d="M40 160h120L100 40z"/>
</svg>
<!--
Inherit CSS text color (purple) when no fill color has been explicitly set
-->
</td><td class="info"><a href="./src/svg/0057.svg">0057</a> (W): Inherit CSS text color (purple) when no fill color has been explicitly set</td></tr>
<tr class="glyph-X"><td class="glyph"><span contenteditable>X</span></td><td class="image"><img src="./src/svg/0058.svg?v=0.5760680057765184"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0058.svg?v=0.42929002553550644"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style>
.fill-0058 {
fill: lime;
}
</style>
<path class="fill-0058" fill="context-fill" d="M0 0h200v200H0z"/>
<circle class="fill-0058" cx="100" cy="100" r="100"/>
<path class="fill-0058" fill="context-fill" d="M40 160h120L100 40z"/>
</svg>
<!--
Inherit CSS text color (purple) when context-fill is used as fill value on each path, except for the circle which should be lime
-->
</td><td class="info"><a href="./src/svg/0058.svg">0058</a> (X): Inherit CSS text color (purple) when context-fill is used as fill value on each path, except for the circle which should be lime</td></tr>
<tr class="glyph-Y"><td class="glyph"><span contenteditable>Y</span></td><td class="image"><img src="./src/svg/0059.svg?v=0.6575273606236702"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0059.svg?v=0.9404390155296762"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style>
.fill-0059 {
fill: lime;
}
</style>
<path class="fill-0059" style="fill:context-fill" d="M0 0h200v200H0z"/>
<circle class="fill-0059" cx="100" cy="100" r="100"/>
<path class="fill-0059" style="fill:context-fill" d="M40 160h120L100 40z"/>
</svg>
<!--
Inherit CSS text color (purple) when context-fill is used as fill value though inline styles on each path, except for the circle which should be lime
-->
</td><td class="info"><a href="./src/svg/0059.svg">0059</a> (Y): Inherit CSS text color (purple) when context-fill is used as fill value though inline styles on each path, except for the circle which should be lime</td></tr>
<tr class="glyph-`"><td class="glyph"><span contenteditable>`</span></td><td class="image"><img src="./src/svg/0060.svg?v=0.7717620756069735"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0060.svg?v=0.32824175032121417"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<style>
.st060 {
fill: url(#SVGID_1_)
}
</style>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="100" y1="200" x2="100">
<stop offset="0" stop-color="#F00" stop-opacity="0" />
<stop offset="1" stop-color="#090" />
</linearGradient>
<path class="st060" d="M0 0h200v200H0V0z" />
</svg>
<!--
Gradient on square from red (opacity 0) to green (opacity 1)
-->
</td><td class="info"><a href="./src/svg/0060.svg">0060</a> (`): Gradient on square from red (opacity 0) to green (opacity 1)</td></tr>
<tr class="glyph-a"><td class="glyph"><span contenteditable>a</span></td><td class="image"><img src="./src/svg/0061.svg?v=0.10225023729520721"></td><td class="iframe"><iframe sandbox="" src="./src/svg/0061.svg?v=0.004313344583648959"></iframe></td><td class="inline"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
<path fill="var(--color0)" d="M0 0h200v200H0z"/>
<circle fill="var(--color1)" cx="100" cy="100" r="100"/>
<path fill="var(--color2)" d="M40 160h120L100 40z"/>
</svg>
<!--
Use CPAL table
-->
</td><td class="info"><a href="./src/svg/0061.svg">0061</a> (a): Use CPAL table</td></tr>
</table>
</body>
</html>