Étiquette : police

[Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes

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?

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

icomoon-incomplete_icon

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

icomoon-illustrator

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

illustrator-decomposer

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

illustrator_svg_export

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.

pochoir_00

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.

pochoir_01

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

pochoir_02

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 :

pochoir_04

Sélection des intérieurs de forme :

pochoir_04b

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

pochoir_05

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

Autres ressources :

[CSS] hack @font-face – les bonnes pratiques

Source : Font Face Best Practices Guide for 2013

Billet créé suite à des problèmes d’affichage des polices sous iPhone 5 et autres supports iOS utilisant un navigateur webkit.

Note : il est préférable de consigner le code ci-dessous dans des feuilles de style plutôt qu’imbriqué dans une balise <style type="text/css" /> dans du code HTML.

[IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs

Article connexe avec d’autres astuces: [Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes.

SVG Cleaner

Batch, tunable, crossplatform SVG cleaning program : SVG Cleaner sur github.com.

Une version executable à télécharger sur Sourceforge.

Export your vector layers from PS to SVG in a single click!

Free photoshop script: Export your vector layers from PS to SVG in a single click!. What this Photoshop script does:

This script, once activated, exports all vector layers named with “.svg” at the end of the layer name as SVG files, along with their shape and color attribute.
No more slicing SVGs one by one like a caveman. Finished preparing your layers? Boom!

Exporter une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks CS6 et l’ajouter à une police d’icônes générée à l’aide de l’App Icomoon

Remarque : Photoshop CC 2015 ne permet pas d’export au format *.ai :/

Problème :

Si pour x raison(s), le fait :

  1. d’enregistrer une icône constituée d’un ensemble de tracés vectoriels au format *.ai depuis Fireworks,
  2. d’ouvrir ensuite le fichier sous Illustrator pour le ré-enregistrer au format *.svg
  3. et d’importer, pour finir, ce fichier dans son nouveau format depuis l’App Icomoon…

…n’affiche pas du tout l’icone comme elle devrait, suivez la procédure ci-dessous :

Solution :

  1. Dans Fireworks, à l’aide de l’Outil Pointeur, sélectionner l’ensemble de tracés vectoriels qui constituent votre icône.
    fw-exporter copie
  2. Ctrl+c pour copier vos tracés, Ctrl+n pour créer un nouveau document. Dans la modale « Nouveau document » qui s’ouvre, dans la section « Couleur de la zone de travail », sélectionner « Transparente » puis bouton « OK ».
  3. Ctrl+v pour coller vos tracés dans le nouveau document.
  4. Menu « Fichier > Enregistrer sous ». Choisissez comme format de sortie (« Type ») « Illustrator 8 (.ai) » puis bouton « Enregistrer ».
  5. Rendez-vous sur : Zamzar – Conversion de AI à SVG en ligne et gratuitement. On ne va pas utiliser Illustrator pour convertir au format *.svg notre icône fraîchement exportée depuis Fireworks au format *.ai.
  6. Suivre les étapes 1 à 4. Utiliser une adresse e-mail jetable (yopmail.com fonctionne bien avec Zamzar) pour récupérer votre icône au format *.svg.
  7. Vérifiez vos mail : un lien pour télécharger une icône immédiatement exploitable avec l’App Icomoon vous y attend.
  8. Pleurez de joie, voilà c’est fini !

Après import, l’icône n’est que partiellement, voir pas du tout, visible dans IcoMoon

Edit 6 août 2022: pour ce problème avec des icônes issues de Figma, voir ici: Convert strokes to vector objects.

Source : http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/.

Problème :

A l’import du fichier svg dans IcoMoon l’icône n’est que partiellement, voir pas du tout, visible. La capture ci-dessous montre le problème. La même icône à été importée deux fois (mais il y a une différence entre les deux fichiers, nous allons voir ça plus bas).

icomoon-incomplete_icon

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

icomoon-illustrator

Solution :

Afin que l’ensemble des éléments vectoriels qui constituent une même icône soient importés dans IcoMoon, il faut pouvoir sélectionner non pas les tracés mais les contours de celle-ci. On voit dans la capture de gauche que ce sont (sauf pour la serrure) des tracés qui sont sélectionnés. Dans la capture de droite, ce sont les contours qui sont sélectionnés.

Pour ce faire, sélectionner l’ensemble des tracés à l’aide de l’outil Lasso ou de l’outil Baguette Magique puis Objet > Décomposer.

Transformer un SVG en icône à l’aide d’icomoon génère des tranches (paths) multiples au sein d’un seul et même glyphe

Source : SVG to Ico using icomoon generates multiple path instead of single object glyph.

Problème :

Exemple de fichier CSS généré pour une icône unique :

Ce problème intervient lorsque les tracés SVG importés embarquent plusieurs couleurs. Les icônes au sein d’une police ne peuvent contenir qu’une seule couleur par défaut.
Pour « traduire » des icônes multicolores via CSS, Icomoon crée plusieurs calques qu’il superpose. Ces glyphes nécessitent ainsi plus d’un seul caractère et ne peuvent avoir de ligatures.

Solution :

Pour éviter les glyphs multicolores, il faut ré-importer la source SVG après avoir réduit son nombre de couleurs à une seule. On peut pour ce faire tenter ce convertisseur en ligne : PicSvg – Convertir une image en Svg .

Solution #2: on le corrige à la main (comme les vrais) à l’aide d’Illustrator

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

Paramètres de sauvegarde des SVG pour création d’une police d’icônes :

Save your file as SVG with the following settings:

  • SVG Profiles: SVG 1.1
  • Fonts Type: SVG
  • Fonts Subsetting: None
  • Options Image Location: Embed
  • Advanced Options:
    • CSS Properties: Presentation Attributes
    • Decimal Places: 1
    • Encoding: UTF-8
    • Output fewer elements: check

Je n’ai aucun outil de type Illustrator/Fireworks à disposition et j’ai déjà une icône au format SVG, mais elle comporte plusieurs calques et/ou couleurs qui empêchent d’obtenir un résultat optimal en police d’icônes.

Utiliser la moulinette http://picsvg.com/fr.php pour ‘nettoyer’ vos SVG. L’outil est conçu à la base pour convertir un JPG ou un PNG en SVG mais permettrait aussi, dans certains cas, de rendre un SVG propre à la conversion en police d’icônes. A tester, surtout si vous ne disposez d’aucune appli pour retoucher vos sources.