html - Font Awesome から SVG を抽出する

Question

HTML で SVG として直接使用できるように、 Font Awesomeグリフから 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>

Answer 1

すべて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は units-per-em で、1536は font-face 要素の上昇です

Answer 2

IcoMoon アプリは、これを非常にシンプルにします。

Answer 3

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

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

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

Answer 4

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

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