Changer la couleur des icônes Escal avec Inkscape

Le format svg, mais encore ?

Le format des images vectorielles, ou svg (Scalable Vector Graphics), est basé sur le langage XML, comme les fichiers des suites bureautiques ou encore le format epub des livres électroniques. Une image vectorielle est une succession de points dont les coordonnées sur la « page » sont enregistrées. Cela permet d’avoir des images faciles à modifier et que l’on peut agrandir ou rétrécir sans distorsion. C’est le format idéal de conception des icônes et autres logos. En revanche, c’est un format tout à fait inadapté pour les images de type photo car, compte tenu du très grand nombre de points (et donc de coordonnées) que cela génère, le poids des fichiers informatiques qui en résulte est très élevé.

On peut générer et travailler des documents au format svg avec plusieurs logiciels, le plus connu étant probablement le logiciel libre Inkscape.

Pour rappel, les images png ou jpg sont appelées images matricielles, ou bitmap, et sont basées sur le pixel, ce qui fait qu’il n’est pas possible sans distorsion de les agrandir ou de les diminuer de beaucoup et que changer les couleurs est un processus qui peut être délicat et complexe selon le type d’illustration.

Sur les icônes dans escal

Elles sont dans le dossier du plugin Escal. Vous trouverez la liste dans le même dossier dans un fichier au format ods (format ouvert de feuille de calcul), 2-liste-icones-svg.ods, ainsi que les codes de couleur utilisées par les icônes. Ça en facilite la gestion.

Les icônes personnalisées (ou d’autres que vous aurez dessinées à la place), doivent impérativement se trouver dans le dossier images du dossier squelettes du site avec exactement le même nom.

NB : inutile de les modifier toutes, il n’est nécessaire de modifier que celles dont vous vous servez.

Modifier les couleurs avec Inkscape

Ouvrir un fichier, dans l’exemple j’ai choisi imprimer.svg. Ce fichier est composé de plusieurs éléments qui sont groupés, ce n’est pas forcément le cas de tous. Certains éléments ont un fond, d’autres non, on va donc les dégrouper pour les travailler séparément pour ce tutoriel.

Clic-droit dessus ①, aller sur Dégrouper ② : tous les éléments deviennent entourés de filets de sélection ③.

Sélectionner un élément, aller sur Objet > Fond et contour (raccourci Maj + Ctrl F) ①. Cliquer sur l’onglet de ce qui doit être modifié, si vous avez le code RVB, entrez-le dans les cases adéquates. Le code hexadécimal se rentre au niveau de RVBA sans le signe # du début et avant les deux « f » finaux qui indiquent le niveau d’opacité. Vous pouvez aussi choisir dans une palette spécifique ②. Pour l’afficher, menu Affichage > Palette (Maj + Ctrl + W).

Et voilà le travail ! En moins de temps qu’il n’a fallu pour rédiger ce tutoriel.

Changer une couleur avec un éditeur de texte

Le format svg étant basé sur le XML, le concepteur d’Escal signale qu’on peut aussi modifier en un bloc une couleur de toutes les icônes avec un éditeur de texte.

Les copier, en local, dans un dossier différent de celui du plugin (par exemple dans le dossier squelettes/images) et d’utiliser les fonctions Rechercher et remplacer de l’éditeur de texte.

Remplacer toutes les occurrences du bleu Escal #336699 par le code hexadécimal de votre couleur. Refaire éventuellement l’opération pour les autres couleurs. Le fichier 1-icones-escal.svg où vous retrouverez l’ensemble des icônes, vous permet de voir ce qui est à faire et, bien entendu, celui avec la liste des icônes et les spécifications vous donne le nom des fichiers concernés et le code des couleurs.

Dans Notepadqq, pour définir le chercher et remplacer, aller sur Rechercher dans les fichiers (qui ne sont pas ouverts), cliquer sur le bouton à droite de Regarder dans et aller chercher le dossier concerné. Dans Filtre, saisir le type de fichier sous cette forme *.svg.

Notepadqq étant très similaire visuellement de Notepad++ [1], vous devriez avoir des boites de dialogues équivalentes.

Si vous utilisez Bluefish [2], il va falloir sélectionner Fichiers sur le disque dans la Zone de recherche, indiquer, comme précédemment, le type de fichier dans Modèle de nom de fichier et saisir avec vos petits doigts l’adresse du Répertoire de base.

Évidemment, une fois le travail fait, si vous aviez mis les icônes dans un endroit à votre convenance, il faut impérativement les ajouter au sous-dossier images de votre dossier squelettes, que ce soit en ligne ou en local. Sinon, vous ne verrez aucun changement sur le site.

Pour aller plus loin

• Le site du squelette Escal ;
• la page d’Escal sur SPIP-Contrib ;
• les palettes de couleur dans Inkscape ;
• le site d’Inskcape ;
• le guide Initiation à Inkscape, FlossManuals.