今日は仕事でSVGをラスタライズしていました。

めんどくさかったのが、Webフォントが使われていることです。というか、SVGを動的に生成して、Webフォントも使って、ユーザフォントも使って、という状況です。SVGのめんどくさい機能もたくさん使っているのでCanVGやCairoSVGなどを使って書き出そうにも動きが怪しい。

また、クライアント側でSVGをラスタライズする場合、定番なのはCanvasに書き出すやり方でしょう。このやり方では、Webフォントが反映されません。Imageオブジェクト（あるいはimgタグ）に読み込んだ時点でWebフォントの情報が抜け落ちます。

逆に、サーバー側でSVGをラスタライズする場合、サーバー側にフォントをインストールする必要があり、代表的なローカルフォントはともかく、ユーザフォントまで網羅するのは難しいです。

このあたりにもあるように、フォントも加味した文字情報をSVGデータとして埋め込んでしまう方法はめんどくさいのでできませんでした。動的にやるならサーバー側に文字情報をまとめて送って、SVGのpathでもらうんですかね。クライアント側で処理できるライブラリとかあるんでしょうか。

それはさておき、本題です。

今回はElectronを使っていたので、RendererからBlobURLで送り出して、Mainでキャプチャして、IPCでさらにRendererまで送り返して埋め込みます。

以下のように、ただImageで読み込むだけでは反映されなかったWebフォントも反映されたPNGを作ります。下の図の一番目は元のSVG、二番目はImageに読み込んだSVG、三番目がラスタライズしたPNGです。

全体のソースコードは以下。

しかし、眠いのでここまでにします。ソースコード読んでください。