Les icônes SVG dans SPIP

Ce document propose quelques recommandations pour les éléments graphiques (icônes SVG) utilisées dans l’interface SPIP.

Nommage

Pour un plugin, on garde la compatibilité SPIP 3 / SPIP 4 en gardant les versions PNG pour SPIP 3 et la version SVG pour SPIP 4 dans le même dossier :

  • Les versions PNG sont suffixées par leur taille : par exemple monicone-32.png
  • La version SVG est suffixée par -xx (qui a un signification de joker : format à préférer s’il est le fichier est présent et que l’on est sur un SPIP 4) : monicone-xx.svg
  • Le paquet.xml doit faire référence à la version png, mais la version -xx.svg sera automatiquement préférée si elle est présente.

Taille

  • Plan de travail (viewbox) : 64x64px

Les fichiers SVG doivent avoir width et height à 64px et viewBox="0 0 64 64".

  • Zone de sécurité : laisser 2px en bordure
  • Épaisseur des traits :
    • Avoir les traits de la même largeur sur une même figure.
    • Les figures principales doivent avoir au minimum 6px de large (5px toleré)
  • Grille : Essayer de tomber sur des valeurs entières sur la grille pour un meilleur affichage en petite taille
  • Chevauchement : Éviter le chevauchement des zones graphiques de couleurs différentes

Convention de code / ’PSR’

Nettoyer le code SVG avec https://jakearchibald.github.io/svgomg

  • Déclaration : préciser le viewbox et width / height
  • Ne pas donner un id au calque sauf nécessaire
  • Essayer de mettre l’attribut fill en premier pour les éditer facilement et les voir facilement sur les diff.
  • Eviter si possible la balise <style> et privilégier les styles en ligne via l’attribut fill

Exemple

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64">
  <path fill="#fff" d="M13.3 10.7H24V16H13.3zM40 26.7h10.7V32H40zM40 48h10.7v5.3H40z"/>
  <path fill="#666" d="M26.7 5.3c1.5 0 2.7 1.2 2.7 2.7v10.7c0 1.5-1.2 2.7-2.7 2.7h-5.3v5.3h13.3V24c0-1.5 1.2-2.7 2.7-2.7h16c1.5 0 2.7 1.2 2.7 2.7v10.7c0 1.5-1.2 2.7-2.7 2.7h-16c-1.5 0-2.7-1.2-2.7-2.7V32H21.3v16h13.3v-2.7c0-1.5 1.2-2.7 2.7-2.7h16c1.5 0 2.7 1.2 2.7 2.7V56c0 1.5-1.2 2.7-2.7 2.7h-16c-1.5 0-2.7-1.2-2.7-2.7v-2.7h-16c-1.5 0-2.7-1.2-2.7-2.7V21.3h-5.3c-1.5 0-2.7-1.2-2.7-2.7V8c0-1.5 1.2-2.7 2.7-2.7h16.1zm24 42.7H40v5.3h10.7V48zm0-21.3H40V32h10.7v-5.3zM24 10.7H13.3V16H24v-5.3z" />
</svg>

Recommandations

  • Privilégier le flat design
  • Éviter les contours
  • Éviter les dégradés
  • Icône en 2D (pas de 3D)
  • Icône "éthique" (cf charte SPIP)

A lire aussi : Règles pour la cohérence entre les icones : design better icons

Icônes

Le jeu d’icônes Remix Icon https://remixicon.com/ peut servir de base pour construire de nouvelles icônes.

La plupart des icônes du noyau a été créée à partir de ce jeu d’icônes.

Palette

NomUtilisation/ActionValeurIcône exemple
Bleu "Kermesse" Accent - élément signifiant #1d83d4 config-contenu-xx.svg
 
Gris "Conquet" Contour - élément de base #666 article-xx.svg
 

Palette secondaire

NomUtilisation/ActionValeurIcone exemple
Bleu "Edgard" #80E1E5 groupe_mots-xx.svg
 
Rose "Jennifer29" Favori #E895B7 groupe_mots-xx.svg
 
Rouge "Shiraz" Danger #F43737 diff-xx.svg
 
Vert "Trap" Ajouter #4CAF50 article-add-24.svg
 
Vert "Troglo" Action #119914 media-audio.svg
 
Jaune "Noisette" #ffde47 rubrique-xx.svg
 
Jaune "Maroilles" Plugin #ffbf00 plugin-xx.svg
 
Orange "Ramen" #d86600 traduction-xx.svg
 
Marron "SVP" Archive/dépot #a37800 depot-xx.svg
 
Gris "Lille" #d3d3d3 mediabox-xx.svg
 
Gris "Souris" Ombrage #888 rubrique-xx.svg
 

Il est fortement déconseillé d’utiliser la couleur Noir #000000 qui se distingue trop dans le jeu des icônes colorés.

Outils SVG en ligne

optimiseur de code SVG https://jakearchibald.github.io/svgomg/
éditeur de SVG https://editor.method.ac/

Apercu

En Avril 2021

Compléments

Plusieurs jeux d’icônes et design systems ont été listés sur cette page du Carnet Wiki

Auteur erational, JLuc Publié le : Mis à jour : 10/01/23