Extrahieren von SVG aus Font Awesome

87

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>

html svg font-awesome

— Yarin
quelle

62

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

— Robert Longson
quelle

6

Um die Vollständigkeit dieser Antwort zu gewährleisten, <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, bei dem 1792das units-per-emund 1536das ascenton- font-faceElement ist.

— McKamey

Re 1792 is the units-per-em: Tippfehler? Ich würde denken, es wäre 179.2, die Höhe / Breite anzupassen.

— Nate Cook

97

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

Geben Sie hier die Bildbeschreibung ein

Drücken Sie eine beliebige Datei und dann "Raw" Geben Sie hier die Bildbeschreibung ein

— Angie
quelle

10

Ich fand viele dieser Symbole, die an den Seiten abgeschnitten waren, zum Beispiel Auto

— Bankzilla

21

IcoMoon App macht dies ganz einfach.

— jedierikb
quelle

2

Ja, IcoMoon ist fantastisch

— Yarin

3

IcoMoon ist sehr einfach zu bedienen, aber ich habe festgestellt, dass es längere Pfade als die SVGs in diesem GitHub-Repo exportiert . Versuchen Sie zum Vergleich das fa-Geschenk-Symbol. Das pathsind 837 Zeichen über IcoMoon, gegenüber 514 im Repo .

— Dan Dascalescu

Netter Fund Dan, hatte keine Ahnung von dieser Einschränkung. Trotzdem liebe ich IcoMoon.

— SISYN

12

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

— jedierikb
quelle

7

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.

— TomByrer
quelle

2

Ich werde das ausprobieren müssen

— John Dangerous

Font-Blast super schnell und einfach

— 00-BBB

4

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.

— Orlandster
quelle

3

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

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

— John Dangerous
quelle

Kann hilfreich sein, aber wenn Sie die Größe eines Pfads von 512 x 512 auf 20 x 20 ändern möchten, müssen Sie die Tasten viel verkleinern

— nicolallias

3

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

— Muah
quelle