Styler contour dessin SVG

Bonjour,

Je ne comprends pas pourquoi je n'arrive pas à changer la couleur du contour de ce dessin .svg.

Vous pouvez le voir dans ce codepen quand la fenêtre fait moins de 1200 px de large.

Code de l'image :

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.52 43.07">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }

      .cls-2 {
        fill: none;
        stroke: #000;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 2.3px;
      }
    </style>
  </defs>
  <path id="Tracé_50" data-name="Tracé 50" class="cls-2" d="m11.08,12.95h32.29"/>
  <rect class="cls-1" x="32.82" y="30.96" width="2.3" height="5.32"/>
  <path class="cls-1" d="m39.29,32.1H13.4c-.55,0-1.02-.39-1.13-.92L6.49,2.3H1.15c-.64,0-1.15-.51-1.15-1.15S.51,0,1.15,0h6.28c.55,0,1.02.39,1.13.92l5.79,28.87h24.02l3.88-17.1c.14-.62.76-1.01,1.38-.87.62.14,1.01.76.87,1.38l-4.08,18c-.12.52-.58.9-1.12.9Z"/>
  <rect class="cls-1" x="16.95" y="30.96" width="2.3" height="5.76"/>
  <path class="cls-1" d="m19.25,34.7c-.33-.09-.68-.14-1.04-.14-.44,0-.86.07-1.26.19-1.73.54-2.99,2.16-2.99,4.06,0,2.35,1.91,4.26,4.25,4.26s4.25-1.91,4.25-4.26c0-1.98-1.37-3.65-3.21-4.11Zm-1.04,6.06c-1.08,0-1.95-.87-1.95-1.95s.87-1.94,1.95-1.94,1.95.87,1.95,1.94-.88,1.95-1.95,1.95Z"/>
  <path class="cls-1" d="m35.12,34.67c-.29-.07-.6-.11-.92-.11-.48,0-.95.08-1.38.24-1.67.57-2.87,2.15-2.87,4.01,0,2.35,1.91,4.26,4.25,4.26s4.25-1.91,4.25-4.26c0-2.02-1.43-3.72-3.33-4.14Zm-.92,6.09c-1.07,0-1.95-.87-1.95-1.95s.88-1.94,1.95-1.94,1.95.87,1.95,1.94-.87,1.95-1.95,1.95Z"/>
</svg>

Merci d'avance pour votre aide.

Hello,

Selon le type de tracé (path ou rect), il faut jouer sur la propriété stroke *ou* fill.
Donc si tu appliques les deux directement dans l'élément SVG ça passe :

<svg id="Calque_1" data-name="Calque 1" 
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44.52 43.07" 
fill="hotpink" stroke="hotpink">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 0px;
      }
      .cls-2 {
        stroke-width: 2.3px;
      }
    </style>
  </defs>
bla bla bla
</svg>

https://codepen.io/raphaelgoetter/pen/dPyLNdV?editors=1100

Attention : si ton SVG reste externe ("<img src="https://botega.fr/Panier.svg"...") alors les possibilités de modifier les styles sont beaucoup moins évidentes : il faudra certainement donner une valeur en dur dans le fichier, elle ne sera pas facilement modifiable à la volée (au survol ou en darkmode par exemple... même si ça reste possible)
Modifié par Raphael (06 Apr 2025 - 19:35)

Bonjour Raphaël,

Je veux modifier par la feuille CSS avec effectivement :hover et le mode DARK, donc 4 valeurs possibles pour les couleurs du contour.

Je préfère une image externe car je peux avoir jusqu'à 100 fois cette image sur la même page donc le SVG dans le code html devient un peu lourd.

J'utilise parfois cette image dans le code html avec le code suivant :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke="black" stroke-width="2.3" stroke-linecap="round" stroke-linejoin="round">
<path d="M1.2,2.2H7.6L13.5 32H39.3L43.3 14H10M18,32V36A3.5,3.5 0 0 1 18,43A3.5,3.5 0 0 1 18,36ZM34,32V36A3.5,3.5 0 0 1 34,43A3.5,3.5 0 0 1 34,36Z" />
</svg>

Dans ce cas je n'ai aucun problème pour styler le contour comme je veux.

#panier_mob > svg {width: 42px; height: 42px; stroke: var(--gris-fonce)}
#panier_mob > svg:hover {stroke: var(--noir)}
@media (prefers-color-scheme: dark)
{
#panier_mob > svg {stroke: var(--noir)}
#panier_mob > svg:hover {stroke: var(--super-couleur)}
}

Accessoirement si je fais un copier-coller du code svg pour créer une image externe cette image ne s'affiche pas (comme si elle n'existait pas).

boteha_2 a écrit :

Je préfère une image externe car je peux avoir jusqu'à 100 fois cette image sur la même page donc le SVG dans le code html devient un peu lourd.

Je comprends et j'ai plusieurs pistes et réponses...

1. Si ton SVG est externe (<img src="">) alors tu ne peux pas le modifier via CSS de manière générale, car CSS n'a pas d'emprise sur des éléments qui ne font pas partie de la page.

MAIS il y a tout de même deux astuces qui peuvent fonctionner :
- Appliquer des styles directement dans le fichier SVG via "<style="">" (tu pourras y appliquer tes styles au survol, au darkmode, etc.)... par contre les valeurs devront être en dur car ton fichier SVG n'a pas accès au variables CSS de ton projet.
- Utiliser un masque CSS, ce qui impose d'autres contraintes.

Ces deux astuces sont évoquées dans la partie "Darkmode" de nos guidelines (voir "Dark Mode et SVG inline" + "Dark Mode et SVG externe (on peut toucher au SVG)" + "Dark Mode et SVG externe (on ne peut pas toucher au SVG)") : https://github.com/alsacreations/kiwipedia/blob/main/guidelines/css.md#dark-mode

2. Si ton SVG est inline (inséré directement dans le HTML), alors tu peux tout manipuler en CSS.

Il y a une fonctionnalité très pratique en SVG pour cloner autant de fois que tu veux un tracé SVG juste en y faisant référence et sans avoir à répéter 100x le SVG global : c'est "use". Je te conseille de te renseigner sur le sujet : https://la-cascade.io/articles/utiliser-svg-use
Modifié par Raphael (06 Apr 2025 - 20:37)

Merci pour toutes ces pistes.

Styler l'image externe semble très facile.

Je vais aussi regarder use.

Je reviens au plus vite.

Un exemple vite fait de use : https://codepen.io/raphaelgoetter/pen/eYXBVjb

Merci pour l'exemple de use.

Je ne comprends pas à quoi sert l'élément <symbol> mais le résultat est là et il semble facile à copier.

Symbol est un tracé SVG qui est masqué et qui ne sert qu'à être cloné via use.

Raphael a écrit :
Symbol est un tracé SVG qui est masqué et qui ne sert qu'à être cloné via use.

C'est noté.

Encore merci de ton suivi.

Avec plaisir !

Il semble que la pseudo-classe :hover ne puisse pas être utilisée à l'intérieur du code de l'image SVG.

Je n'y suis pas arrivé et cette discussion chez stackoverflow donne des explications.

Reste la solution du code SVG dans le code HTML avec USE.
Modifié par boteha_2 (06 Apr 2025 - 22:14)

OK.

Si vraiment cela ne fonctionne pas comme tu veux avec use, voici la version en masques CSS : https://codepen.io/raphaelgoetter/pen/dPyLNdV?editors=1100

Bonjour Raphaël,

Merci pour le masque.

Je vais tester les deux solutions, je reviens vers vous.

Si tu patientes un peu, un guide détaillé devrait voir le jour bientôt sur Alsacréations.

Tu m'as motivé à plancher dessus