Changer la couleur des icônes Escal avec Inkscape

Depuis la version 4.2.62, les icônes et logos du squelette Escal pour SPIP sont toutes au format vectoriel svg et plus comme, auparavant soit en gif, soit en jpg, voire en png. Si on ne se sent pas les capacités d’en créer ou trouver d’autres, on peut changer facilement leurs couleurs avec Inkscape pour les mettre dans la tonalité du site.

Rappel, caractéristiques du format svg

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.

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.

Icônes des fichiers svg et catalogue
ID 2019

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 .

Fond et contour
Deux façons de modifier le fond et le contour d’éléments dans Inkscape.
ID 2019

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

Fond et contour
Deux façons de modifier le fond et le contour d’éléments dans Inkscape.
ID 2019

Et voilà le travail !

Icône d’imprimante multicolore
ID 2019

Changer une couleur avec un éditeur de texte

Le format svg étant basé sur le XML, on peut aussi modifier en une fois 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 ou #369 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.

Rechercher et remplacer dans Notepadqq
En indiquant un nom de dossier et un type de filtre dans Notepadqq, on opère à un remplacement global.
ID 2019

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

Si vous utilisez Bluefish, 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 l’adresse du Répertoire de base.

Bluefish, chercher et remplacer
Dans Bluefish, la recherche globale se fait au niveau de Zone de recherche.
ID 2019

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.

En complément

Discussion

Une discussion

  • Bonjour,

    Utilisant le menu vertical dépliant (bloc de gauche), je constate que les pictogrammes / icônes sont de la couleur bleue (celle par défaut d’Escal).
    Sur ce fil de discussion, vous expliquez comment changer l’ensemble des couleurs de ces icônes.
    Problème : je ne vois pas sur « FilleZilla » ce fameux dossier/ Plugin « Escal ».
    Normal ?
    Y a-t-il une autre solution ?
    Remerciements
    Salutations

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom