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
AImage 0041 (A): Original SVG
BImage 0042 (B): Rotated 30 degrees with inline style on group
CImage 0043 (C): Opacity: 0.5 with inline style on group
DImage 0044 (D): Animating opacity from 0.1 to 1
EImage 0045 (E): Use JavaScript to turn all elements in the SVG blue
FImage 0046 (F): Turn each element black on hover, using CSS transition of 1 second
GImage 0047 (G): Rotating with SMIL's animateTransform
HImage
Strong!
Emphasis!

Big header!

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