Aujourd’hui nous n’utilisons plus les sprites .png pour nos images, au profit de fonticons bien plus performantes et génériques. Avec des outils de génération automatique comme gulp-iconfont pour n’en citer qu’un, la création de fonticon s’est démocratisée. Les avantages sont nombreux :

• Facile à maintenir : on ajoute un svg dans notre dossier, on lance un script et la police est générée;
• Facile à utiliser : on génère souvent un fichier SASS, LESS ou autre avec des mixin pour utiliser les icônes où on souhaite ;
• Facile à customiser : on peut changer la couleur et la taille en CSS comme bon nous semble, faire des effets de survol avec une transition propre.

Mais souvent on se retrouve avec des SVG créés par des graphistes mais non adaptés au passage au format web et aux fonticon.

Pour ça on doit respecter quelques règles:

• Tous les icônes doivent avoir la même hauteur, si possible suffisamment élevée (500pt minimum conseillés) ;
• On doit utiliser des formes pleines, pas de chemin avec une bordure (du « fill » et pas du « stroke » sur un path).

Modifier le SVG sous Illustrator

Nous allons voir comment rendre cette jolie fleur dans un format SVG adaptée à notre fonticon ains que quelques outils pratiques pour les intégrateurs.

Un premier outil bien pratique se trouve dans Window/Appearence (ou shift + F6).

Ca permet d’arrondir les angles en changeant le cap et/ou le corner suivant les besoins.

Voilà le résultat : un arrondi au bout de la tige et des feuilles, et une coupure moins nette entre les pétales.

Il est temps de transformer le chemin en une forme pleine, afin de pouvoir utiliser l’image dans notre fonticon.

Illustrator propose une commande toute faite : Object/Path/Outline Stroke

Et voilà, on se retrouve maintenant avec plusieurs objets pleins. Pour faciliter l’utilisation en fonticon, on va combiner le tout en un seul élément.

Pour ça on ouvre une nouvelle fenêtre dans Window/Pathfinder (ou Ctrl + Shift + 9) puis on choisit unite. Les autres outils sont pratiques pour faire de la composition (merge, exclusion, intersection…).

On se retrouve avec un seul objet. En sélectionnant la forme on peut lui mettre la même hauteur que les autres icônes et pour que la zone de travail s’adapte à la forme de notre objet il faut sélectionner l’outil « artboard« . En double cliquant sur notre objet avec l’outil sélectionné, la zone s’adapte automatiquement à sa forme.

Il ne reste plus qu’à enregistrer notre .svg avec quelques paramètres pour optimiser un peu le poids du fichier, suivant les recommandations de gulp-iconfont:

• Utiliser SVG 1.1
• Cocher Embed pour les paramètres de Images Location
• Mettre les décimales à 1, ce qui réduit le nombre de décimales dans la position des points dans le fichier SVG, d’où l’importance d’avoir une forme assez grande : si on a une forme trop petite, les points sont décalés et le rendu n’est pas optimal.

Et voilà, notre fleur en .svg est prête à être utilisée dans une fonticon !