27152


SVGにフォントを埋め込むことはできますか?  
SVGにフォントを埋め込んで、そのSVGを`<body>`の`background-image`にしたいです  
このようなことはできるのでしょうか?


CC BY-SA 3.0
2016-06-28T13:25:30.887
27146
2016-06-28T15:30:56.517
5246
question
html svg
SVGでフォントを埋め込むことはできますか?


ほぼ同じ質問が[英語でありました](https://graphicdesign.stackexchange.com/questions/5162/how-
do-i-embed-google-web-fonts-into-an-
svg)。2つやり方があって、CSS`<style>`タグでフォントファイルを[base64](https://ja.wikipedia.org/wiki/Base64)にして[data
URI](https://developer.mozilla.org/ja/docs/data_URIs)を埋め込む方法と、`<font>`タグで自前のフォントをパスで指定する方法です。@rio.irikami
さんがコメントで書かれた様に`path`として足す場合、2つ目のやり方にすれば最初面倒臭いですがあとからの編集は楽です。  
**直接質問とは関係ありませんが、フォントを埋め込む場合データの再配布という扱いになる可能性があるのでライセンスには気をつけた方がいいと思います。**

# 1\. `<style>`を使う方法

[SVGにCSSスタイル](https://www.w3.org/TR/SVG/styling.html#StyleElement)を足すには、

[code]

    <svg ...>
      <defs>
        <style type="text/css"><![CDATA[
          @font-face {
            font-family: "Sample font";
            src: url("data:application/font-woff;charset=utf-8;base64,...");
          }
        ]]></style>
      </defs>
    </svg>
    
[/code]

のように`<svg>`タグ内に`<defs><style>...</style></defs>`をつけてそこでスタイルを指定します。ここにHTMLでつかうCSSと同じ様にフォントとそのソースを指定すればそのフォントを`<text>`から指定でます。ソースはウェブ上のフォントも指定できますが、サンプルの様にフォントファイルのdata
URIをコピペすれば内臓もできます。`...`部分にbase64エンコードしたフォントファイル、`application/font-
woff`にファイルのフォーマットを[MIME](https://ja.wikipedia.org/wiki/Multipurpose_Internet_Mail_Extensions)であらわしたものを指定します。サンプルは.woffフォントの場合です。.ttfならば`application/x-font-
ttf`、.otfは`application/x-font-otf`の様になります。

# 2\. `<font>`を使う方法

フォントをファイルとしてではなく、`<font>`タグを使いフォントの元である[パスを埋め込む](https://www.w3.org/TR/SVGTiny12/fonts.html)ことでフォントとして使うことができます。[サンプルとそのソース](https://www.w3.org/TR/SVGTiny12/examples/font01.svg)、[W3のドキュメント](https://www.w3.org/TR/SVGTiny12/fonts.html)を見ていただいた方がわかると思いますが、一応軽くまとめると`<font>`タグ内に`<glyph>`(書体)を足すことで1文字づつフォントを作ります。`<glyph>`のプロパティ`unicode`で文字、`d`でパスを指定します。


CC BY-SA 3.0
2016-06-28T14:27:49.037
27152
2016-06-28T15:30:56.517
2020-06-17T08:14:45.997
-1
3974
27146
answer