Articles connexe avec d’autres astuces: [IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs.

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

Si 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, ou à la génération d’une image sprite au format SVG), ils se retrouvent quelque 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 être de très légèrement à très lourdement 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’incrustration de couleur. Pour ce cas, je l’annonce d’emblée: il n’existe pas de solution qui permettre 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 d’avantage 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?
• Convertir des tracés (strokes) en éléments pleins (fills)
• Les paramètres de sauvegarde des SVG pour intégration dans une police d’icônes
• 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
• Ré-exporter un SVG récalcitrant avec icomoon.io
• Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)

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, voir 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).

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

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

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ées CSS: Attributs de présentation
  • Positions décimales: 1
  • Codage: UTF-8
  • Produire moins d’éléments : sélectionner

Laisser le reste non sélectionné.

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.

Solution: à l’aide de l’outil Concepteur de forme d’Illustrator, créer 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.

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

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 :

Sélection des intérieurs de forme :

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) :

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, exporter le fichier SVG récalcitrant en cliquant sur Import Icons (barre du haut de page)
• Sélectionner l’icône pour export
• Cliquer sur Generate SVG & More (barre du bas de page)
• Cliquer sur Download (barre du bas de page)

Résoudre le problème des SVG multi-tranches (paths) et multicolores (multicolors)

Dans la capture ci-dessous, le picto est non seulement multi-tranches (paths) mais également multi « colors ». Deux éléments qui vont empêcher sa conversion et son intégration dans une police d’icônes. On devine notamment qu’il est multi-tranches car on a deux couleurs: le rose et le blanc. En effet, le blanc devrait être transparent.

Si on génère une police d’icônes avec ce type de fichiers, on va se retrouver à devoir placer de multiples éléments HTML dans le code pour pouvoir afficher l’icône dans son intégralité.

Source CSS

Source HTML (à la sauce AngularJS)

On voit également bien dans la source HTML que des informations de couleur sont présentes dans le DOM.

Supprimer les couleurs multiples du picto SVG

Source: Réduire le poids d’une image SVG : d’Illustrator à l’export final par Stéphanie Walter sur le site Alsacréations et notamment le paragraphe Travail sur les couleurs.

Version PDF de l’article pour la postérité: alsacreations.com-Réduire le poids dune image SVG dIllustrator à lexport final.

On peut aussi passer par l’appli en ligne icomoon.io. Il suffit d’importer son icône en cliquant sur Import icons (en haut à gauche, bouton mauve – cf.capture ci-dessous), puis de sélectionner l’icône fraichement importée via l’outil Select (picto blanc sur fond jaune dans la capture) et de cliquer sur les options de couleur (flèche rouge dans la capture). Vous pouvez ensuite, sous Color Themes cliquer sur la poubelle pour supprimer toutes les informations de couleurs du picto.

Supprimer les tranches multiples du picto SVG

Commencer par sélectionner View > Show tranparency grid pour remplacer le fond blanc par un fond transparent:

A ce stade, on voit qu’il reste du blanc en plein milieu du picto. Pour le supprimer (pour le remplacer par du transparent), nous allons utiliser l’outil Concepteur de forme d’Illustrator (entouré en rouge dans la capture ci-dessous) :

Group selection tool
maj + clic pour sélectionner tous les tracés
object > group

• How to make an area in illustrator transparent?
• How to make the inner shape transparent using the Illustrator

Autres ressources :

• 
  Free photoshop script: Export your vector layers from PS to SVG in a single click!
• Exporting SVG for the web with Adobe Illustrator CC _ Adobe Inspire Magazine