Extrahieren von SVG aus Font Awesome

Ich möchte die SVG-Pfaddaten von Font Awesome- Glyphen abrufen, damit ich sie direkt als SVG in meinem HTML-Code verwenden kann. Ich dachte, es wäre so einfach wie das Kopieren und Einfügen der Pfaddaten aus fontawesome-webfont.svg , aber wenn ich es in meinem HTML verwende, werden alle Symbole verkehrt herum gerendert . Weiß jemand warum?

(Siehe Geige )

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

... auf HTML SVG portiert (und verkleinert):

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

Alles gemäß der SVG-Spezifikation ...

Im Gegensatz zu Standardgrafiken in SVG, bei denen die y-Achse des anfänglichen Koordinatensystems nach unten zeigt, zeigt das Designraster für SVG-Schriftarten zusammen mit dem anfänglichen Koordinatensystem für die Glyphen die y-Achse nach oben, um die Übereinstimmung mit der branchenüblichen Praxis zu gewährleisten viele beliebte Schriftformate.

Gemäß diesem Kommentar<svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> scheint das Ändern des Wrappers in den Trick zu tun, wobei 1792 die Einheiten pro Em und 1536 der Aufstieg auf das Schriftartenelement ist

Holen
Sie sich einfach die fertigen SVG-Symbole aus diesem Github-Repo. Sie werden bereits nach Bedarf umgedreht und zentriert

Drücken Sie eine beliebige Datei und dann "Raw"

IcoMoon App macht dies ganz einfach.

Verwenden Sie das Fontforge-Skript. Es gibt ein Skript, das ich hier online gefunden habe :

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

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

Es gibt auch ein node.js-Tool, das dies für Sie automatisiert und ein Vorher & Nachher erstellt verify.html. https://github.com/eugene1g/font-blast

Ich habe es für andere Schriftarten verwendet, bisher nur 1 schlechte Symbolkonvertierung, aber der Rest in der Schrift SVG war in Ordnung.

Sie können einfach die neueste Version von fahier herunterladen : https://fontawesome.com/

Und dann gehe in den advanced-options/raw-svgOrdner. Dort finden Sie drei Ordner finden brands, regularund solidenthält alle aktuellen Symbole.

Sie können sie hier von flaticon.com herunterladen:

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

Sie können einfach jedes Font-Awesome-SVG, das Sie benötigen, von ihrem Repo bei Github herunterladen

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