[Résolu] Connaitre les dimensions d'une image .SVG

Salut,

Souvent, en SVG, on a la viewBox de définie, mais pas toujours les dimensions d'origine. Ceci étant dit elles ne sont pas nécessaires pour ce qui nous occupe ici.

Moi je mettrais :

.miniature {
  width: 100%;
  max-width: 100px;
  height: auto;
}

Histoire que ça marche avec tout, SVG ou autre.
Modifié par Olivier C (19 Jul 2023 - 21:49)

Non, ça marche dans tous les cas. Les règles CSS supplantent celles du HTML. Je ne sais pas d'où tu sors cette limitation avec la règle max-width mais moi j'utilise ce procédé sur tous mes sites et ça marche dans tous les cas de figure rencontrés.

Édit : il n'y a aucun problème avec le référencement, celui-ci n'a rien à voir là-dedans.
Modifié par Olivier C (20 Jul 2023 - 09:11)

Bonjour,

Olivier C a écrit :
Non, ça marche dans tous les cas. Les règles CSS supplantent celles du HTML. Je ne sais pas d'où tu sors cette limitation avec la règle max-width

J'ai dû mal m'exprimer.
Les dimensions des images sont dans un fichier PHP, aucune n'a les mêmes dimensions.
Et il y a disons 200 images alors que je dois en afficher une dizaine sur une page.
Soit je charge les dimensions des 200 images dans une feuille de style mais c'est lourd.
Soit je crée avec PHP une feuille de style dynamique dans le head pour les dimensions des 10 images de la page.
Soit j'entre à la volée les valeurs de dimension de l'image dans le code html, mais SANS une balise <style> que je déteste.

<img src="image.svg" width="100" heigth="50" />
C'est dans ce cas qu'il me semble que maxwidth ou auto ne sont pas tolérés dans le code html, je ne parle pas de la feuille de style ni d'une baise <style>.

Est-ce plus clair ?
Modifié par boteha_2 (20 Jul 2023 - 12:21)

boteha_2 a écrit :
....

Soit j'entre à la volée les valeurs de dimension de l'image dans le code html, mais SANS une balise &lt;style&gt; que je déteste.

&lt;img src="image.svg" width="100" heigth="50" /&gt;
C'est dans ce cas qu'il me semble que maxwidth ou auto ne sont pas tolérés dans le code html, je ne parle pas de la feuille de style ni d'une baise &lt;style&gt;.

Est-ce plus clair ?

Bonjour,
donc à priori tu n'as aucun soucis pour alimenter les deux attributs width et height (qui servent principalement à réserver l'espace requis en pixels à l'affichage de l'image, le temps que celle-ci soit chargée, une histoire de shift-layout) .
Pour le max-width il est probablement commun à toutes ces images et les styles en ligne ne sont du coup pas nécessaires, idem pour les autres styles communs que tu voudrais leur appliquer. Si tu ne peut pas les cibler depuis le parent, alors autant leur donner aussi une class pour gérer simplement les styles communs depuis la feuille de style.

L'attribut alt a, à priori, une valeur SEO, le poids/temps de chargement de l'image probablement aussi en partie , les autres attributs n'influent en rien, sauf peut-être, role ?, si utile et présent.

Cdt

Bonjour,

gcyrillus a écrit :
donc à priori tu n'as aucun soucis pour alimenter les deux attributs width et height (qui servent principalement à réserver l'espace requis en pixels à l'affichage de l'image, le temps que celle-ci soit chargée, une histoire de shift-layout) .

On en revient à ma question initiale.

Quand je reçois de la graphiste une image .svg, comment trouver rapidement et simplement ses dimensions ?

Autrement, c'est widrh: 100% et height: auto qui sont communs à toutes les images.
Par contre la valeur de max-width dépend de chaque image, c'est sa largeur.

Je viens d'écrire une bêtise et je l'ai effacée...

Mais au final, à quoi sert-il d'avoir les dimensions de l'image en CSS dont le but est in fine d'être responsive ?

Nota bene : a terme il existera une solution CSS pour récupérer les attributs HTML. Pour l'instant ça ne fonctionne pas encore avec toutes les propriétés.
Modifié par Olivier C (20 Jul 2023 - 15:15)

Ce sont de petites images, elles passent sur PC comme sur Mobile, c'est juste la présentation qui change.

Par contre je dois redimensionner l'image native, par exemple l'image .svg fait 300px de large et je la redimensionne en 100px.

Donc max-width: 100% n'est pas approprié et j'en reviens encore à la question initiale.

J'ai l'impression que la réponse se trouve dans Illustrator mais pas sûr.

Et qu'est-ce qui t'empêcherait d'utiliser un média queries pour cibler les petits écrans et passer ainsi ton max-width à 25% par exemple ?

Donc mon premier code proposé est toujours valable, maintenant pour les petits écrans il faut juste ajouter ce média queries.
Modifié par Olivier C (20 Jul 2023 - 15:20)

Chercher les dimensions de l'image n'est pas vraiment utile étant donné que c'est une image vectorielle. Cependant, si tu y tiens vraiment, des logiciels comme inkscape devraient t'aider. Je ne suis pas en mesure de te l'affirmer car je suis en vacances actuellement.

Bonjour,

Les dimensions "natives" (ce qui n'a aucun sens pour un svg, mais comme l'auteur de la question a l'air d'y tenir, on va faire comme si ça en avait un ) de l'image svg sont données par les 3e et 4e nombres de l'attribut viewBox de la balise svg se trouvant dans le fichier svg. Un simple éditeur de texte permet de "trouver" ces valeurs puisqu'un fichier svg est un simple fichier texte. Et si l'on veut automatiser le processus, quelques lignes de php suffisent pour aller chercher ces valeurs dans le fichier svg.

Le svg peut aussi avoir des attributs "width" et "height", mais ils sont optionnels et leurs valeurs sont souvent simplement "100%" ce qui n'aide pas à trouver le rapport entre la largeur et la hauteur d'une image svg. C'est pourquoi je conseille de regarder ce qu'il y a dans l'attribut viewBox plutôt que dans les attributs width et height.

Ceci étant, utiliser des balises img sans attributs "width" et "height" et sans se soucier de ce qu'il y a dans le svg, ainsi qu'une simple règle css indiquant un max-width en px ou rem par exemple pour ces images svg me semble ici amplement suffisant puisqu'on souhaite semble-t-il normaliser l'affichage et donner la même largeur à toutes les images. Il n'y a que si l'on souhaite "réserver" de la place lors de l'affiche de la page html qu'on aura besoin d'aller piocher des informations dans le svg. Mais en 2023, faire de telles réservations pour de petites images svg (ce qui semble être le cas ici) est d'un intérêt très relatif.

Attention à inkscape qui a tendance à rajouter des attributs "style" un peu partout.

Amicalement,

Bonjour,

Même si les 2 premières valeurs de la viewBox sont négatives (ou plus généralement non nulles), les proportions de l'image se calculent quand même uniquement à l'aide des 2 dernières valeurs.

Amicalement,