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

La largeur et la hauteur correspondent à la taille du <svg> est. La viewBox contrôle la manière dont son contenu est affiché. Ainsi, la viewBox="0 0 1500 1000" réduira le contenu de <svg> par un facteur de 5 (1500 / 300 = 5 et 1000 / 200 = 5) et le contenu sera 1/5 de la taille qu'il aurait sans la viewBox, mais l'élément <svg>

Imaginez que vous avez une surface élastique et que vous la coupez en 4 morceaux égaux. Si vous jetez 3 morceaux, vous obtenez une surface dont la taille est égale à 1/4 de la surface d'origine. Si vous étirez maintenant la surface et lui donnez la même taille que la surface d'origine, tout ce qui se trouve sur la surface sera deux fois plus grand. C'est ainsi que viewBox et width/height sont liés.

Answer 2

Si vous ne spécifiez pas de boîte de visualisation, tous les nombres sans unité d'un élément sont supposés être des pixels. (et SVG suppose 90 dpi ou pixels par pouce pour la conversion d'unités comme le cm en pixels).

Une boîte de visualisation vous permet de donner à des nombres sans unité dans des éléments le sens d'"unités d'utilisateur" et de spécifier la manière dont ces unités sont mises en correspondance avec la taille. Pour simplifier, considérons uniquement les coordonnées x, c'est-à-dire une règle. Votre boîte de visualisation indique que votre règle aura 1500 unités pour correspondre à la largeur de 200 pixels du svg.

Un élément de ligne de 0 à 1500 (sans unité, c'est-à-dire des unités d'utilisateur) s'étendrait sur 200 pixels tels qu'ils sont dessinés, c'est-à-dire sur la largeur du dessin svg.

(Et comme SVG est extensible sans perte de résolution, les pixels ne signifient pas grand-chose dans le monde réel, lorsque l'utilisateur zoome ou dézoome).

Il s'agit en quelque sorte d'une transformation de coordonnées.

Je vous suggère d'étudier un livre comme "SVG Essentials", environ 10 $ d'occasion, dont je cite librement cette réponse.

Answer 3

Par défaut

<svg width="300" height="200">

la "règle" de la grille svg est en pixel (toutes les formes dans ce svg sont mesurées en pixel)

Mais si vous souhaitez utiliser vos propres unités, vous pouvez utiliser l'attr viewBox pour cela :

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

En d'autres termes :

axe horizontal : 1500 (votre unité de largeur) = 300px => 1 (votre unité de largeur) = 300/1500px = 1/5px

axe vertical : 1000 (votre unité de hauteur) = 200px => 1 (votre unité de hauteur) = 200/1000px = 1/5px

• Désormais, toutes les formes du fichier svg seront mises à l'échelle :

leurs largeurs sont ramenées à 1/5px (1/5 < 1 => réduction de l'échelle) par rapport à l'origine.

leur hauteur est également réduite à 1/5px (1/5 < 1 => réduction de l'échelle) par rapport à l'origine

Answer 4

MAIN :

• Les attribut viewBox est étroitement liée à la terme viewport en SVG

ABBREVIATION :

• viewBox - VB
• viewport - VP
• système de coordonnées de la vue - VCS
• système de coordonnées locales - LCS

SYNTAX :

<svg x = "VP_min_X" y = "VP_min_Y" width = "VP_width" height = "VP_height"
viewBox = "VB_min_X VB_min_Y VB_width VB_height">

LES VALEURS PAR DÉFAUT :

• unités = px
• largeur de la fenêtre = 300
• largeur de la fenêtre = 150
• viewBox = viewport

CODE AVEC VALEURS PAR DÉFAUT

<svg>

AVEC LE MÊME RÉSULTAT :

<svg x = "0" y = "0" width = "300" height = "150" viewBox = "0 0 300 150">

LES PARAMÈTRES D'AFFICHAGE :
POINT D'ORIGINE du système de coordonnées de la fenêtre de visualisation (VCS) :

• VP_min_X
• VP_min_Y

dans le cas de la fenêtre de visualisation la plus éloignée, ces valeurs n'ont pas d'importance et seront de toute façon égales à 0, elles sont généralement omises :

<svg width = "100" height = "150">

CODE AVEC LE MÊME RÉSULTAT : (pour la fenêtre la plus externe) :

<svg x = "10" y = 20 "width ="100 "height ="150">

VUE IMBRIQUÉE :
Dans une fenêtre imbriquée (VP_min_X, VP_min_Y), définir le retrait par rapport au point d'origine de VCS :

<svg width="100%" height="100%"> <!-- external viewport = full browser size -->
     <svg x="50" y="100" width="200" height="300" viewBox="0 0 100 100">
     </svg>
</svg>

dans ce cas, l'indentation de la fenêtre imbriquée :
50 px le long de l'axe X et 100 px le long de l'axe Y à partir du point d'origine du VCS externe.

Les dimensions de la zone rectangulaire (viewport) dans laquelle les graphiques SVG seront dessinés sont déterminées :

• VP_largeur
• VP_hauteur

LES PARAMÈTRES DE LA BOÎTE DE VISUALISATION :
LE POINT D'ORIGINE du système de coordonnées local (LCS) :

• Vb_min_X
• Vb_min_y

LA TAILLE de la partie visible de l'image SVG :

• Largeur Vb
• Vb_hauteur

RENDU :
Lors de la construction de l'image SVG finale, les systèmes de coordonnées sont transformés par COMBINING :
Points d'origine des systèmes de coordonnées :

• VCS (VP_min_X, VP_min_Y)
• LCS (VB_min_X, VB_min_Y)

Points d'extrémité de la zone d'image visible :

• VCS (VP_largeur, VP_hauteur)
• LCS (VB_largeur, VB_hauteur)

CAPACITÉS :
Par conséquent, il devient possible de contrôler :

• emplacement de la fenêtre de visualisation dans la fenêtre du navigateur [en utilisant la fenêtre imbriquée et en modifiant (VP_min_X, VP_min_Y)].
• la taille des fenêtres (VP_width, VP_height)
• panoramique de la partie visible de l'image [en utilisant viewBox et en changeant (VB_min_X, VB_min_Y)].
• mise à l'échelle de la partie visible de l'image [en utilisant viewBox et en modifiant (VB_width, VB_height)].

VISUALISATION : 2 minutes sur YouTube pour comprendre les principes décrits ci-dessus :
viewBox vidéo en SVG

DOCUMENTATION :
W3C 2019 Spécification SVG 2

Answer 5

Voici une explication assez bonne (à mon avis) et détaillée que j'ai trouvée utile. http://tutorials.jenkov.com/svg/svg-viewport-view-box.html