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

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



(см. Скрипка)



шрифт Awesome SVG:



<glyph unicode="" 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>
1083   7  

7 ответов:

всего за спецификация 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

54  
2017-05-23 15:26:17

просто получить готовые иконки svg от этот GitHub РЕПО
Они уже перевернуты и центрированы по мере необходимости

enter image description here

нажмите любой файл, а затем " Raw" enter image description here

76  
2015-04-17 16:26:54

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

17  
2014-10-20 18:27:31

использовать скрипт fontforge. Есть скрипт, который я нашел здесь:

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

посмотреть: http://fontforge.sourceforge.net/scripting.html

7  
2014-10-20 18:49:51

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

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

4  
2015-07-29 19:23:00

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

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

4  
2016-06-24 18:54:45

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

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

3  
2018-03-13 19:46:18

Comments

    Ничего не найдено.
Click here to cancel reply.