SVGを画像として書き出した際のfont-familyが反映されない

Question

SVGで外部フォント（google fonts）をtext要素に使用した際、
表示は問題なくされるのですが、そのSVGを画像としてダウンロードしてもfont-familyの設定がデフォルトになってしまいます。

設定したfont-familyそのままの表示で画像にするのは不可能なのでしょうか？
方法があればご教授いただければとおもいます。

https://jsfiddle.net/nao5151/dtLxoebx/
参考になるかと思いjsfiddleで既存フォントと外部フォントをつかったダウンロード機能をJavaScriptで書いてみました。

JavaScriptではなく、他の方法でなら可能だよという方法もあれば、ぜひ教えていただければ幸いです。

よろしくお願いします。

Answer 1

svgのdefs要素内にcssでfont指定を入れる（※dataスキームでフォントファイルを指定）…というかたちになりますが、
ダウンロードさせることを前提と考えるならこの方法自体無意味なので
「どのような環境でも均一な表示」を求めるのであれば
text要素ではなく、テキストの箇所をすべてpathにしてしまう必要があるのではないかと思います。

そもそもtext要素でのテキスト表示自体、閲覧環境での差が激しく
現状の仕様ではあまり好ましくないかなというのが個人的見解です。

Comments

[nao5151]

返答ありがとうございます！
すべてpathにするというやり方は多くの処理が必要になりそうなので、今回は調査を保留にしようと思います。
pathにするやり方は全く考えつかなったので勉強になりました。ありがとうございます！

Answer 2

単純に、「ローカルのマシンに指定したフォントが入っていない」だけだと思います。

ブラウザ上でできるかどうかは知りませんが、SVGにフォントを埋め込むことも、技術的には可能です。

Comments

[nao5151]

返答ありがとうございます！
ローカルにフォントをダウンロードしてみたら、想定通りの動きになりました！
しかし、このままだと自分だけしか使えなく不便なので、maisumakunさんが仰るSVGにフォントを埋め込む方法を調べてみようと思います！

[nao5151]

フォントをbase64に変換して
@font-face {
font-family: "font";
src: url("data:application/font-woff;charset=utf-8;base64,...");
}
をSVG内に組み込むことでローカルにフォントをダウンロードせずとも想定の動きにできました！
方法はあるということでスッキリできたので、ありがとうございました！