Est-il important de définir la largeur et la hauteur d'un fichier SVG pour l'indexation?

Question

En règle générale, lorsque les SVG sont affichés en réponse, il suffit de définir l'attribut viewBox sur le <svg> et de supprimer complètement les attributs width et height (c'est-à-dire quelque chose comme <svg viewBox="0 0 20 20"> est suffisant). Je me demande donc comment les images SVG avec les attributs width et height omis sont indexées par un moteur de recherche tel que Google, c’est-à-dire avec quelle taille elles sont affichées dans Recherche d'images.

J'ai fait un peu de recherche, et il semble qu'ils soient affichés comme suit:

si le graphique est plus large que haut: width est 800px et height est réglé pour conserver le rapport de format
else: height est 800px et width est défini pour conserver les proportions

Par contre, les images SVG avec les attributs width et height semblent être affichées dans Recherche d'images avec la taille indiquée dans les deux attributs (par exemple, <svg viewBox="0 0 20 20" width="100" height="100"> s'affiche sous la forme 100x100).

J'ai également trouvé une image SVG dont width et height sont réglés sur 100% et qui s'affichent sous la forme 2000x2000 dans la recherche d'image.

Quelle est la meilleure pratique pour les attributs width et height des images SVG? Devraient-ils être omis, mis à 100%, ou mis à une autre valeur?

Invariant Change · Answer

Bien que les SVG puissent constituer un objectif spécifique, les sites Web, les lecteurs d'accessibilité et une grande partie de ce dont vous avez besoin pour rendre compte du référencement reposent sur le schéma standard IMG.

C'est pourquoi il est recommandé de respecter les attentes des moteurs de recherche, à savoir utiliser le bon vieux schéma IMG et tous ses attributs.

Au fur et à mesure que SVG mûrira, des schémas d’image plus robustes se développeront, mais pour l’instant, restez fidèle au schéma IMG habituel que les périphériques d’accessibilité et tous les navigateurs comprennent.

Basé sur ce qui précède

Définissez toujours les attributs de largeur et de hauteur d'une image. Cela aidera à éviter les repeints et les reflux inutiles lors du rendu.

Google Page Speed

Si vous ne balisez pas le code correctement à l'aide des propriétés HTML height et width et que cela a un impact sur votre site, Google et les autres moteurs de recherche vous pénaliseront dans les résultats de recherche.

Incorporation de médias

De plus, vos images risquent de ne pas s'afficher correctement lorsque incorporation dans des applications ou des médias sociaux.

Attribut HTML largeur et hauteur

Spécifiez toujours les attributs de hauteur et de largeur pour les images. Si hauteur et largeur sont définies, l'espace requis pour l'image est réservé lors du chargement de la page. Cependant, sans ces attributs, le navigateur ne connaît pas la taille de l'image et ne peut pas lui réserver l'espace approprié. Cela aura pour effet que la mise en page changera pendant le chargement (pendant le chargement des images).

Sitespeed: les images nécessitent-elles des attributs de largeur et de hauteur?

Lorsque vous incluez les dimensions de l'image, le navigateur peut extraire les "conteneurs" contenant les images, en leur réservant de l'espace pendant le téléchargement. Le navigateur peut alors aller sur le reste des pages CSS et des objets autour de ces "conteneurs" sans avoir à revenir en arrière et à redessiner la page entière une fois les images téléchargées et leur taille connue.

Voir spécification technique sur W3C.

cute_ptr · Answer

Voici ce que j'ai proposé de définir ou non les attributs width/height sur l'élément <svg> (qui se trouve dans le fichier .svg et n'a rien à voir avec width/height de l'élément <img> dont src est défini sur celui .svg fichier, juste pour être clair).

Ne pas définir les attributs width/height sur l'élément <svg> semble être le meilleur choix si votre SVG est réactif, car: 1) lorsqu'un utilisateur ouvre ce SVG dans un onglet distinct, le SVG remplira tout l'écran, plutôt que d'être de taille fixe et donc étant souvent affiché soit trop petit, soit trop grand (et faisant ainsi apparaître des barres de défilement); 2) Lorsqu'un moteur de recherche accède au fichier SVG, il ne voit pas les valeurs width et height spécifiées sur l'élément <svg> et le SVG est probablement interprété comme un SVG réactif. Le moteur de recherche choisit donc quelle est la meilleure taille pour l'afficher dans Image Search (qui semble actuellement être 800px, du moins pour Google, mais cela pourrait changer à l'avenir); 3) lorsqu'un tel fichier SVG est inclus avec <img> et que <img> ne spécifie pas d'attributs width/height, alors <img> remplira simplement la totalité de la largeur disponible. Cependant, vous êtes libre de spécifier width/height sur le <img> avec la valeur de votre choix, qui sera correctement dimensionnée.

Le seul cas auquel je peux penser en plaçant width/height sur le <svg> pourrait être utile, c’est lorsque ce SVG est toujours censé être affiché avec cette taille spécifique, quelle que soit la taille de l’écran (en d’autres termes, le SVG n’est pas censé être affiché). sensible). Si vous définissez width/height, vous garantissez que, lorsqu'un utilisateur ouvre le fichier SVG dans un onglet distinct, il aura la taille spécifiée, les moteurs de recherche l'indexeront avec la taille spécifiée et qu'un tel fichier SVG sera inclus dans <img> et que le <img> ne l'aura pas. spécifiez les attributs width/height, la taille de <img> correspondra à celle de width/height spécifiée dans <svg>. Toutefois, si vous spécifiez les attributs width/height dans le <img> et qu'ils ne correspondent pas à ceux spécifiés dans le <svg>, le SVG sera correctement redimensionné à la taille indiquée dans <img>, mais comme le SVG est censé avoir une taille fixe, si vous décidez pour définir les attributs width/height sur <img>, vous souhaiterez probablement les configurer pour qu'ils correspondent aux attributs width/height de <svg>.