• Home
  • Nous contacter

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab

Le blog d'Adfab
Design Frontend

Créer des SVG adaptés aux fonticons

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.

svg-flower-step1

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.

svg-flower-step2

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

svg-flower-step3

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

svg-flower-step4

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…).

svg-flower-step6

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.

svg-flower-step7

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.

svg-flower-step8

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

03/03/2017 6 MIN READ TAGS: fonticon, illustrator, SVG BY: Jonathan VALLET 0 COMMENT
SHARE
LIRE LA SUITE

Jonathan VALLET

Passionné de jeux vidéos, j'ai d'abord suivi un cursus de développeur avant de me spécialiser avec une année de Game Design. Après 2 ans et demi chez Ubisoft sur le développement de leur premier MMO par navigateur, puis quelques autres expériences, j'ai rejoint AdFab en 2013. Je m'occupe désormais du développement d'applis mobile et de sites généralement très graphiques.

Comment gérer ses règles métiers grâce au pattern Specification ?

Créer une sprite SVG

VOUS POURRIEZ AIMER

Frontend Windows 8, un petit pas pour le web, mais un grand pas pour ses développeurs.

Design Développement Frontend Outils Entre design et développement frontend [2/2]

Frontend categorizr.js et la détection de supports

Frontend dotJS : les Bonnes pratiques de développement selon John K. Paul

Frontend AngularJS et PopcornJS sont dans un bateau

Design Frontend Créer une sprite SVG

A propos d’Adfab

Nous sommes un studio de production digitales et d’innovation digitales au service des agences et des annonceurs
Nous recherchons le scintillement dans les regards et le plaisir de réalisations sur-performantes
Nous sommes techno-agnostiques
Nous sommes Adfab

Le blog d'Adfab
Copyright © 2018 Adfab Connect