Font Awesome'den SVG'yi Çıkarma

Font Awesome gliflerinden SVG yol verilerini almak istiyorum, böylece bunları HTML’imde doğrudan SVG olarak kullanabilirim. Fontawesome-webfont.svg dosyasındaki yol verilerini kopyalayıp yapıştırmak kadar kolay olacağını düşünmüştüm , ancak bunu HTML'mde kullandığımda sembollerin hepsi ters dönüyor . Nedenini bilen var mı?

(Bakın 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'ye taşındı (ve küçültüldü):

<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>

Hepsi SVG spesifikasyonuna göre ...

Başlangıç ​​koordinat sisteminin y ekseninin aşağıya baktığı SVG'deki standart grafiklerden farklı olarak, SVG yazı tipleri için tasarım ızgarası, glifler için başlangıç ​​koordinat sistemi ile birlikte, y ekseni, birçok popüler yazı tipi biçimi.

Gereğince Bu yoruma için sarıcı değiştirme <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>nerede, hileye neden olabilir 1792 ünite başına em ve olduğu 1536 Font-face elemana yokuşudur

Sadece bu github deposundan hazır svg simgelerini alın
Gerektiğinde zaten çevrilmiş ve ortalanmış

Herhangi bir dosyaya ve ardından "Raw" a basın

IcoMoon uygulaması bunu çok basitleştirir.

Fontforge komut dosyasını kullanın. Burada çevrimiçi bulduğum bir komut dosyası var :

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

Bakınız: http://fontforge.sourceforge.net/scripting.html

Bunu sizin için otomatikleştirecek ve öncesi ve sonrası oluşturacak bir node.js aracı da var verify.html. https://github.com/eugene1g/font-blast

Bunu diğer yazı tiplerinde kullandım, şimdiye kadar yalnızca 1 kötü simge dönüşümü, ancak SVG yazı tipinde geri kalanı iyiydi.

En son sürümünü faburadan indirebilirsiniz : https://fontawesome.com/

Ve sonra advanced-options/raw-svgklasöre gidin . Eğer Orada üç klasör bulacaksınız brands, regularve soliden son simgeleri mevcut içerikli.

Gereksinim duyduğunuz Font-Awesome svg'yi Github'daki depodan indirebilirsiniz.

https://github.com/FortAwesome/Font-Awesome/tree/master/svgs

Bunları flaticon.com'dan buradan indirebilirsiniz:

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