Develop Reference

(SVG - stroke-dsaharray) my path divides into two pathes when i start animation

I'm trying to animate SVG on scroll, i've created the SVG path my self using math, and it's showing as what i need exactly, but the problem started when i tried to add effect on path using CSS stroke-dasharray
my problem is : the animation starts from two points, one from the start, and the other after the q command, as long as i used move command twice, one at the start and one after q curve command.
i tried to fix this all the way, but it changes the drawn SVG totally.
here is a snippet to explain more how it works with me,
const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
let value = 2000 - scrollY*4;
shape.style.strokeDashoffset= value;
}
body {
background:black;
-webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
stroke-dashoffset:2000;
stroke-dasharray: 2000;
}
#shapebg {
stroke-dashoffset:2000;
stroke-dasharray: 0;
}
#div2 {
height:19rem;
}
<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
<path id="shape" d="M 0 0 10 0 10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525 180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />
<path id="shapebg" d="M 0 0 10 0 10 0 10 50 10 50 40 50 40 50 40 120 40 120 235 120 235 120 235 50 235 50 q 450 -20 290 130 M 525 180 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="0.6" fill="none" />
</svg>
</div>
<div id="div2">
</div>
as you can see it starts from two points, but i need the animation to start from scratch and go to end directly,
any hints please ?

