18096 sujets

Questions générales et questions de débutants

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

Pages :
Bonjour,

J'ai quelques dizaines d'images .svg à mettre en ligne.

Chaque image a ses propres dimensions.

La dimension sur le site est indiquée par la feuille de style css.

Bon, admettons que j'ai une image .svg de 300 x 150 px

Je la veux sur le site en 100 px de large, donc dans la feuille de style

width : 100px
Et pour calculer la hauteur une règle de 3.
(100 / 300) x 150 = 50
height : 50px

Pour dimensionner une image j'ai besoin de la largeur et hauteur native.

Si c'était un jpg ou png ou gif il suffirait d'un clic droit pour trouver la hauteur et la largeur.
Mais avec un svg je ne vois pas comment faire.

Les images sont fabriquées sous Illustrateur par une graphiste.
Dans Illustrator, peut-elle connaître les dimensions de l'image qu'elle enregistre ?

J'espère que ma question est claire.

Merci de votre aide.
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)
Bonjour Olivier C,

Ah oui !

Je ne savais pas que height: auto préservait les proportions de l'image d'origine.

J'ai fait le test, cela marche.

Tu demandes au navigateur de faire la règle de 3 lui-même.

Pas de souci pour le référencement des images ainsi dimensionnées ?
Et si les dimensions étaient données non pas par la feuille de style mais par le code html :

<img src="image.svg" width="100" height="50" />


Il me semble que la valeur auto n'est pas admise, ni l’attribut max-width.

Cela relance la question initiale.
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)
Olivier C a écrit :
Les règles CSS supplantent celles du HTML.

Salut,

c'est l'inverse non ? Il me semble que la balise style en dur dans le HTML est prioritaire sur le reste.
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)
Modérateur
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)
Mathieuu a écrit :
c'est l'inverse non ? Il me semble que la balise style en dur dans le HTML est prioritaire sur le reste.

Oui, je voulais dire que le CSS supplante les attributs HTML.

Sinon, pour Boteha, un exemple vaut certainement mieux qu'un long discours : gallerie (oui je sais, toujours le même exemple, sur les topics sur lesquels je sévi).

Le code mentionné plus haut est appliqué sur cette page, ainsi que pour tous les SVG présents sur ce site (voir par exemple en page d'accueil), y compris les icônes (voir par exemple la barre de navigation).
Modifié par Olivier C (20 Jul 2023 - 17:01)
Olivier C,

Très sympa ta galerie.
Par contre le code source sur une ligne n'est pas facile à lire...

Mais mon problème n'est pas une question de CSS, ni de Responsive, mais une bête question sur l'image SVG.
Comment trouver facilement les dimensions de l'image que la graphiste m'envoie ?
Sur PC, si clic droite et "Propriétés", j'ai le poids de l'image mais pas ses dimensions.
Une amie graphiste me dit qu'avec un Mac j'aurais les dimensions.
Il est probable aussi qu'avec Illustrator je puisse avoir les dimensions mais je ne connais rien à ce programme.
Accessoirement j'ai un peu cherché sur le Web mais pas trouvé de réponse à cette question simple.
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.
connecté
Modérateur
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 Smiley cligne ) 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,
Alors la viewBox c'est vrai, mais il faut penser que parfois, lorsque les SVG sont mal pensés, les deux premières valeurs peuvent être négatives. Il faut alors en tenir compte dans le calcul.

Mais comme le dit Parsimonhi, c'est beaucoup de considération pour rien.
connecté
Modérateur
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,
Bonjour parsimonhi,

Merci, j'ai enfin une réponse à ma question.

viewBox="0 0 555.62 152.95"

width: 100ox

height : 100 x 152.95 / 555.62 = 27.5278068px

Dans ma galerie chaque image a sa propre dimension que je dois indiquer au navigateur.
Je vous montrerai peut-être le truc dans une autre discussion, au cas où vous auriez de meilleures idées.
Pages :
Sujet clos
Aller à