Извлечение SVG из шрифта Awesome

Question

Я хочу получить данные о пути SVG от глины Font Awesome, чтобы я мог использовать их прямо в SVG в своем HTML. Я думал, что это будет так же просто, как копировать данные пути из fontawesome-webfont.svg, но когда я использую его в своем HTML, символы все переворачиваются в обратном порядке. Кто-нибудь знает, почему?

(см Fiddle)

шрифт Удивительный 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> 

Answer 1

Все согласно SVG specification ...

В отличие от стандартной графики в SVG, где исходная система координат имеет ось y, направленную вниз, проектная сетка для шрифтов SVG вместе с исходной системой координат для глифов имеет ось y, направленную вверх для согласованности с принятыми отраслевая практика для многих популярных форматов шрифтов.

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

Answer 2

IcoMoon app делает этот мертвый просто.

Answer 3

Используйте скрипт fontforge. Существует скрипт я нашел online here:

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

См: http://fontforge.sourceforge.net/scripting.html

Answer 4

Просто получить готовые иконки SVG из this github repo
Они уже переворачивается и по центру в случае необходимости

Нажмите любой файл, а затем «Raw»

Answer 5

Вы можете загрузить их с flaticon.com здесь:

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

Answer 6

Существует также node.js инструмент, который позволит автоматизировать это для вас, & создать перед тем & после verify.html. https://github.com/eugene1g/font-blast

Я использовал его на других шрифтах, только 1 неудачное преобразование значков, но отдых в шрифте SVG был прекрасен.