Wyodrębnianie SVG z Font Awesome

Chcę uzyskać dane ścieżki SVG z glifów Font Awesome, aby móc ich używać bezpośrednio jako SVG w moim HTML. Pomyślałem, że będzie to tak proste, jak skopiowanie i wklejenie danych ścieżki z fontawesome-webfont.svg , ale kiedy używam go w moim HTML, wszystkie symbole są renderowane do góry nogami. Czy ktoś wie, dlaczego?

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

... Przeniesiony do HTML SVG (i zmniejszony):

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

Wszystko zgodnie ze specyfikacją SVG ...

W przeciwieństwie do standardowej grafiki w SVG, gdzie początkowy układ współrzędnych ma oś y skierowaną w dół, siatka projektowa dla czcionek SVG, wraz z początkowym układem współrzędnych dla glifów, ma oś Y skierowaną w górę, aby zachować zgodność z przyjętymi praktykami branżowymi dla wiele popularnych formatów czcionek.

Zgodnie z tym komentarzem , zmiana opakowania na <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>wydaje się załatwić sprawę, gdzie 1792 to jednostki na em, a 1536 to wzniesienie na elemencie font-face

Po prostu pobierz gotowe ikony svg z tego repozytorium github.
Są już odwrócone i wyśrodkowane w razie potrzeby

Naciśnij dowolny plik, a następnie „Raw”

Aplikacja IcoMoon sprawia, że ​​jest to proste.

Użyj skryptu fontforge. Tutaj jest skrypt, który znalazłem online :

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

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

Istnieje również narzędzie node.js, które zautomatyzuje to za Ciebie i utworzy przed i po verify.html. https://github.com/eugene1g/font-blast

Użyłem go na innych czcionkach, jak dotąd tylko 1 zła konwersja ikon, ale reszta w czcionce SVG była w porządku.

Możesz po prostu pobrać najnowszą wersję fatutaj: https://fontawesome.com/

A następnie przejdź do advanced-options/raw-svgfolderu. Nie znajdziesz trzy foldery brands, regulara solidzawierający wszystkie najnowsze ikony dostępne.

Możesz je pobrać ze strony flaticon.com tutaj:

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

Możesz po prostu pobrać dowolny plik Font-Awesome svg, którego potrzebujesz, z ich repozytorium na Github

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