Home > SVG > Web Tutorials > Current post

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

Popular posts like this

How to create a simple API server on GO lang
How to create a simple API server on GO lang
How to deploy static Nextjs app Cpanel
How to deploy static Nextjs app Cpanel
How to unblock/unban IP from WHM
How to unblock/unban IP from WHM

Comments5

5 responses to “Matrix functionality in font SVG”

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

    Reply

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

    Reply

Leave a Reply

Your email address will not be published.