SVG Font Viewer

Show all defined glyph in font, its name and unicode

by Mayank Dixit

HTML

Drop all font files here to view all its characters

CSS

body {
    background-color: #5588FF;
    color: rgba(255, 255, 255, .8);
}
a {
    color: inherit;
}
dl, dt, dd {
    margin:0;
}
dl {
    float: left;
    outline: rgba(255, 255, 255, .8) dotted 1px;
    width: 6em;
    height: 5em;
    margin-top: .5em;
    margin-right: .5em;
    padding: .5em;
}
dd {
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
}
.char {
    display: block;
    margin: 0 auto;
    width:2em;
    height:2em;
    padding:.5em;
}
.char svg {
    height:2em;
}
.char-code {
    display: none;
}
.show-code .char-code {
    display: block;
}
.char-name {
    display: block;
}
.show-code .char-name {
    display: none;
}
.char:link {
    text-decoration: none;
}

JavaScript

var doc = document.documentElement;
var toload = 0;
var loaded = 0;
var target = document.body;

var createSVG = function (charsvg, ex, em) {
    var svgEl = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    var pathEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

    pathEl.setAttribute('d', charsvg);
    pathEl.setAttribute('transform', 'translate(0,' + em + ') scale(1, -1)')
    pathEl.style.fill = 'currentColor';

    svgEl.setAttribute('viewBox', '0 0 ' + (ex*1+256) + ' ' + (em*1+256)); //FIXME
    svgEl.appendChild(pathEl);

    return svgEl;
}

doc.ondragover = function () {
    //this.className = 'hover';
    return false;
};
doc.ondragend = function () {
    //this.className = '';
    return false;
};
doc.ondrop = function (event) {
    event.preventDefault && event.preventDefault();
    this.className = '';

    // now do something with:
    var files = event.dataTransfer.files;

    toload = files.length;
    loaded = 0;
    target.innerHTML = '';

    p = document.createElement('p');

    a = document.createElement('a');
    a.href = "javascript:document.body.setAttribute('class',document.body.getAttribute('class')==='show-code'?'':'show-code');";
    a.innerText = "[code]";
    p.appendChild(a);

    target.appendChild(p);


    for (var x = 0; x < files.length; x++) {
        var file = files[x];
        console.log('Font loading:', file.size, file.name, file.type);
        /*
	If the file is a font and the web browser supports FileReader,
	append css @font-face rule to the page; Change page`s font
*/


        if (typeof FileReader !== "undefined" && (/svg/i).test(file.type)) {
            reader = new FileReader();
            reader.type = file.type;
            reader.onload = (function () {
                return function (evt) {
                    var txt = evt.target.result;
                    if (window.DOMParser) {
                        parser = new DOMParser();
                        xmlDoc =...