LapisLegit, a font to test the OpenType SVG table

By Roel Nieskens. More info on Github!

If you see black squares or nothing in the first column, your browser doesn't support OpenType SVG yet.

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!

Glyph Image Iframe Inline Description
A 0041 (A): Original SVG
B 0042 (B): Rotated 30 degrees with inline style on group
C 0043 (C): Opacity: 0.5 with inline style on group
D 0044 (D): Animating opacity from 0.1 to 1
E 0045 (E): Use JavaScript to turn all elements in the SVG blue
F 0046 (F): Turn each element black on hover, using CSS transition of 1 second
G 0047 (G): Rotating with SMIL's animateTransform
H
Strong!
Emphasis!

Big header!

 		0048 (H): Foreignobject with HTML and some inline styles to change background color
I 0049 (I): SVG with embedded PNG image
P 0050 (P): SVG with embedded animating GIF image
!
0051 (Q): Iframe in foreignObject loading a small base64'ed page. CRASHES FIREFOX!
R ABC 0052 (R): The letters "ABC" in Comic Sans font through SVG's text element
S Recursive SVG 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. 0053 (S): Recursive SVG as taken from https://twitter.com/AmeliasBrain/status/758128946227605504
T 0054 (T): Media queries: < 600px image will turn greyscale, < 300px it will get white strokes
U 0055 (U): CSS blend modes: using mix-blend-mode on each of the three elements in the SVG
V gradient text all up in here 0056 (V): Gradient text, taken from http://codepen.io/brenna/pen/mybQVx
W 0057 (W): Inherit CSS text color (purple) when no fill color has been explicitly set
X 0058 (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
Y 0059 (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
` 0060 (`): Gradient on square from red (opacity 0) to green (opacity 1)
a 0061 (a): Use CPAL table