I`ve made a few changes to your code;
I've removed the move to command in the middle to get a continous path: M 525 180 595 220 becomes L595 220. Since you don't have any command letter after M, by default everything that comes next are lines L
The total length of your path is 2223 not 2000. I've changed it everywere. To know the length of the path you need to use the getTotalLength() method.
You don't scroll enough. In your code let value = 2000 - scrollY*4; but the #div1 { height:30rem;} Since in this case 1rem = 16px, 30rem = 16*30 = 480. Since you need to scroll 2223 you need to use let value = 2000 - scrollY*4.631; (2223/480 = 4.631)
Observation: I've rounded numbers, you can use unrounded numbers
const shape = document.querySelector('#shape');
window.addEventListener('scroll', slide);
function slide() {
let value = 2223 - scrollY*4.631;
shape.style.strokeDashoffset= value;
}
//console.log(shape.getTotalLength())
body {
background:black;
-webkit-user-select:none;
}
#svgdiv {
position:fixed;
margin:auto;
top:1rem;
width:95%;
}
#div1 {
height:30rem;
}
#shape {
stroke-dashoffset:2223;
stroke-dasharray: 2223;
}
#div2 {
height:19rem;
}
<div id="div1"></div>
<div id="svgdiv">
<svg viewBox="0 0 1080 500">
<path id="shape" d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="2.5" fill="none" />
<path id="shapebg" d="M0,0L10,0L10,0L10,50L10,50L40,50L40,50L40,120L40,120L235,120L235,120L235,50L235,50Q685,30,525,180L 595 220 595 220 605 300 605 300 675 250 675 250 725 320 725 320 765 255 765 255 835 260 835 260 810 200 810 200 890 70 890 70 1050 130 1050 130 1040 260 1040 260 880 270 880 270 1079 300" stroke="purple" stroke-width="1.5" fill="none" />
</svg>
</div>
<div id="div2">
</div>

change of SVG cannot reflected onto PNG

This page displays a SVG having three strokes. Clicking on Save as PNG button will convert the SVG to PNG. This works well.
http://www.holisticedu.us/wechat/three.htm
Clicking on the strokes of the SVG will change the stroke color from back to red. Then clicking on Save as PNG button , the stoke color of the PNG does not change. I have no idea about this. I want that the stroke color of the PNG can also be changed when the stroke color of the SGV was changed.
The following is my code, thank you for any suggestions.
<!DOCTYPE html><html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><head><meta charset="utf-8"/>
<title>three</title>
<script type="text/javascript">
function changeRectColor(evt) {
evt.target.setAttributeNS(null,"fill","red");
}
</script>
</head><body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="250" height="250" viewBox="0 0 2052 2052">
<def>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"/>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"/>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"/>
</g>
</def>
<g id="bg" transform="translate(514 718)">
<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"/>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"/>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"/>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"/>
</g></g>
<use id="u1" xlink:href="#g1" x="0" y="0"/>
</svg>
<button><font size = 4>Save as PNG</font></button>
<canvas id="he_canvas" width="250" height="250"></canvas>
<script type="text/javascript">
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
var canvas = document.querySelector('he_canvas');
function triggerDownload (imgURI) {
var evt = new MouseEvent('click', {
view: window,
bubbles: false,
cancelable: true
});
var a = document.createElement('a');
a.setAttribute('download', 'mypng.png');
a.setAttribute('href', imgURI);
a.setAttribute('target', '_blank');
a.dispatchEvent(evt);
}
btn.addEventListener('click', function () {
var canvas_browser = document.getElementById('he_canvas');
var ctx = canvas_browser.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
var imgURI = canvas_browser
.toDataURL('image/png')
.replace('image/png', 'image/octet-stream');
triggerDownload(imgURI);
};
img.src = url;
});
</script>
</body></html>

Important note :
This question is raised by a behavior which is only implemented in Firefox, so the first part of this answer will assume to be seen from Firefox.
This one is an interesting case...
So what you are doing is to handle click events on cloned nodes through an <use> element.
evt.target.setAttributeNS(null,"fill","red");
Here, evt.target will be the cloned node, not the original one, you can check it by cloning twice your elements :
<script>
function changeRectColor(evt) {
evt.target.setAttributeNS(null,"fill","red");
}
</script>
<svg width="500" height="250" viewBox="0 0 4104 2052">
<def>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"></path>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"></path>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"></path>
</g>
</def>
<g id="bg" transform="translate(514 718)">
<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"></rect>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"></rect>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"></line>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"></line>
</g></g>
<use id="u1" xlink:href="#g1" x="0" y="0"></use>
<use id="u2" xlink:href="#g1" x="1026" y="0"></use>
</svg>
As you can see, only the cloned one gets modified, but this cloned one is not accessible from the DOM (it is only in some shadow-DOM), hence, when you parse your SVG element to create a new image from it, you won't be able to parse the changes made to these cloned nodes.
Solution
Don't use a <use> element... Instead, display directly the original nodes.
Anyway, as said previously, only Firefox does handle click events on cloned nodes inside a <use> element.
var btn = document.querySelector('button');
var svg = document.querySelector('svg');
btn.addEventListener('click', function () {
var canvas_browser = document.createElement('canvas');
var ctx = canvas_browser.getContext('2d');
var data = (new XMLSerializer()).serializeToString(svg);
var DOMURL = window.URL || window.webkitURL || window;
var img = new Image();
var svgBlob = new Blob([data], {type: 'image/svg+xml;charset=utf-8'});
var url = DOMURL.createObjectURL(svgBlob);
img.onload = function () {
canvas_browser.width = img.width;
canvas_browser.height = img.height;
ctx.drawImage(img, 0, 0);
DOMURL.revokeObjectURL(url);
document.body.appendChild(canvas_browser)
};
img.src = url;
});
<button>download</button><br>
<script>
function changeRectColor(evt) {
evt.target.setAttributeNS(null,"fill","red");
}
</script>
<svg width="250" height="250" viewBox="0 0 2052 2052">
<g id="bg" transform="translate(514 718)">
<rect id="sq" style="fill:none;stroke:lightgray;stroke-width:4" x="-512" y="-716" width="0" height="0"></rect>
<g id="box"><rect style="fill:none;stroke:black;stroke-width:4" x="0" y="-204" width="1024" height="1024"></rect>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="0" y1="308" x2="1024" y2="308"></line>
<line style="stroke:black;stroke-width:2;stroke-dasharray:60 60;" x1="512" y1="-204" x2="512" y2="820"></line>
</g></g>
<g id="g1" onclick="changeRectColor(evt)" name="三" transform="translate(514 718) matrix(1 0 0 -1 0 616)">
<path name="1.1" onclick="changeRectColor(evt)" d="M677 619Q699 619 733 602Q756 592 756 577Q756 566 726 559Q691 548 572 530Q390 505 335 505Q284 505 264 517Q244 531 244 541Q244 550 288 552Q390 561 513 583Q599 597 652 613Q671 619 677 619Z"></path>
<path name="1.2" onclick="changeRectColor(evt)" d="M645 343Q667 343 701 326Q724 316 724 301Q724 293 700 288Q672 280 575 267Q428 249 383 249Q332 249 312 261Q292 275 292 285Q292 292 328 293Q411 300 512 316Q582 327 625 338Q640 343 645 343Z"></path>
<path name="1.3" onclick="changeRectColor(evt)" d="M852 104Q860 104 914 84Q960 59 960 39Q960 21 897 21Q816 23 722 23Q623 23 465 12Q351 7 222 -19Q185 -27 177 -27Q156 -27 115 -9Q72 10 72 21Q72 36 100 38Q244 39 311 51Q438 65 591 73Q735 85 811 99Q844 104 852 104Z"></path>
</g>
</svg>

Polygon points out of letters

For given font, and given string, how to get polygon points like these in the picture below, in JavaScript?
(I am aware of related questions on SO, but they are for Python or other languages/environments; I would like JavaScript only solution, if possible)
EDIT: Following up #Roman's the answer:
Using typeface.js online tool, I converted a TrueType font to typeface.js format. Each letter is represented similar to this: (here is representation of letter d)
"d": {
"x_min": 135.640625,
"x_max": 792.171875,
"ha": 928,
"o": "m 135 998 l 330 998 q 792 499 763 933 q 330 0 763 65 l 135 0 l 135 998 m 330 151 q 648 499 635 211 q 330 846 635 786 l 287 846 l 287 151 l 330 151 "
},
The key part of typeface.js code for rendering a letter based on this format is:
switch(action) {
case 'm':
ctx.moveTo(outline[i++], outline[i++]);
break;
case 'l':
ctx.lineTo(outline[i++], outline[i++]);
break;
case 'q':
var cpx = outline[i++];
var cpy = outline[i++];
ctx.quadraticCurveTo(outline[i++], outline[i++], cpx, cpy);
break;
case 'b':
var x = outline[i++];
var y = outline[i++];
ctx.bezierCurveTo(outline[i++], outline[i++], outline[i++], outline[i++], x, y);
break;
}

Some work has already been done for typeface.js, a javascript library that replaces regular text with "canvas rendered one" (so you can use arbitrary font-faces).
typeface.js accomplishes this by using font definition data, which essentially holds the drawing instructions for each glyph. The data for the glyph "A" might look like this:
m 253 638 l 379 949 q 394 945 387 946 q 409 944 401 944 q 443 949 428 944
q 565 629 525 733 q 673 359 605 526 q 822 0 740 192 q 773 3 804 0 q 736 7
743 7 q 686 4 709 7 q 650 0 664 1 q 588 199 609 137 q 532 355 567 261 l
370 355 l 210 355 l 159 205 q 127 110 142 161 q 99 0 112 59 l 43 6 q 6 3
20 6 q -14 0 -8 0 q 74 211 29 105 q 155 403 119 317 q 253 638 191 490 m
370 422 l 502 422 l 371 760 l 240 422 l 370 422
(I inserted newlines).
This string is a sequence of drawing operations with their respective numerical parameters. For example "m 253 638" corresponds to "move to x:253 y:638" and "l 379 949" being "draw line to x:379 y:949". etc, etc..
You should have a look at the source here:
http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js
You could adapt that renderer to extract your poligons. The major trick here is to let this page do the hard work for you and create the font definitions.

Automatically scale an SVG to its parent

I'm trying to get an SVG to automatically scale down and fit vertically into its parent container.
The SVG is of a signature, and I want it to shrink vertically to fix into the div in question. Once this happens the width of the div will always be more than large enough to accommodate the rest of the svg.
The fiddle I have is here, and the markup is below.
http://jsfiddle.net/3v4e4/2/
Just messing with it, it looks like setting the viewBox equal to "0,0,1100,100" is about right, but I can't for the life of me generalize a rule for calculating that.
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 1 80 c 0.11 -0.19 3.59 -7.64 6 -11 c 5.2 -7.24 11.51 -13.76 17 -21 c 1.92 -2.53 3 -5.62 5 -8 c 6.6 -7.87 14.55 -15.43 21 -23 c 0.93 -1.09 1.95 -4.23 2 -4 c 0.14 0.71 -0.63 9.58 0 14 c 0.66 4.6 2.28 9.6 4 14 c 1.22 3.11 3 6.5 5 9 c 1.79 2.23 4.59 4.25 7 6 c 1.17 0.85 2.68 1.83 4 2 c 3.55 0.44 8.37 0.86 12 0 c 7.09 -1.67 14.75 -6.24 22 -8 c 4.65 -1.13 15 -1 15 -1"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 21 52 c 0.12 -0.07 4.58 -3 7 -4 c 3.13 -1.29 6.72 -2.51 10 -3 c 3.14 -0.47 10 0 10 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 108 64 c -0.02 -0.75 -0.75 -28.06 -1 -43 c -0.09 -5.56 -0.26 -10.84 0 -16 c 0.07 -1.33 0.21 -3.74 1 -4 c 2.11 -0.7 7.51 -0.39 11 0 c 2.31 0.26 4.63 1.58 7 2 c 3.27 0.58 6.88 0.08 10 1 c 11.18 3.3 23.97 7.93 34 12 c 1.18 0.48 2.27 1.86 3 3 c 2.16 3.35 4.65 7.3 6 11 c 1.2 3.3 1.61 7.33 2 11 c 0.28 2.63 0.68 5.63 0 8 c -1.82 6.37 -4.98 13.73 -8 20 c -1.21 2.51 -2.98 5.17 -5 7 c -5.02 4.56 -11.2 9.21 -17 13 c -2.67 1.75 -5.93 3.14 -9 4 c -5.08 1.42 -10.52 2.26 -16 3 c -7.11 0.96 -13.85 1.58 -21 2 l -13 0"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 185 85 c 0.1 -0.26 4.17 -9.78 6 -15 c 2.97 -8.48 4.86 -16.77 8 -25 c 2.24 -5.89 5.71 -11.27 8 -17 c 1.01 -2.51 1.01 -6.02 2 -8 c 0.43 -0.86 2.4 -2.3 3 -2 c 1.31 0.65 3.69 3.81 5 6 c 3.61 6.01 7.11 12.56 10 19 c 1.4 3.13 2.26 6.59 3 10 c 0.93 4.3 0.84 8.79 2 13 c 3.16 11.44 11 34 11 34"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 247 78 c 0.04 -0.05 2 -2.16 2 -3 c 0 -1.04 -1.01 -3.46 -2 -4 c -2.03 -1.11 -6.17 -0.95 -9 -2 c -6.05 -2.24 -11.84 -5.89 -18 -8 c -6.45 -2.21 -13.17 -3.73 -20 -5 c -7.69 -1.43 -23 -3 -23 -3"/><path fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="M 280 87 c 0.04 -0.32 1.03 -11.97 2 -18 c 0.72 -4.44 2.28 -8.54 3 -13 c 1.31 -8.08 1.67 -16.57 3 -24 c 0.25 -1.37 1.71 -2.7 2 -4 c 0.32 -1.46 -0.11 -5.14 0 -5 c 0.2 0.27 2.38 6.09 3 9 c 0.33 1.54 -0.35 3.42 0 5 c 3.87 17.56 11.56 49.11 13 54 c 0.09 0.32 1.93 -1.97 2 -3 c 0.8 -11.75 -0.18 -27.39 1 -41 c 0.82 -9.44 3.67 -24.16 5 -28 c 0.21 -0.6 3.43 0.92 4 2 c 4.46 8.42 9.16 21.76 14 32 c 0.69 1.47 2.39 2.63 3 4 c 0.62 1.4 0.27 3.58 1 5 c 4.32 8.37 10.8 17.06 15 26 c 3.4 7.25 8 23 8 23"/></svg>
</div>

For scaling of an svg to work, you absolutely have to supply a viewBox which matches the bounding box of the contained elements. In your case that would be something like viewBox="0 0 360 100".
The bounding box can be calculated via javascript, but as I have read the getBBox() method is buggy in some cases. I can't comment further on that, but in this case and on chrome it works, see: http://jsfiddle.net/3v4e4/7/
Note that both getBBox() and setAttribute() are native methods and for setting the viewBox you absolutely have to use these. Using the jquery ´.attr()` method will not work as the SVG DOM is different from the HTML DOM which jquery is designed for: http://keith-wood.name/svg.html#dom

