Modification des pictogrammes : remplissage automatique

[babastienne]

Geotrek-Rando a la particularité de modifier les pictogrammes envoyés par Geotrek-Admin. Problème : cela ne permet pas d'obtenir un résultat d'affichage conforme au design initial uploadé par les utilisateurs.

Par exemple lorsqu'un territoire upload le picto suivant :

Cela donne le résultat suivant dans Geotrek Rando :

---

Ce qu'il faudrait c'est que la couleur soit surchargée sans qu'un remplissage soit pour autant ajouté car la majeur partie du temps si un territoire envoi un picto sans remplissage c'est justement qu'il ne souhaite pas de remplissage.

[babastienne]

Le problème est lié à l'attribut du fichier svg fill qui est surchargé peu importe sa valeur. Ainsi si l'attribut possède la valeur none, il est surchargé. Il faudrait pour respecter les bonnes pratiques web qu'il ne soit surchargé que si la valeur de l'attribut comporte currentColor.

[dtrucs]

Plusieurs chantiers à mettre en place.

Corriger les remplacements de fill :

Actuellement si les pictogrammes SVG possèdent une propriété fill (ex: <circle style="fill: red" />), sa valeur est remplacée automatiquement par l'app (le plus souvent par du blanc) et le remplacement ne se fait pas s'ils possèdent un attribut fill (ex: <circle fill="red" />)
Parfois cette couleur blanche est surchargée à nouveau, comme dans les filtres de recherches où elle prend une couleur grise, ou primary1 si activée. Ici la surchage se fait en CSS et force le fill de tous les éléments du SVG.

Le premier correctif à mettre en place soulevé par @babastienne est d'ignorer les fill avec la valeur none ou transparent dans les remplacements de valeur, de tenir compte des attributs fill, et de changer la stratégie de surcharge par CSS (car le CSS ignore le contenu du SVG et force le fill).

Appliquer les remplacements de stroke :

Aujourd'hui, il n'y a aucune surcharge liées aux contours des objets (stroke): Par exemple on peut imaginer une roue de vélo avec un fill: none et un stroke défini.
Le second correctif consiste à gérer les stroke avec les mêmes règles que les fill.

Définir un fill par défaut si aucun fill ou stroke n'est défini sur l'élément :

Si l'élément n'a pas de fill/stroke, il sera peint en noir, en appliquant un fill: currentColor par défaut sur l'élément permettra une surcharge de la couleur par l'app.

Inliner les styles :

Étant donnée qu'il est possible de définir des feuilles de styles dans les SVG et que les SVG sont intégrés tel quel dans la page, il peut y avoir un conflit de CSS (voir #944), il convient d'inliner les SVG pour chaque élément du SVG.

[dtrucs]

Fonctionnalité mise en place avec la version 3.15.0.