Extraction de SVG à partir de Font Awesome

Question

Je veux obtenir les données du chemin SVG à partir de Font Awesome afin que je puisse les utiliser directement en tant que SVG dans mon HTML. Je pensais que ce serait aussi facile que de copier-coller les données de chemin d'accès de fontawesome-webfont.svg mais lorsque je l'utilise dans mon code HTML, les symboles sont tous affichés à l'envers. Quelqu'un sait-il pourquoi ?

(Voir Violon )

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

... Porté en 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>

Answer 1

MISE À JOUR 2022 grâce au commentaire de Chris Aelbrecht ci-dessous :
Le dépôt officiel contient les SVG de la dernière version à télécharger.

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

---

réponse originale :

Il suffit d'obtenir les icônes svg prêtes à l'emploi à partir de ce repo github
Ils sont déjà retournés et centrés selon les besoins.

Answer 2

Tout selon le Spécification SVG ...

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

Conformément à ce commentaire En changeant 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 l'unité-par-em et 1536 est l'ascendant sur l'élément font-face

Answer 3

Application IcoMoon rend les choses très simples.

Answer 4

Utilisez fontforge script. J'ai trouvé un script. en ligne ici :

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

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

Answer 5

Vous pouvez télécharger tous les svg de Font-Awesome dont vous avez besoin à partir de leur dépôt sur Github.

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