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="" 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>
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
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
Appuyez sur n'importe quel fichier, puis sur "Raw" 
application IcoMoon simplifie ce processus.
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
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.
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.
Vous pouvez les télécharger à partir de flaticon.com ici: