[Résolu] Styler contour dessin SVG

(reprise du message précédent)

"Use" fonctionne au sein d'un SVG, tu ne peux pas l'utiliser directement dans HTML.

<svg><use href="#pan" /></svg>

Hello,

boteha_2 a écrit :
Je l'ai mis le plus bas possible.

Figure-toi que tu peux même le garder en fichier externe (j'ai appris ça en rédigeant le tutoriel qui va sortir aujourd'hui).

boteha_2 a écrit :
J'ai un input type="radio" non associé à un label for.
Cet input est devenu invisible et recouvert par l'image du panier.
Un javascript le transforme en bouton de soumission.

Qu'en pensez-vous ?

Alors comme ça j'ai du mal à me représenter. Mais de manière générale quand une icône est placée dans un bouton, voilà la bonne pratique :
- l'icône est décorative (aria-hidden=true sur le SVG et surtout pas de role=img)
- c'est le bouton qui transmet l'information d'action (texte dans un span masqué sauf pour les lecteurs d'écran, OU aria-label sur ce bouton... mais pas sur le SVG)

EDIT : j'avais raté cette partie "J'ai un input type="radio" non associé à un label for."
Il te faut absolument un label associé à ton input, au pire tu le masques sauf pour les lecteurs d'écran. Du coup je comprends encore moins la transformation en bouton submit.

EDIT : l'article est publié : https://www.alsacreations.com/tuto/lire/1944-appliquer-des-styles-css-a-svg.html
Modifié par Raphael (10 Apr 2025 - 12:01)

Bonjour Raphaël,

J'ai lu ton tuto, comme toujours très clair et complet.

Raphael a écrit :
j'avais raté cette partie "J'ai un input type="radio" non associé à un label for."
Il te faut absolument un label associé à ton input, au pire tu le masques sauf pour les lecteurs d'écran. Du coup je comprends encore moins la transformation en bouton submit.

Mon projet est tordu.
Un produit existe en plusieurs versions.
Comme on le voit sur le codepen, en version grand écran (+ de 1200 px dans le codepen) la version est sélectionnable par un input type= radio et il devrait y avoir sous la liste un bouton "Ajouter au panier".
Sélection + Bouton -> Page panier où tu peux fixer la quantité
Sur petit écran, quand tu as beaucoup de versions chercher le bouton "Ajouter au panier" sous la liste n'est pas forcément évident.
En version mobile je me demande si une autre approche n'est pas plus ergonomique. La case à cocher est remplacée par l'image d'un panier, cliquer sur le panier suffit à ajouter la version au panier.
Clic sur icône panier -> Page panier où tu peux fixer la quantité.
Un javascript transforme l'input en bouton de soumission.

Je poursuis les essais et ma religion n'est pas faite.
Je vais peut-être rester sur la liste avec input tyoe="radio" quelle que soit la taille de l'écran.

Autrement la colonne caractéristiques pourrait être utilisée comme label pour l'input, il me semble que j'avais trouvé un inconvénient mais j'ai oublié lequel.

Bonjour,

Le modèle <svg><symbol ....> ... </symbol></svg> peut être placé en fichier externe.

Dans ce cas je suppose que le navigateur le met en cache, donc il s'agit de la méthode qui bouffe le moins de bande passante.

Confirmes-tu ?

Bonjour,

Comprenez-vous pourquoi ce SVG ne veut pas s'afficher :

<svg>
<use href="https://botega.fr/pan_form.svg" />
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<svg>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke-width="2.3">
<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" />
</symbol>
</svg>

Et la feuille de style du codepen.

Bonjour,

Je suis désolé d'insister mais je ne comprends pas pourquoi dans le codepen le même fichier SVG associé au même CSS externe fonctionne avec USE en inline et pas en externe.

code SVG Inline : à voir en haut dans le codepen

externe :

<?xml version="1.0" encoding="UTF-8"?>
<svg>
<symbol id="panier" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 45" fill="none" stroke-width="2.3">
<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" />
</symbol>
</svg>

Appel fichier externe (à la fin du codepen) :

<svg>
<use href="https://monsite.com/pan_form.svg#panier" />
</svg>

Bonjour/bonsoir:

Comme ton SVG est sur un site distant de la page que tu affiches, il n'est pas surprenant que cette ressources ne soit pas chargée.

Dans les outils du navigateur, on y trouve ce message :

a écrit :
Erreur de sécurité : le contenu situé à https://cdpn.io/cpe/boomboom/index.html?key=index.html-1eff194b-0942-e130-51c0-c2477e78925d ne peut pas charger de données à partir de https://botega.fr/pan_form.svg.

Bonjour gcyrillus,

D'accord, c'est compris, merci pour ton suivi.

J'ai fait l'essai sans le codepen et effectivement le SVG externe appelé par USE s'affiche.

Pratique ce USE, sauf erreur il faut se référer à un id en inline comme en externe.

<svg>
<use href="https://monsite.com/pan_form.svg#panier" />
</svg>

#xxx est indispensable.

Reste à méditer sur le rôle de l'élément <symbol>, je pourrai bientôt cocher Résolu.

Bonjour,

Dans ce codepen j'arrive à styler la couleur mais pas la taille.

Plus exactement quand par le CSS je diminue la taille l'image apparaît tronquée.

Voyez-vous où est l'erreur ?

Merci d'avance.

boteha_2 a écrit :
Bonjour,

Dans ce codepen j'arrive à styler la couleur mais pas la taille.

Plus exactement quand par le CSS je diminue la taille l'image apparaît tronquée.

Voyez-vous où est l'erreur ?

Merci d'avance.

Bonsoir,
ton SVG à une taille de base que l'on retrouve dans viewBox="0 0 276.92 340.64" et le path s'inscrit dans ces dimensions. en gros 276px X 340px

Comme tu demande un affichage dans une taille inférieur, les coordonnées du path débordes. Il te faut alors modifier son échelle pour qu'il tienne dans cet espace que tu réduit. Il aurait été trop facile de s'appuyer sur une règle du style "object-fit" , ici il te faut "scale".

Ce qui donnerait pour ton codepen

h1 svg {
  fill: #55906e;
  height: 123.0102557px;
  aspect-ratio: 0.812/1;
}
#green path {
  scale: 0.36;
}

pour retrouver cette valeur d’échelle tu peut faire:
123.0102557 / 340.64 = 0,3611151235908877

Pour ne pas avoir à chercher la largeur adéquate, tu peut aussi rechercher le ratio d'affichage de ton icône. ce qui fait
276.92 / 370.64 = 0,812940347581024 pour 1

Pour l’échelle, tu peut t'aider des variables CSS pour trouver la hauteur qui te convient et laisser ton navigateur faire les calculs à partir des valeurs connues:

:root {
  /* rendu hauteur voulue du symbole */
  --icoH: 90;

  /* valeur connue extraite du SVG */
  --svgH: 340.64;
  --svgW: 276.92;

  /* calcul par le navigateur */
  --scale: calc(var(--icoH) / var(--svgH)); 
  --ratio: calc(var(--svgW) / var(--svgH) );
}
h1 svg {
  fill: #55906e;
  height:calc(var(--icoH) * 1px);
  aspect-ratio: var(--ratio)/1;
  border:solid 1px;
}
#green path {
  scale: var(--scale);
}

Bon les défaut que je vois, c'est
- que tu n'a le droit qu'a une taille d'icône pour le symbol par page comme l’échelle est directement appliquée sur le path du SVG de référence
- et je ne vois pas trop comment y toucher si il s'agit d'un SVG externe

Fork de ton pen pour la demo https://codepen.io/gc-nomade/pen/RNNYgjM

cdt

Bonjour gcyrillus,

Merci pour ta réponse complète.

Sur mon codepen je paramètre une taille 40, parfait.
Modifié par boteha_2 (08 May 2025 - 22:35)

Bonjour,

Je pense que nous avons bien fait le tour du sujet, sans oublier l'article de Raphaël.

Je coche Résolu.

Encore merci de votre aide, surtout Raphaël et gcyrillus.