Извлечение SVG из Font Awesome

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

(См. Скрипку )

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

... Портировано в 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 - это подъем на элемент font-face.

Просто получите готовые значки 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

Я использовал его для других шрифтов, пока преобразование значков было неудачным, но остальные шрифты 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