Préparer des sources SVG à leur intégration dans une police d’icônes

La création d'une police de caractères regroupant l'ensemble des icônes (et autres pictogrammes, etc...) à laquelle fait appel une charte graphique de site internet est devenue aujourd'hui quasiment incontournable tant le procédé se révèle bénéfique pour tous, et notamment à la différence d'un traitement via images au format PNG.

  • L'utilisation du format vectoriel permet la manipulation à loisirs des dimensions des icônes sans perte de qualité visuelle.
  • Ce format permet également d'agir facilement sur certaines caractéristiques visuelles des icônes via une pléthore de propriétés CSS (fond transparent, couleur, opacité, ajout d'une ombre portée, déformation, etc...).
  • Ce format permet aussi de diminuer considérablement le poids du/des médias chargés dans les pages.
  • Le chargement de la page s'en trouve dopé puisqu'on n'effectue plus qu'une seule requête serveur pour charger la totalité des icônes (bon OK, on pouvait déjà obtenir ce résultat en créant un sprite d'images).

S'il existe à l'heure actuelle plusieurs techniques permettant aux développeurs front-end d'industrialiser l'intégration de ces icônes (via des outils en ligne comme Icomoon, un plug-in Gulp comme Iconfont, ...), ils se retrouvent quelques fois freinés par des difficultés liées à la nature même des supports graphiques qu'on leur demande d'exploiter:

  • Les pictogrammes, bien que constitués de tracés vectoriels, doivent encore être retraités.
  • Les icônes ne sont pas fournies dans un format vectoriel, mais sous forme de bitmaps sur lesquels sont appliqués des effets d'incrustation de couleur. Pour ce cas, je l'annonce d'emblée: il n'existe pas de solution qui permette d'obtenir des icônes propres. Il faut travailler en vectoriel pour obtenir de la qualité.

Le but de ce billet est ainsi de fournir des solutions aux problèmes les plus fréquemment rencontrés avec les supports graphiques destinés à la création d'une police d'icônes. Avec notamment quelques astuces d'utilisation d'Adobe Illustrator que les développeurs front-end connaissent peu sachant qu'il s'agit davantage d'un outil destiné à la création de supports pour l'impression, mais qui se révèle être un outil incontournable lorsqu'il s'agit de manipuler des tracés vectoriels.

Comment recadrer une illustration aux seules limites du ou des tracés sélectionnés?

J'ai sélectionné un ensemble de tracés pour les copier/coller dans un nouveau fichier (typiquement pour l'isoler en vue de l'exporter au format SVG pour en faire un pictogramme ou une icône). Mon nouveau fichier ne tient pas compte des dimensions de mes tracés et comprend beaucoup de marges que je souhaite supprimer.

Pour ce faire, sélectionner simplement Objet > Plans de travail > Ajuster aux limites de l'illustration.

Convertir des tracés (strokes) en éléments pleins (fills)

Source : Icomoon.io docs - Converting Strokes & Text to Fills

La version actuelle de l'application Icomoon ignore les tracés. Mais on peut les convertir en éléments pleins via différents logiciels de création vectorielle. Il est à noter que j'avais également rencontré des difficultés de même nature en générant ma police d'icônes via le plugin Gulp Iconfont.

A l'import de fichiers SVG dans Icomoon comme via Gulp Iconfont l'icône n'est que partiellement, voire pas du tout, visible. La capture ci-dessous illustre le souci. Une icône similaire à été importée deux fois (mais il y a une différence de traitement à la source entre les deux fichiers, nous allons voir ça plus bas).

blog_201612_01

Ci-dessous, une capture en provenance d'Illustrator qui montre la différence, à la source, entre les deux icônes :

blog_201612_02

Pour convertir des tracés en éléments pleins sous Adobe Illustrator, choisir Objet > Décomposer. Il faudra peut-être sélectionner Objet > Décomposer l'aspect avant de pouvoir appliquer Objet > Décomposer.

Il est également possible qu'au moment de décomposer les tracés, Illustrator ouvre une fenêtre avec des cases à cocher Objet, Fond, Contour. Il faudra sélectionner uniquement Contour (cf. capture ci-dessous).

blog_201612_03

Les paramètres de sauvegarde des SVG pour intégration dans une police d'icônes

Sauvegardez votre fichier au format SVG avec les paramètres suivants:

  • Profils SVG: SVG 1.1
  • Polices > Type: SVG
  • Polices > Jeu partiel: Aucun (utiliser les polices système)
  • Options > Emplacement de l'image: Incorporer
  • Options avancées:
    • Propriétés CSS: Attributs de présentation
    • Positions décimales: 1
    • Codage: UTF-8
    • Produire moins d'éléments : sélectionner

Laissez le reste non sélectionné.

blog_201612_04

Utiliser l'outil Concepteur de forme d'Illustrator pour intégrer un tracé en 1er plan dans un tracé en arrière plan sous forme de pochoir/découpe

Ci-dessous l'illustration de l'effet attendu (présence d'une croix dans le cercle en bas à droite) et de l'effet obtenu après passage à la moulinette icomoon ou gulp-iconfont. Problème: les tracés qui constituent la croix sont ignorés.

blog_201612_05

Solution: à l'aide de l'outil Concepteur de forme d'Illustrator, créez une sorte de pochoir/découpe des tracés de 1er plan sur les tracés d'arrière plan. On voit clairement dans l'illustration ci-dessous que le cercle et la croix sont constitués de 3 tracés bien distincts. L'idée étant de n'avoir plus qu'un tracé unique.

blog_201612_06

Commencer par sélectionner l'outil Concepteur de forme dans le panneau d'outils de gauche :

blog_201612_07

Placez le curseur sur un tracé de 1er plan que vous souhaitez incruster dans l'arrière plan et en maintenant la touche Alt gauche enfoncée et cliquez sur l'ensemble des tracés (contours et intérieur de forme) sur lesquels vous souhaitez agir (le curseur doit afficher un caractère -, cf. illustrations ci-dessous).

Sélection des contours :

blog_201612_08

Sélection des intérieurs de forme :

blog_201612_09

Au final, le tracé doit ressembler à ceci (petite subtilité dans notre exemple, il y a encore un tracé derrière le cercle que nous allons pouvoir supprimer de la même manière) :

blog_201612_10

Ré-exporter un SVG récalcitrant avec icomoon.io

L'application de génération d'une police d'icônes à partir de fichiers SVG procède, à l'upload des sources, procède à des traitements qui peuvent permettre dans certains cas de nettoyer les fichiers les plus récalcitrants. Pour exemple, j'avais une icône (déjà précédemment retraitée sous Illustrator avec les différentes techniques énoncées dans ce billet) qui m'ajoutait, après génération d'une police via gulp-iconfont, une marge importante sous l'élément. Cette marge n'était pas présente dans le SVG source. L'inclusion de cette marge décalait l'ensemble des icônes de la police générée.

  • Dans l'app en ligne icomoon.io, exportez le fichier SVG récalcitrant en cliquant sur Import Icons (barre du haut de page)
  • Sélectionnez l'icône pour export
  • Cliquez sur Generate SVG & More (barre du bas de page)
  • Cliquez sur Download (barre du bas de page)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.