シンプルなグラフィックと非標準フォントを使用した会社名の単語のみで SVG イメージ ロゴを作成しようとしています。サイズを節約するために、フォント全体を参照するのではなく、単語に必要なグリフのみを埋め込むことにしました。ただし、テキストはカスタム (埋め込み) フォントを使用して表示されません。そのため、「最も重要な Web サイト」である W3.org で非常によく似た例を見つけましたが、驚いたことに、それらの例もほとんどの最新のブラウザーでは機能しません。
例を含む公式の SVG 定義記事へのリンクは次のとおりです: https://www.w3.org/TR/SVGTiny12/fonts.html
問題の SVG サンプル ファイルへのリンクは次のとおりです: https://www.w3.org/TR/SVGTiny12/examples/font01.svg
ファイルのコードは次のとおりです。
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.2" baseProfile="tiny" viewBox="0 0 160 70"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>Font example</title>
<defs>
<font horiz-adv-x="313" xml:id="la">
<metadata>Converted from Larabie Anglepoise by Batik ttf2svg
See http://www.larabiefonts.com/ </metadata>
<font-face font-family="larabie-anglepoise" units-per-em="1000"
panose-1="0 0 4 0 0 0 0 0 0 0" ascent="703" descent="-300" alphabetic="0"/>
<missing-glyph horiz-adv-x="500" d="M63 0V700H438V0H63ZM125 63H375V638H125V63Z"/>
<glyph unicode="S" glyph-name="S" horiz-adv-x="385" d="M371 1H29V144H264Q264 151
264 166Q265 180 265 188Q265 212 249 212H132Q83 212 55 247Q29 279 29
329V566H335V422H136V375Q136 360 144 356Q148 355 168 355H279Q327 355 352
309Q371 273 371 221V1Z"/>
<glyph unicode="V" glyph-name="V" horiz-adv-x="351" d="M365 563L183 -33L0
563H101L183 296L270 563H365Z"/>
<glyph unicode="G" glyph-name="G" horiz-adv-x="367" d="M355
1H18V564H355V420H125V144H248V211H156V355H355V1Z"/>
<hkern g1="V" g2="G" k="-40"/>
</font>
</defs>
<text x="40" y="50" font-family="larabie-anglepoise" font-size="70"
fill="#933">SVG</text>
<rect x="00" y="00" width="160" height="70" stroke="#777" fill="none"/>
</svg>
機能しません。つまり、画像はレンダリングされますが、フォントが間違っています。
- クロム v. 55.0.2883.87
- Firefox v. 47.0.2
- Internet Explorer v. 10.0.9200
- オペラ v. 42.0
- ヴィヴァルディ v. 1.2.490.43
ただし、サンプル画像は古いブラウザで正しくレンダリングされます。
- オペラ v. 12.17
- サファリ v.5.1.4
- Maxthon v. 4.4.5.3000
どうしたの？CSSを使用して外部ファイルを参照せずに、フォントが埋め込まれたSVG画像を確実に作成する方法を教えてください。