yurks/svg-font-viewer.html

## svg-font-viewer.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>SVG font viewer</title>
  <style>
    body {
      background-color: #eaeaea;
      color: #333;
    }
    a {
      color: inherit;
    }
    ul, li {
      margin:0;
      padding:0;
      list-style: none;
    }
    li {
      padding: 0 5px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-direction: column;
      width: 120px;
      height: 80px;
    }
    ul {
      display: flex;
      flex-wrap: wrap;
    }
    .char-code,
    .char-name
    {
      width: 100%;
      line-height: 1.6em;
      overflow: hidden;
      white-space: nowrap;
      background: #f8f8f8;
      direction: ltr;
      text-align: center;
      border: none;
      margin-top: 10px;
    }
    .char-name {
      background: khaki;
    }
    svg {
      height:2em;
    }
  </style>
</head>

<body>

Drag svg font here.

<script>


  function render(file) {
    var target = document.body;
    target.innerHTML = ''
    if (typeof FileReader !== "undefined" && (/svg/i).test(file.type)) {
      var reader = new FileReader();
      reader.type = file.type;
      reader.onload = (function () {
        return function (evt) {
          var txt = evt.target.result;
          if (window.DOMParser) {
            var parser = new DOMParser();
            var xmlDoc = parser.parseFromString(txt, "text/xml");
          } else // Internet Explorer
          {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.async = false;
            xmlDoc.loadXML(txt);
          }
          var glyphs = xmlDoc.getElementsByTagName('glyph');
          var src = '';
          var fontFamily = xmlDoc.getElementsByTagName('font-face')[0].getAttribute('font-family') || xmlDoc.getElementsByTagName('font')[0].id;

          var g = document.createElement("h1");
          g.innerText = fontFamily;
          target.appendChild(g);
          document.title = fontFamily;

          var ff = xmlDoc.getElementsByTagName('font-face')[0];
          var em = ff.getAttribute('units-per-em');
          var g = document.createElement("pre");
          g.innerText = "1em = " + em + "\nfont-weight:" + ff.getAttribute('font-weight') + "\ntotal glyphs = " + glyphs.length + "\n";
          target.appendChild(g);

          src = '';

          glyphs = Array.prototype.slice.call(glyphs).sort(function(a, b) {
            var aa = a.getAttribute('glyph-name');
            var bb = b.getAttribute('glyph-name');
            return aa.localeCompare(bb)
          });

          for (var n = 0; n < glyphs.length; n++) {
            var glyph = glyphs[n];
            if (glyph) {
              var char = glyph.getAttribute('unicode');
              var unicode = char //? (char.charCodeAt(0).toString(16)) : null;
              var charname = glyph.getAttribute('glyph-name');
              var charsvg = glyph.getAttribute('d');
              var ex = glyph.getAttribute('horiz-adv-x') || em;
              src += '<li class="glyph">' + renderSVG(charsvg, ex, em);
              src += '<code class="'+ (unicode ? 'char-code' : 'char-name') + '">' + (charname || unicode) + '</code>';
              src += '</li>';
            }
          }
          var g = document.createElement("ul");
          g.innerHTML = src;
          target.appendChild(g);
        };
      }());
      reader.readAsText(file);
    }
  }

  function renderSVG(charsvg, ex, em) {
    if (charsvg) {
      return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+ (ex || em || 0) + ' ' + (em || 0) + '"><path d="' + charsvg + '" transform="translate(0,' + em + ') scale(1, -1)" /></svg>';
    }
    return '';
  }

  var doc = document.documentElement;

  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;

    for (var x = 0; x < files.length; x++) {
      var file = files[x];
      console.log('Font loading:', file.size, file.name, file.type);
      render(file)

    }
    return false;
  };

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SVG font viewer</title>
	<style>
	body {
	background-color: #eaeaea;
	color: #333;
	}
	a {
	color: inherit;
	}
	ul, li {
	margin:0;
	padding:0;
	list-style: none;
	}
	li {
	padding: 0 5px;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex-direction: column;
	width: 120px;
	height: 80px;
	}
	ul {
	display: flex;
	flex-wrap: wrap;
	}
	.char-code,
	.char-name
	{
	width: 100%;
	line-height: 1.6em;
	overflow: hidden;
	white-space: nowrap;
	background: #f8f8f8;
	direction: ltr;
	text-align: center;
	border: none;
	margin-top: 10px;
	}
	.char-name {
	background: khaki;
	}
	svg {
	height:2em;
	}
	</style>
	</head>

	<body>

	Drag svg font here.

	<script>


	function render(file) {
	var target = document.body;
	target.innerHTML = ''
	if (typeof FileReader !== "undefined" && (/svg/i).test(file.type)) {
	var reader = new FileReader();
	reader.type = file.type;
	reader.onload = (function () {
	return function (evt) {
	var txt = evt.target.result;
	if (window.DOMParser) {
	var parser = new DOMParser();
	var xmlDoc = parser.parseFromString(txt, "text/xml");
	} else // Internet Explorer
	{
	xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
	xmlDoc.async = false;
	xmlDoc.loadXML(txt);
	}
	var glyphs = xmlDoc.getElementsByTagName('glyph');
	var src = '';
	var fontFamily = xmlDoc.getElementsByTagName('font-face')[0].getAttribute('font-family') \|\| xmlDoc.getElementsByTagName('font')[0].id;

	var g = document.createElement("h1");
	g.innerText = fontFamily;
	target.appendChild(g);
	document.title = fontFamily;

	var ff = xmlDoc.getElementsByTagName('font-face')[0];
	var em = ff.getAttribute('units-per-em');
	var g = document.createElement("pre");
	g.innerText = "1em = " + em + "\nfont-weight:" + ff.getAttribute('font-weight') + "\ntotal glyphs = " + glyphs.length + "\n";
	target.appendChild(g);

	src = '';

	glyphs = Array.prototype.slice.call(glyphs).sort(function(a, b) {
	var aa = a.getAttribute('glyph-name');
	var bb = b.getAttribute('glyph-name');
	return aa.localeCompare(bb)
	});

	for (var n = 0; n < glyphs.length; n++) {
	var glyph = glyphs[n];
	if (glyph) {
	var char = glyph.getAttribute('unicode');
	var unicode = char //? (char.charCodeAt(0).toString(16)) : null;
	var charname = glyph.getAttribute('glyph-name');
	var charsvg = glyph.getAttribute('d');
	var ex = glyph.getAttribute('horiz-adv-x') \|\| em;
	src += '<li class="glyph">' + renderSVG(charsvg, ex, em);
	src += '<code class="'+ (unicode ? 'char-code' : 'char-name') + '">' + (charname \|\| unicode) + '</code>';
	src += '</li>';
	}
	}
	var g = document.createElement("ul");
	g.innerHTML = src;
	target.appendChild(g);
	};
	}());
	reader.readAsText(file);
	}
	}

	function renderSVG(charsvg, ex, em) {
	if (charsvg) {
	return '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+ (ex \|\| em \|\| 0) + ' ' + (em \|\| 0) + '"><path d="' + charsvg + '" transform="translate(0,' + em + ') scale(1, -1)" /></svg>';
	}
	return '';
	}

	var doc = document.documentElement;

	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;

	for (var x = 0; x < files.length; x++) {
	var file = files[x];
	console.log('Font loading:', file.size, file.name, file.type);
	render(file)

	}
	return false;
	};

	</script>
	</body>
	</html>