Comment utiliser l'attribut <svg> viewBox ?

Question

J'apprends le svg à partir de ses documents officiels, il y a une telle ligne. Je ne comprends pas, s'il y a déjà un width y height quel est l'intérêt de le spécifier à nouveau dans l'attribut viewBox="0 0 1500 1000" ? Il est dit : "Une unité px est définie comme étant égale à une unité utilisateur. Ainsi, une longueur de "5px" est la même qu'une longueur de "5"" dans les documents officiels, donc cette viewBox est une vue de 1500px de large et 1000 de haut, ce qui dépasse 300px et 200px. Alors pourquoi définir les valeurs de largeur et de hauteur en premier lieu ?

 <svg width="300px" height="200px" version="1.1"
         viewBox="0 0 1500 1000" preserveAspectRatio="none"
         xmlns="http://www.w3.org/2000/svg">

Answer 1

Voici quelques exemples pratique des informations que je trouve utiles pour comprendre (et en particulier pour travailler avec) les viewPort et viewBox de SVG.

Le SVG utilise l'élément termes viewPort et viewBox. La viewBox se trouve à l'intérieur du viewPort. Considérez la viewBox comme l'image elle-même - car vous pouvez l'agrandir, le faire glisser vers la gauche/droite/haut/bas - tout cela dans le viewPort. Le viewPort (la balise SVG elle-même) est comme un conteneur dans lequel se trouve l'image SVG. Vous pouvez également le dimensionner et le déplacer vers la gauche, la droite, le haut et le bas. La balise SVG se trouve dans un conteneur HTML (div, p, aside, h3, etc.). Vous pouvez donc comprendre pourquoi les gens trouvent que viewPort / viewBox sont un peu déroutants. Il suffit de considérer viewBox comme l'image elle-même.

Les attributs width/height de la balise SVG indiquent la taille du viewPort. Il s'agit de la largeur/hauteur du conteneur dans lequel l'image SVG est affichée. (Vous pouvez également avoir x="" y y="" comme pour l'attribut viewBox).

Ainsi, sur le SVG lui-même, vous spécifiez la largeur/hauteur et le décalage x initial / décalage y initial - c'est ce que l'on appelle le viewPort. (alias ViewPort Coord System) Dans l'attribut viewBox, vous spécifiez "x y width height" - c'est ce qu'on appelle le viewBox (alias Local Coord System LCS).

<svg x="0" y="0" width="500" height="300"
  viewBox="start_x  start_y  width  height" >
  ...path fill d etc...
</svg>

Concept important n° 1 : la largeur/hauteur du viewPort (celles qui se trouvent sur la balise SVG elle-même, comme width="" et height="") spécifier la taille du conteneur dans lequel l'image SVG sera affichée. En général, ou en cas d'omission, cette taille est identique (ou légèrement supérieure) à celle de l'image SVG elle-même.

Concept super-important n°2 : la largeur/hauteur de la viewBox est directement liée à la largeur/hauteur du viewPort. Si le viewPort est de 300 x 500, alors comme le viewBox L / H deviennent PLUS GRANDS que 300 x 500, l'image elle-même devient plus petite à l'intérieur du viewPort (zoom arrière). Mais lorsque la viewBox w/h devient plus petite que 300 x 500, l'image elle-même devient plus GRANDE à l'intérieur de la viewPort. Cette croissance se fait vers la droite et vers le bas, de sorte que si vous devez faire glisser l'image zoomée dans le viewPort devenu trop petit, c'est à ce moment-là que vous devez utiliser la commande X / Y de la viewBox.

viewBox x/y - fait glisser le SVG vers la droite ou vers le bas à l'intérieur du viewPort

viewBox width/height - si l'augmentation est supérieure à la largeur/hauteur de la balise SVG, l'image est agrandie à l'intérieur du viewPort. Le SVG se rétrécit vers la droite ou vers le bas dans la fenêtre de visualisation. Diminuer le nombre d'attributs en dessous de la largeur/hauteur du SVG : l'image GRANDIT dans la fenêtre de visualisation jusqu'à ce que des parties de l'image à droite/en bas soient coupées par le côté droit/le bas de la fenêtre de visualisation. *Lorsque les valeurs de largeur/hauteur de l'attribut viewBox sont inférieures aux valeurs de largeur/hauteur du SVG, l'image ZOOMME dans la fenêtre de visualisation. Lorsqu'elle est plus grande, l'image fait un zoom arrière (rétrécissement) dans la fenêtre d'affichage.

viewPort x/y == fait glisser la fenêtre de visualisation elle-même vers la droite/bas à l'intérieur de son conteneur HTML viewPort width/height - redimensionne l'ensemble de la fenêtre de visualisation, éventuellement en débordant du conteneur HTML (div / p / etc). En fait, il s'agit d'agrandir le viewPort en l'agrandissant vers la droite ou vers le bas.

Notes :
a. Si vous n'incluez pas l'attribut ViewBox dans le SVG, la taille de la viewBox est égale à la taille de la viewPort (elle occupe 100 % de la viewPort).
b. Si la viewBox commence 0,0 et a la même largeur/hauteur que la largeur/hauteur du SVG (c'est-à-dire le viewPort), rien ne changera. Cela équivaut à ne pas avoir d'attribut viewbox du tout.
c. Si vous avez un viewPort de la taille d'un jeu de cartes, mais que l'image SVG a la taille d'une boîte de céréales, l'augmentation des nombres "x y " de viewBox déplacera l'image de la boîte de céréales vers le haut/la gauche dans le viewPort, montrant une partie différente de l'image de la boîte de céréales. Cela peut s'avérer utile avec sprites
d. (Généralement (toujours !) l'élément SVG se trouve également à l'intérieur d'un conteneur HTML - un div, p, section, li, etc. Nous n'en avons pas parlé, mais souvenez-vous en. Si votre image est coupée, alors soit la viewBox est plus grande que le viewPort -OU- l'élément HTML conteneur (div, etc) est plus petit que le viewPort)

Voici deux (excellentes !) petites vidéos, qui nous ont été transmises par l'auteur de cette réponse dans ce même fil de discussion :

Démonstration vidéo de 2 minutes
Démonstration vidéo de 5 minutes (le même gars, mais en beaucoup mieux)

Answer 2

viewbox est un rapport

D'après mon humble expérience, j'ai toujours considéré que <svg> 's viewbox en tant que valeur requise rapport d'image à appliquer à la width y height valeurs. En définissant ces dernières comme je le fais avec n'importe quelle <img> dans le DOM, que ce soit dans les propriétés HTML en ligne ou via CSS, la propriété viewbox ne s'applique qu'au fichier SVG.

Answer 3

Voici une manière non technique d'illustrer la relation entre la largeur, la hauteur et la viewBox :

Si vous aviez une vieille image sur votre ordinateur avec les dimensions 1500 x 1000 Vous avez pincé le coin de l'image et l'avez redimensionnée en 300 x 200 l'image se rétrécit ou se réduit (si la mise à l'échelle est activée). L'inverse est également vrai.

Une bonne règle est de toujours regarder la largeur et la hauteur de la viewBox en premier, et de les comparer à la largeur et à la hauteur du SVG (ou à la largeur et à la hauteur du parent si elles ne sont pas déclarées dans le SVG). De cette façon, vous pouvez savoir si l'image SVG va s'agrandir ou se rétrécir.

<svg width="300px" height="200px" viewBox="0 0 1500 1000">

Ce qui précède indique au navigateur que vous avez un SVG qui est 1500 x 1000 mais vous voulez qu'il "pince les coins" et qu'il rétrécisse jusqu'à 300 x 200 .