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.