If you're using a modern browser, you might be able to just use your SVG as the src for an IMG and set the height to 100%.
Example: http://jsfiddle.net/kj7Wh/
<div style="border: 1px solid black; width: 370px; height: 30px; margin: 30px;">
<img src="http://openclipart.org/people/StefanvonHalenbach/StefanvonHalenbach_Battle_axe_medieval.svg" height="100%" />
</div>

might not work everywhere, but the zoom command on the svg element
svg{zoom:32%;}
or, you can save the this as an svg file and edit this inside illustrator

What code is being used here for use with fonts and glyphs?

I was looking through some of the files used in Vexflow and I'm trying to add new glyphs for the score however, I don't know what code is being used here in the vex.flow.font.js file:
Vex.Flow.Font = {"glyphs":{"vb":{"x_min":0,"x_max":428.75,"ha":438,"o":"m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}
To my understanding, the code above is referenced by another file (glyph.js) to render an svg. Any help would be greatly appreciated, thank you :)

Vex.Flow.Font = {"glyphs": {
"vb": {
"x_min": 0,
"x_max": 428.75,
"ha": 438,
"o": "m 262 186 b 273 186 266 186 272 186 b 274 186 273 186 274 186 b 285 186 274 186 280 186 b 428 48 375 181 428 122 b 386 -68 428 12 416 -29 b 155 -187 329 -145 236 -187 b 12 -111 92 -187 38 -162 b 0 -51 4 -91 0 -72 b 262 186 0 58 122 179 "}}}
glyphs is a list of glyphs, mapping them from their code to their info. So vb is a glyph code, and the map with four values is its description. x_min and x_max describe horizontal metrics. x_min set to zero means start drawing the glyph at the current cursor point, and the value of x_max specifies cursor's movement to the right. I have no idea what is ha and what does it do. o is the outline of the glyphs to be rendered. It is described in a format similar to SVG paths. For the start, m 262 186 means move to pixel (262, 186), b 273... means draw a bezier curve with these points, etc.