Font Awesomeのsvgファイルから1画像だけ抜き出して利用したい

Font Awesomeを利用して、アイコンを表示しようとしています。

クライアントの都合で、<input type="button">にアイコンを出す必要があり、かつinputのvalueにはシステムのサニタイズのためか、\f061やは使用できないため、inputのbackgroundにsvgを表示する方法を検討しています。

Font Awesomeが配布しているfontawesome-webfont.svgはAdobe Illustratorで確認できるような画像群ではなく、svgのコードが列挙されているようなのですが、ここから単品だけを抜き出してinputのbackgroundとして利用することは可能でしょうか？

それともfontawesome-webfont.svgはこちらでわざわざツールなどで1アイコンずつに分離しないと利用できないファイルなんでしょうか。

詳しい方いらっしゃいましたら、よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

SVGはただのテキストファイル(XMLファイル)ですので、適当なテキストエディタで編集することが可能です。できそうな方法を二つ紹介します。

<glyph unicode="" .../>の部分以外の<missing-glyph .../>と<glyph .../>を削除し、適当な<text ...></text>を追加する。

もともと<font>...</font>はSVG内で使うフォントの設定であるため、その本来の使い方をします。ただ、何かが足りないのか私はうまく作れませんでした。下記の参考ページによると旧Opera以外では動かないようですので、この方法は難しいかも知れません。
参考: 16.フォント定義 - svg要素の基本的な使い方まとめ
2. <glyph unicode="" .../>を<path .../>に変えて使う。
文字(glyph)もただの線(path)です。線の定義であるd属性の書き方も同じです。ですので、そのまま<path .../>にしてしまいます。
一応chromeでSVG単体はうまく表示できました。

ということで、するのであれば2.の方法でしょうか。とりあえずサンプルを下に載せます。

SVG
1<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -256 1792 1792">
2<!--
3This image uses the font glyph of the following library .
4Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome
5License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
6-->
7<path d="M1472 576q0 -54 -37 -91l-651 -651q-39 -37 -91 -37q-51 0 -90 37l-75 75q-38 38 -38 91t38 91l293 293h-704q-52 0 -84.5 37.5t-32.5 90.5v128q0 53 32.5 90.5t84.5 37.5h704l-293 294q-38 36 -38 90t38 90l75 75q38 38 90 38q53 0 91 -38l651 -651q37 -35 37 -90z" />
8</svg>