web-dev-qa-db-ja.com

Font AwesomeからSVGを抽出する

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

（ Fiddle を参照）

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>
html5svgfont-awesome
78
Yarin

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は単位です-per-emおよび1536はfont-face要素のアセントです

59
Robert Longson

this github repo から用意されているsvgアイコンを取得するだけです
必要に応じて既に反転され、中央に配置されています

enter image description here

任意のファイルを押してから「生」 enter image description here

82
Angie

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

19
jedierikb

FontForgeスクリプトを使用します。私が見つけたスクリプトがあります ここでオンライン ：

fontforge -lang=ff -c 'Open($1); SelectWorthOutputting(); foreach Export("svg"); endloop;' font.ttf

参照： http://fontforge.sourceforge.net/scripting.html

8
jedierikb

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

私はこれまで他のフォントで使用してきましたが、これまではたった1つの悪いアイコン変換でしたが、フォントSVGの残りは大丈夫でした。

6
tomByrer

次のfaの最新バージョンをダウンロードできます： https://fontawesome.com/

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

4
Orlandster

こちらからflaticon.comからダウンロードできます。

http://www.flaticon.com/packs/font-awesome

4
John Dangerous