SVG から UFO のグリフを作る際の座標変換についての図を作る機会があったのでついでに書きます。

SVG からグリフにする

これについては、いくつか方法があります。

Illustrator と Glyphs などがあれば、コピペでもできます。

Python で作る場合には fonttools の svg2glif や SVGPath を使うとできます。

Illustrator と Glyphs を使用すれば特に問題はないですが、Python を使った方法だと、上下が反転しまします。これは SVG が下向きプラスでグリフが上向きプラスだからです。これを修正してあげる必要があります。

座標変換

グリフの変形にはよく 2 次元のアフィン変換が用いられます。式は以下の通りです。

• Python の変形用タプル

(a, b, c, d, e, f)

• 数式

\begin{pmatrix}
 a & b \\ c & d
 \end{pmatrix}
 \begin{pmatrix}
 x \\ y
 \end{pmatrix}
+
\begin{pmatrix}
 e \\ f
 \end{pmatrix}

このようになります。つまり a, b, c, d の部分で拡大縮小回転を指定して e, f で移動を指定します。

では、上下逆になる問題はどのように解決すれば良いかと言うと、行列計算がわかる人は問題ないと思いますが、以下のようにすることで上下が逆転します。

\begin{pmatrix}
 1 & 0 \\ 0 & -1
 \end{pmatrix}
 \begin{pmatrix}
 x \\ y
 \end{pmatrix}
+
\begin{pmatrix}
 0 \\ 0
 \end{pmatrix}

実際にやってみればわかりますが、これだけではうまくいきません。このままだと下にずれて配置がされてしまいます。

これはグリフの原点がグリフの高さの底辺にないからです。と言ってもわかりにくいので図にしました。右側の水色の線が Y 軸が 0（ベースライン）です。

ここで出てくる謎の 880 という数字はフォントのアセンダーを表しています。つまり、上下反転しアセンダー分のオフセットをします。

おわりに

数式書くのに久しぶりに TeX の式書きました。フォントでも数学を使わなきゃいけないんですね。大変です。