Wyodrębnianie SVG z Font Awesome

89

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>
Yarin
źródło

Odpowiedzi:

62

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

Robert Longson
źródło
6
Aby uzyskać kompletność tej odpowiedzi, 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łatwiać sprawę, gdzie 1792jest units-per-emi 1536jest elementem ascentwłączonym font-face.
mckamey
Re 1792 is the units-per-em: Literówka? Myślę, że 179.2pasowałoby to do wysokości / szerokości.
Nate Cook
99

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

wprowadź opis obrazu tutaj

Naciśnij dowolny plik, a następnie „Raw” wprowadź opis obrazu tutaj

Angie
źródło
10
Znalazłem wiele z nich miało ikony, które zostały przycięte po bokach, na przykład samochód
Bankzilla
21

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

jedierikb
źródło
2
Tak, IcoMoon jest niesamowity
Yarin
3
IcoMoon jest bardzo łatwy w użyciu, ale odkryłem, że eksportuje dłuższe ścieżki niż pliki SVG w tym repozytorium GitHub . Spróbuj dla porównania ikonę fa-gift. Jest pathto 837 znaków przez IcoMoon, w porównaniu z 514 w repozytorium .
Dan Dascalescu
Niezłe znalezisko, Dan, nie miałem pojęcia o tym zastrzeżeniu. Mimo to kocham IcoMoon.
SISYN
7

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.

tomByrer
źródło
2
Będę musiał to wypróbować
John Dangerous,
font-blast super szybki i łatwy
00-BBB
4

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.

Orlandster
źródło