poor content

not useful

useful

very useful

excellent

Rate

January 27, 2022

By: Alireza Ataei

# Matrix functionality in font SVG

Content List

If you're trying to convert an SVG to font SVG and eventually to a font, you will realize the upside down result in your font after lots of handlers and parsing, here is what you need to know about this

The basic concept is to make the coordinates in the path upside down, well, that’s easy, you can capture the max height of the path, and by doing the simple math of ” maxHeight-Y ” for each coordinates in the path, it shall mirror the effect that’s causing this situation.

bUt

This is not going to work for every situation, since the generated path might not even be upside down for any reason at all, so this is where the MATRIX one of the processes in SVG Transformations comes in:

This is the basically math we need to perform for every x/y in the path

As you see in the formula, we got many variables in there (a, b, c, d, e, f), that we initiate different values based on the result we are expecting, but in here, we have a simple set of them in order to reverse and fix the coordinates only:

• a: 1
• b: 0
• c: 0
• d: -1
• e: 0
• f: Maximum height of the path

Here is an example of code you can use

Rexfont svgJson module, matrix parser

glyphMatrix(contours, 1, 0, 0, -1, 0, height)

// the contours is something like this:

//[, {name: ‘L’, x: 23, y: 188},]

function glyphMatrix(contours, a, b, c, d, e, f) {
let prevX=0, prevY=0;
return contours.map(contour => {
return Object.entries(contour).map(coordinate => {
const [key, value] = coordinate;
let x = 0, y = 0;
if (key.indexOf(‘x’) >= 0) {
x = value;
y = xjs.or([contour[key.replace(/x/g, ‘y’)], prevY])
} else if (key.indexOf(‘y’) >= 0) {
x = xjs.or([contour[key.replace(/y/g, ‘x’)], prevX]);
y = value;
} else return coordinate;
prevX = xjs.or([x, prevX]);
prevY = xjs.or([y, prevY]);
if (key.indexOf(‘x’) >= 0) return [key, a*x + c*y + e]; // X
else if (key.indexOf(‘y’) >= 0) return [key, b*x + d*y + f]; // Y
})
})
}
Absolute Or Relative: This function expects you to give it the Absolute commands only
H And V Commands: About commands such as H or V that do not have both x and y together, you have to keep track of the previous x and y so that you can use them when the up coming command doesn’t have such

poor content

not useful

useful

very useful

excellent

## Popular posts like this

### 5 responses to “Matrix functionality in font SVG”

1. romantik69.co.il says:

Excellent post. I definitely appreciate this website. Thanks!

2. 就爱要 says:

Where there is a will, there is a way.

• Alireza Ataei says:

That’s how it’s done

3. modified says:

Itís nearly impossible to find educated people in this particular subject, but you seem like you know what youíre talking about! Thanks

4. modified says:

Greetings! Very helpful advice within this post! Its the little changes that produce the greatest changes. Thanks for sharing!