Витяг SVG з Font Awesome

Я хочу отримати дані шляху SVG із гліфів Font Awesome, щоб я міг використовувати їх прямо як SVG у своєму HTML. Я думав, що це буде так само просто, як скопіювати дані шляху з fontawesome-webfont.svg , але коли я використовую їх у своєму HTML, всі символи відображаються догори ногами. Хтось знає чому?

(Див. Скрипка )

Шрифт 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" />

... Перенесено в HTML SVG (і зменшено):

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

Все згідно специфікації SVG ...

На відміну від стандартної графіки у SVG, де початкова система координат має вісь y, спрямовану вниз, сітка проектування шрифтів SVG, поряд із початковою системою координат для гліфів, має вісь y, спрямовану вгору для узгодження з прийнятою галузевою практикою багато популярних форматів шрифтів.

Відповідно до цього коментаря , зміна обгортки на, <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>схоже, робить трюк, де 1792 - це одиниці в цілому, а 1536 - підйом на елементі шрифту

Просто отримайте готові піктограми svg із цього репозиторію github.
Вони вже перевернуті та відцентровані за необхідності

Натисніть будь-який файл, а потім "RAW"

Додаток IcoMoon робить це мертвим простим.

Використовуйте скрипт fontforge. Тут я знайшов сценарій в Інтернеті :

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

Див .: http://fontforge.sourceforge.net/scripting.html

Існує також інструмент node.js, який автоматизує це для вас і створить до і після verify.html. https://github.com/eugene1g/font-blast

Я використовував його на інших шрифтах, поки що лише 1 перетворення поганої піктограми, але відпочинок у шрифті SVG був нормальним.

Ви можете просто завантажити останню версію faтут: https://fontawesome.com/

А потім перейдіть до advanced-options/raw-svgпапки. Там ви знайдете три папки brands, regularі solidмістить всі останні іконки доступні.

Ви можете завантажити їх з flaticon.com тут:

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

Ви можете просто завантажити будь-який Font-Awesome svg, який вам потрібен, з їх репо на Github

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