web-dev-qa-db-fra.com

Extraire SVG de la police géniale

Je souhaite obtenir les données de chemin SVG à partir de glyphes) de police (Font Awesome , afin de pouvoir les utiliser directement en tant que SVG dans mon code HTML. Je pensais que ce serait aussi simple que de copier-coller les données du chemin de fontawesome-webfont.svg , mais lorsque je l'utilise dans mon code HTML, les symboles sont tous restitués à l'envers. Quelqu'un sait pourquoi?

(Voir Fiddle )

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

... Porté au format HTML SVG (et réduit): 

<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>
html5svgfont-awesome
78
Yarin

Tout par le spécification SVG ...

Contrairement aux graphiques standard en SVG, où le système de coordonnées initial a l'axe des y dirigé vers le bas, la grille de conception des polices SVG, ainsi que le système de coordonnées initial des glyphes, ont l'axe des y dirigé vers le haut pour des raisons de cohérence. pratique acceptée par l’industrie pour de nombreux formats de polices populaires.

Selon ce commentaire , Changer le wrapper en <svg height="179.2" width="179.2"><path transform="scale(0.1,-0.1) translate(0,-1536)" d="..." /></svg> semble faire l'affaire, où 1792 est les unités par unité et 1536 est l’ascension sur l’élément font-face

59
Robert Longson

Il suffit d’obtenir les icônes de svg prêtes à partir de ce dépôt github
Ils sont déjà retournés et centrés au besoin

enter image description here

Appuyez sur n'importe quel fichier, puis sur "Raw" enter image description here

82
Angie

application IcoMoon simplifie ce processus.

19
jedierikb

Utilisez le script fontforge. Il y a un script que j'ai trouvé en ligne ici :

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

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

8
jedierikb

Il existe également un outil node.js qui automatisera cela pour vous et créera un avant & après verify.html. https://github.com/eugene1g/font-blast

Je l'ai utilisé sur d'autres polices, seulement une mauvaise conversion d'icône jusqu'à présent, mais le reste dans la police SVG était correct.

6
tomByrer

Vous pouvez simplement télécharger la dernière version de fa ici: https://fontawesome.com/

Et puis allez dans le dossier advanced-options/raw-svg. Vous y trouverez trois dossiers brands, regular et solid contenant toutes les dernières icônes disponibles.

4
Orlandster

Vous pouvez les télécharger à partir de flaticon.com ici:

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

4
John Dangerous