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

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

(см. Fiddle)

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

Ответ 1

Все в Спецификация 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 - единицы измерения на-em и 1536 - это восхождение по элементу font-face

Ответ 2

Просто получите готовые значки svg из этого github-репо
Они уже перевернуты и центрируются по мере необходимости

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

Ответ 3

Приложение IcoMoon делает эту запись простой.

Ответ 4

Используйте fontforge script. Существует script я нашел здесь:

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

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

Ответ 5

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

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

Ответ 6

Вы можете скачать их с flaticon.com здесь:

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

Ответ 7

Вы можете просто скачать последнюю версию fa здесь: https://fontawesome.com/

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

Ответ 8

Вы можете просто скачать любую Font-Awesome SVG, которая вам нужна, из их репозитория на Github

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