Créer une police couleur SVG

  • by Rainer Erich Scheichelbauer
  • Tutorial

Si vous cherchez le mot SVG, vous allez découvrir qu’il s’agit d’un sigle en anglais qui signifie Scalable Vector Graphics. Jusqu’ici tout va bien, mais lorsque nous utilisons le terme dans le royaume des fontes, SVG peut vouloir dire plusieurs choses.

Le format de police SVG

Je commencerai en précisant que SVG existait auparavant comme format de fichier de police web. Les suffixes de nom de fichier étaient .svg et .svgz (le zip compressé). Vous pouvez oublier ce SVG car il n’était supporté que dans le Safari des premiers iPhone. Par chance, ce format a maintenant disparu. Il était énorme comparativement aux autres formats de polices, et il n’offrait rien d’autre que de simples contours. Ce qui voulait dire: pas de crénage, ni de hinting, et encore moins toutes ces bonnes choses que les tables OpenType peuvent procurer. En d’autres mots, ce n’était même pas une police OpenType. Glyphs est un éditeur de polices OpenType, et par conséquent il ne peut pas produire ce type de polices SVG.

Ce tutoriel n’est pas à propos du format révolu de fichier SVG.

The SVG OpenType table

Les formats de fontes web en usage courant aujourd’hui sont WOFF et WOFF2; ce dernier gagne tranquillement du terrain. C’est plus complexe que cela bien entendu, mais pour faire bref, les WOFF sont des polices OpenType compressées. Apparentés, les formats de bureau CFF/OTF et TTF, sont aussi des formats OpenType, qui se partagent la singularité de ne pas très bien se compresser en WOFF. Ce qui fait des polices OpenType des polices OpenType, est leur structure interne, c’est-à-dire une collection de tables OpenType, et une de ces tables peut être la table SVG, qui contient l’information basée sur les SVG. Les polices contenant une telle table SVG sont parfois référées comme polices couleur OpenType-SVG ou fonte couleur SVG (les mots fonte et police sont utilisés de façon interchangeable dans ce contexte).

Ce tutoriel est à propos des polices couleur OpenType-SVG.

Dans Glyphs, il y a deux façons d’intégrer l’information SVG dans une police: (A) à partir de fichiers d’images .svg séparés, ou (B) à partir d’un réglage existant d’une police couleur. Cette dernière peut être soit une police faite de calques sur différents masters, soit une police CPAL/COLR avec des calques Color indexés, ou encore une police sbix de style Apple avec des calques iColor.

Option A: à partir de fichiers d’images SVG

Si vos documents graphiques SVG se trouvent déjà dans des fichiers séparés, vous pouvez les placer dans les glyphes respectifs, et exporter la police avec une table SVG. Cette méthode vous permet de profiter pleinement des capacités du format de fichier SVG, ce qui inclut les trucs fous comme les animations vectorielles.

Pour vous préparer, nous vous recommandons de sauvegarder votre fichier .glyphs à l’emplacement désiré, et de l’accompagner d’un sous-dossier nommé Images pour les fichiers SVG. Comme seulement les tracés relatifs aux images sont stockés dans le fichier .glyphs, les fichiers SVG doivent être faciles à localiser, et il est plus facile de garder votre .glyphes avec les SVG quand ces derniers se trouvent dans un sous-dossier.

Bon, passons maintenant à un exemple. Essayons de créer l’animation d’un cercle rouge en rotation pour le O. Sélectionnez et copiez (Cmd-C) ce code SVG:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="1000" height="1000" viewBox="-400 -400 800 800">
 <title>SVG animation using SMIL</title>
 <circle cx="0" cy="100" r="200" stroke="none" fill="red">
  <animateTransform
   attributeName="transform"
   attributeType="XML"
   type="rotate"
   from="0"
   to="360"
   begin="0s"
   dur="1s"
   repeatCount="indefinite"></animateTransform>
 </circle>
</svg>

Collez-le (Cmd-V) dans une nouvelle fenêtre d’un éditeur de texte en clair de votre choix, comme TextMate, SublimeText ou Atom.

Sauvegardez ensuite le fichier dans le fichier Images sous le nom O.svg. Dans le Finder, vos fichiers devraient ressembler à ceci:

De retour dans votre fichier .glyphs, préparez le O. Ouvrez-le dans le mode Édition, et dans la palette Calques, cliquez le bouton Copier afin d’ajouter un calque copie, et changez ensuite son nom pour svg. Une fois fait, cela devrait ressembler à ceci:

Voici maintenant la situation: ce que vous placerez dans le calque master sera la version noir et blanc du glyphe dit fallback, qui est visible dans les logiciels qui ne peuvent afficher l’information couleur stockée dans la table SVG. Au cas où vous vous le demanderiez, le calque master est celui dont le texte est en gras dans la palettte Calques, le ‘Regular’ dans notre exemple.

Par contre, dans le nouveau calque svg, vous pouvez glisser-déposer votre fichier image .svg. Il devrait être immédiatement affiché. Par contre, vous ne verrez pas l’animation. Vous pouvez ajuster l’échelle et déplacer l’image comme bon vous semble:

Note au sujet de l’espacement: le calque svg hérite sa chasse du calque master. Il vous faut donc aller sur le calque master si vous voulez espacer votre glyphe. Dans notre exemple, 800 est un réglage approprié pour la chasse, en tenant pour acquis que vous n’avez pas changé l’échelle ni déformé le SVG lorsque vous l’avez placé. Pour régler la chasse, cliquez sur le calque Regular dans la palette Calques, et réglez la chasse à 800 dans la boîte grise d’informations:

