Estrazione di SVG da Font Awesome

Voglio ottenere i dati del percorso SVG dai glifi di Font Awesome in modo da poterli utilizzare direttamente come SVG nel mio HTML. Ho pensato che sarebbe stato facile come copiare e incollare i dati del percorso da fontawesome-webfont.svg , ma quando lo uso nel mio HTML i simboli vengono visualizzati tutti sottosopra. Qualcuno sa perché?

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

... Portato in HTML SVG (e ridimensionato):

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

Tutto secondo le specifiche SVG ...

A differenza della grafica standard in SVG, dove il sistema di coordinate iniziale ha l'asse y rivolto verso il basso, la griglia di progettazione per i caratteri SVG, insieme al sistema di coordinate iniziale per i glifi, ha l'asse y rivolto verso l'alto per coerenza con la pratica industriale accettata per molti formati di caratteri popolari.

Secondo questo commento , la modifica dell'involucro in <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>sembra fare il trucco, dove 1792 è le unità per em e 1536 è l'ascesa sull'elemento font-face

Basta ottenere le icone svg pronte da questo repository GitHub
Sono già capovolte e centrate secondo necessità

Premi un file e poi "Raw"

L'app IcoMoon lo rende estremamente semplice.

Usa lo script fontforge. C'è uno script che ho trovato online qui :

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

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

C'è anche uno strumento node.js che automatizzerà questo per te e creerà un prima e un dopo verify.html. https://github.com/eugene1g/font-blast

L'ho usato su altri caratteri, solo 1 conversione di icone errata finora, ma il resto nel carattere SVG andava bene.

Puoi semplicemente scaricare l'ultima versione di faqui: https://fontawesome.com/

E poi vai alla advanced-options/raw-svgcartella. Vi si possono trovare tre cartelle brands, regulare solidche contiene tutti i più recenti icone disponibili.

Puoi scaricarli da flaticon.com qui:

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

Puoi semplicemente scaricare qualsiasi svg Font-Awesome di cui hai bisogno dal loro repository su Github

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