Mengekstrak SVG dari Font Awesome

Saya ingin mendapatkan data jalur SVG dari mesin terbang Font Awesome sehingga saya dapat menggunakannya langsung sebagai SVG di HTML saya. Saya pikir itu akan semudah menyalin-menempelkan data jalur dari fontawesome-webfont.svg , tetapi ketika saya menggunakannya di HTML saya, semua simbol dirender secara terbalik. Ada yang tahu kenapa?

(Lihat Biola )

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

... Porting ke HTML SVG (dan diperkecil):

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

Semua sesuai spesifikasi SVG ...

Tidak seperti grafik standar dalam SVG, di mana sistem koordinat awal memiliki sumbu y yang mengarah ke bawah, kisi desain untuk font SVG, bersama dengan sistem koordinat awal untuk mesin terbang, memiliki sumbu y yang mengarah ke atas untuk konsistensi dengan praktik industri yang diterima untuk banyak format font populer.

Sesuai dengan komentar ini , Mengubah pembungkus menjadi <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>sepertinya berhasil, di mana 1792 adalah unit-per-em dan 1536 adalah kenaikan pada elemen font-face

Cukup dapatkan ikon svg siap dari repo github ini. Ikon
sudah dibalik dan di tengah sesuai kebutuhan

Tekan file apa saja, lalu "Raw"

Aplikasi IcoMoon membuat ini sangat sederhana.

Gunakan skrip fontforge. Ada skrip yang saya temukan online di sini :

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

Lihat: http://fontforge.sourceforge.net/scripting.html

Ada juga alat node.js yang akan mengotomatiskan ini untuk Anda, & membuat sebelum & sesudah verify.html. https://github.com/eugene1g/font-blast

Saya telah menggunakannya pada font lain, sejauh ini hanya 1 konversi ikon yang buruk, tetapi sisanya di font SVG baik-baik saja.

Anda cukup mengunduh versi terbaru di fasini: https://fontawesome.com/

Dan kemudian pergi ke advanced-options/raw-svgfolder tersebut. Di sana Anda akan menemukan tiga folder brands, regulardan solidberisi semua ikon terbaru yang tersedia.

Anda bisa mendownload Font-Awesome svg yang Anda butuhkan dari repo mereka di Github

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

Anda dapat mengunduhnya dari flaticon.com di sini:

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