poor content

not useful

useful

very useful

excellent

Rate

font svg matrix transform

January 27, 2022

Alireza Ataei

By: Alireza Ataei

Matrix functionality in font SVG

Reading time: 7 min

    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:

 

font svg matrix formula

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

Was this page helpful?

What was the most helpful point of this page for you?

Thanks for your cooperation!

poor content

not useful

useful

very useful

excellent

Comments3

3 responses to “Matrix functionality in font SVG”

Leave a Reply

Your email address will not be published.