Exportez maintenant la police comme fonte web: Fichier > Exporter > Webfont, et sélectionnez les deux formats WOFF et WOFF2. CFF ou TrueType ne devrait pas faire de différence:

Sur Mac, Firefox est le seul navigateur qui supporte les polices OpenType-SVG. Sur Windows, Microsoft Edge les supporte aussi. Ce sont donc les deux navigateurs que vous devrez utiliser pour tester votre police OpenType-SVG. À cet effet, vous pouvez soit bricoler un fichier HTML contenant les codes HTML et CSS pour afficher le WOFF, soit exécuter le script Test > Webfont Test HTML du répertoire de scripts de mekkablue. Ce script crée un fichier HTML pour la police courante dans la destination de police web la plus récemment utilisée.

Si vous n’êtes pas encore familier avec les scripts, prenez une minute pour parcourir les instructions d’installation dans le fichier readme des scripts, et suivez ces instructions pour installer le script. Tenez ensuite la touche Option enfoncée tout en sélectionnant Script > Recharger les scripts (Cmd-Opt-Shift-Y).

Le script, efficace, ouvre pour vous le dossier joint contenant votre police de caractères. Tout ce qu’il vous reste à faire maintenant est de faire glisser le fichier HTML sur l’icône Firefox de votre Dock (ou encore faites un clic droit et sélectionnez Ouvrir avec > Firefox*), tapez un O, et voilà:

Tadaaam! Mais soyez prudent, ces animations de polices ont tendance à être exigeantes pour les processeurs, ce qui peut rendre les ventilateurs d’ordinateur fous, et les utilisateurs nomades auront des sentiments partagés à propos de votre police qui vide leur batterie. Vous aurez été prévenu!

Option B: à partir d’une police couleur existante

Vous pouvez faire votre police SVG à partir d’une police calque sur plusieurs masters, ou d’un réglage CPAL/COLR avec calques indexés (aussi connu en tant que police couleur Microsoft), ou encore d’une police de style Apple-sbix.

Dans le cas d’une CPAL/COLR: suivez les étapes du tutoriel. Assurez-vous d’avoir défini le réglage Color Palettes dans la section Paramètres personnalisés de Fichier > Informations de police > Masters, et d’avoir numéroté les calques Color dans les glyphes, c.-à-d., Color 0, Color 1, Color 2, et ainsi de suite. (Si vous voulez avoir différentes couleurs dans votre SVG, considérez un paramètre Color Palette for SVG. Cela permet de spécifier une palette de couleur personnalisée pour l’instance.)

Dans le cas d’une police calque: suivez les étapes du tutoriel. Assurez-vous d’avoir défini les couleurs avec le paramètre Master Color dans Fichier > Informations de police > Masters.

Dans ces deux cas: dans Fichier > Informations de police > Instances, créez une nouvelle instance pour la police contenant la table SVG. Donnez-lui un nom de style comme Régulier ou Multicolore ou SVG; quelque chose qui a du sens pour vous. Ajoutez ensuite un paramètre personnalisé Color Layers to SVG à votre nouvelle instance, et assurez-vous que sa Valeur est activée:

Dans le cas du sbix: suivez les étapes du tutoriel. Créez une nouvelle instance dans Fichier > Informations de police > Instances, et ajoutez ensuite un paramètre personnalisé SBIX to SVG avec votre taille iColor préférée comme valeur; les images sbix des calques iColor du même index de taille seront transformées en documents graphiques SVG. P. ex., si vous spécifiez 256 comme valeur dans le paramètre personnalisé, Glyphs cherchera tous les calques iColor 256 et en fera des SVG.

Maintenant, exportez avec Fichier > Exporter > Webfont (Cmd-E). Ça y est, c’est tout. Testez la police dans Firefox en suivant l’option A ci-dessus.

D’autres paramètres personnalisés

Dans Fichier > Informations de police > Instances (Cmd-I), sous Paramètres personnalisés, vous pouvez ajouter n’importe lequel de ces trois paramètres:

  • Export COLR Table
  • Export SVG Table
  • Export sbix Table

Ils servent à indiquer quelles tables de couleur seront générées et intégrées dans la police OpenType, et lesquelles ne le seront pas. Afin de réduire la taille des fichiers de polices web, vous pourriez choisir de n’activer qu’une seule de ces tables. Par exemple, si vous utilisez la méthode détaillée dans l’option B pour exporter une table SVG basée sur le réglage CPAL/COLR, vous pourriez omettre la création de la table COLR.

Davantage à propos des SVG

Nous n’avons fait qu’effleurer la surface. Pour vous en donner à cœur geek sur les SVG et leurs possibilités, creusez dans les spécifications et les codes modèles:

Au moment de la mise en ligne du présent tutoriel, la table SVG était supportée sur Firefox, Windows 10+ et les applis Adobe.


Mise à jour 2017-01-20: Ajout de Microsoft Edge à la liste des navigateurs qui supportent SVG.
Mise à jour 2018-03-26: Ajout de la conversion sbix à SVG.
Mise à jour 2018-04-14: Mise à jour du support SVG par les applis OS; merci Behdad!
Mise à jour 2019-02-01: Correction d’erreurs orthographiques et remplacement dans la version anglaise du mot brothers par siblings. Merci Nathalie!

Traduction française de Nathalie Dumont.