SVGで自作フォント使ってHTMLで読み込む

世間一般的に需要はものすごく少ないと思うのだけれども、HTMLに埋め込んであるSVG画像内で独自フォントを使ってにゃんにゃんしたい場面が出てきた。HTMLで独自フォント使うだけならハードルはまだ低いと思うのだが、SVGを一枚噛ませるというのが曲者だ。

そもそも独自フォントってあれっしょ？作るの大変っしょ？と思ってたのだが、どーやらInkscapeでSVGフォント作ってから、そいつをクラウドの変換くんにぶちこめばTrueTypeFont(ttf)がサクッと作れるらしい。詳しい作り方については「inkscape svg font」とかでググったらそこそこ情報出てくるので、ここでは割愛しとくわね。

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <style type="text/css">
            @font-face { 
                font-family: 'gere2font';
                src: url("./gere2font.ttf") format('truetype'); 
            } 
            .text{
                font-family: "gere2font" !important
            }
        </style>
    </defs>
    <text fill="black" x="50" y="50" class="text" font-size="32">
        ゲレゲレ
    </text>
</svg>

これがHTMLから呼び出す想定のSVGファイルで、textクラスが適用されてる箇所が自作フォントに置き換えられるはず。「gere2.svg」とかテキトーな名前つけて外部ファイルに保存しといて、htmlからはimgで外部参照してみることにした。

<img src="gere2.svg">

よっしゃこれで完璧やぞ！と思っていたのも束の間。

うーん変わっとらんぞ。まじでカーと思いながらSVG単体をブラウザでプレビューすると、ちゃんと反映されてる謎。困ってしまってワンワンワワーンなのでGoogle先生に教えを請うたら、安心と信頼のStackOverflowにたどり着いた。ベストアンサーをGoogle翻訳して一部抜粋。

問題全体を回避するためのもう1つの解決策は、imgタグの代わりにhtmlオブジェクトタグを使用することです。このようにsvgはスタンドアロンの画像以上のものであることが許されており、他のアセットを含めるためにあらゆる範囲のxml包含メソッドを使うことができます。

あはぁん。なるほどね。アレをナニすればええのね。←よく分かってない

<object type="image/svg+xml" data='gere2.svg'></object>

ということで、imgタグをobjectタグに置き換えるとやりたい事ができた。でもなんか、objectとかembetとか好きくないのよねぇ。ぶっちゃけどのタグが良いとか悪いかとかは正直よくわからんのだが、個人的な好みでiframeを推したい。というわけで、最終的には下記のタグでなんとかした。

<iframe src='fuga.svg' frameborder="no"></iframe>

これで、SVGを読み込んだHTML側で独自フォントが反映されるようになった。めでたしめでたし。