FontAwesomeからSVGを抽出する

89

Font AwesomeグリフからSVGパスデータを取得して、HTMLでSVGとして直接使用できるようにします。fontawesome-webfont.svgからパスデータをコピーして貼り付けるのと同じくらい簡単だと思いましたが、HTMLで使用すると、シンボルがすべて逆さまにレンダリングされます。誰もが理由を知っていますか？

（フィドルを参照）

Font Awesome SVG： 

<glyph unicode="&#xf007;" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z" />

... HTML SVGに移植（および縮小）：

<svg width="1000" height="1000" ><path transform="scale(0.1,0.1)" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z"/></svg>
html  svg  font-awesome 
— やりん
ソース

回答:

62

すべてSVG仕様に従って...

初期座標系のy軸が下を向いているSVGの標準グラフィックスとは異なり、SVGフォントのデザイングリッドは、グリフの初期座標系とともに、y軸が上を向いているため、多くの一般的なフォント形式。

あたりとしてこのコメントにラッパーを変更する<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>場合は、トリックを行うようだ1792年は、単位あたりのEMとある1536年は、フォントフェース要素の上昇であります

— ロバート・ロングソン
ソース
6
この回答の完全を期すためにラッパーを変更すると、<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>トリック、やるように思わ1792れるunits-per-emとし1536ているascent上のfont-face要素を。
— mckamey 2014
Re 1792 is the units-per-em：タイプミス？179.2高さ・幅に合わせると思います。
— ネイト・クック
99

このgithubリポジトリから準備ができたsvgアイコンを取得するだけです。
それらはすでに必要に応じて反転され、中央に配置されています。

ここに画像の説明を入力してください

任意のファイルを押してから「生」を押します ここに画像の説明を入力してください

— アンジー
ソース
10
これらの多くには、側面にトリミングされたアイコンがあります。たとえば、車
— Bankzilla 2015
21

IcoMoonアプリは、このデッドをシンプルにします。

— jedierikb
ソース
2
Yea IcoMoonは素晴らしいです
— Yarin
3
IcoMoonは非常に使いやすいですが、このGitHubリポジトリのSVGよりも長いパスをエクスポートすることがわかりました。fa-giftアイコンを比較してみてください。これpathは、IcoMoon経由で837文字であるのに対し、リポジトリでは514文字です。
— ダンダスカレスク2015年
ダンを見つけてください、この警告については知りませんでした。それでも、私はIcoMoonが大好きです。
— SISYN 2016
7

これを自動化し、beforeとafterを作成するnode.jsツールもありますverify.html。 https://github.com/eugene1g/font-blast

私は他のフォントでそれを使用しました。これまでのところ、悪いアイコン変換は1つだけですが、残りのフォントはSVGで問題ありませんでした。

— tomByrer
ソース
2
私はこれを試してみる必要があります
— John Dangerous
スーパー迅速かつ簡単にフォントブラスト
— 00-BBB
4

faこちらの最新バージョンをダウンロードするだけです：https：//fontawesome.com/

そして、advanced-options/raw-svgフォルダに移動します。あなたはそこに3つのフォルダがありますbrands、regularそしてsolid利用可能なすべての最新のアイコンを含みます。

— オーランドスター
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.