Extraindo SVG de Font Awesome

Quero obter os dados do caminho SVG dos glifos Font Awesome para que possa usá-los diretamente como SVG no meu HTML. Achei que seria tão fácil quanto copiar e colar os dados do caminho de fontawesome-webfont.svg , mas quando o uso em meu HTML, os símbolos são renderizados de cabeça para baixo. Alguém sabe por quê?

(Veja Fiddle )

SVG impressionante de fonte:

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

... Portado para HTML SVG (e reduzido):

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

Tudo de acordo com a especificação SVG ...

Ao contrário dos gráficos padrão em SVG, onde o sistema de coordenadas inicial tem o eixo y apontando para baixo, a grade de design para fontes SVG, junto com o sistema de coordenadas inicial para os glifos, tem o eixo y apontando para cima para consistência com as práticas aceitas da indústria para muitos formatos de fonte populares.

De acordo com este comentário , mudar o invólucro para <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg>parece resolver o problema, onde 1792 são as unidades por em e 1536 é a subida no elemento da face da fonte

Basta obter os ícones svg prontos deste repositório github
Eles já estão virados e centralizados conforme necessário

Pressione qualquer arquivo e depois "Raw"

O aplicativo IcoMoon torna isso muito simples.

Use o script fontforge. Há um script que encontrei online aqui :

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

Veja: http://fontforge.sourceforge.net/scripting.html

Há também uma ferramenta node.js que irá automatizar isso para você e criar um antes e depois verify.html. https://github.com/eugene1g/font-blast

Eu usei em outras fontes, apenas 1 conversão de ícone ruim até agora, mas o resto na fonte SVG estava bem.

Você pode simplesmente baixar a versão mais recente faaqui: https://fontawesome.com/

Em seguida, vá para a advanced-options/raw-svgpasta. Lá você vai encontrar três pastas brands, regulare solidcontendo todas as últimas ícones disponíveis.

Você pode simplesmente baixar qualquer svg Font-Awesome que você precisa de seu repositório no Github

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

Você pode baixá-los em flaticon.com aqui:

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