AA を表示の崩れない SVG に変換する

ハゲ打 のアイコンを更新するために、AA を表示の崩れない SVG に変換する必要がありました。 今時そんなことをやっているのは私くらいかも知れませんが、たくさんの文字を SVG 化するニーズ自体は割とあります。 そんな訳でメモを残しておきます。

1. AA をフォント埋め込み SVG にする

まずは Ascii Figure To Svg を使って、 AA を SVG 化します。これで話が終われば良いのですが、実際にはここからが問題だったりします。 出力される SVG はフォントを外部からロードする形式で記載されています。 MS Gothic は Linux にないので、このままでは表示が崩れてしまいます。 そこでフォントを SVG のパスに置き換える作業が必要になります。

2. フォント埋め込み SVG をパスだけの SVG にする

1 で作成した SVG を Inkscape で開き、一つ一つの文字をパスに変換していきます。 文字を選択した後に、メニュー→パス→オブジェクトをパスへ、をクリックすれば文字をパスに変換できます。 この機能は超便利だけど、毎回存在を忘れてしまうのが玉にキズです。 なんか CLI ないのかな。

3. 見た目の細かな微調整をする

フォント埋め込みの SVG をそのまま転用しようとすると、文字の太さなどが足りなかったりして、微妙に調整をしたいことがよくあります。 文字そのままだと編集できませんが、パスに変換できればこちらのものです。 パスのストロークを変えれば、太さや丸さを調整できます。 ただのパスなのでスケールも簡単に変えられ、割と調整が効きます。

新しくなったアイコンがこちら。前よりスリムになってしまったけど、良い感じ。 ストロークを太くした後に丸くして、縦方向に 1.2倍伸ばしています。