Fenêtre SVG et viewBox (pour les débutants complets)

Dans cette astuce, nous allons décomposer exactement ce que la fenêtre et viewBox sont en SVG. Vous apprendrez:

• La différence entre la fenêtre et la viewBox
• Les aspects de vos SVG que vous pouvez contrôler avec chaque
• Comment sont-ils appliqués?

Commençons!

SVG Viewport 

Si vous décomposez littéralement le mot «viewport», vous obtiendrez un indice quant à son rôle dans SVG; il crée un «port» à travers lequel vous pouvez «visualiser» une section d'un fichier SVG. Vous pouvez imaginer que cela ressemble à un hublot à travers lequel vous pouvez voir le monde au-delà..

La fenêtre SVG est comme une fenêtre à hublot dont la taille détermine ce que vous pouvez voir à travers.

Comme dans une fenêtre, la taille de la fenêtre de visualisation détermine ce que vous pouvez voir, mais elle ne définit pas la taille de ce qui est visible dans cette fenêtre. Ce qui est de l’autre côté pourrait théoriquement avoir n'importe quelle taille.

Par exemple, vous pourriez avoir une forme dans votre graphique qui est 100px par 100px, mais si vous définissez la fenêtre sur 50px par 50px vous ne verrez qu'une partie de cette forme. La taille de la fenêtre est définie en ajoutant largeur et la taille attributs à la svg élément, comme si:

Dans le premier fichier SVG, nous voyons l’ensemble 100px par 100px cercle, mais dans le deuxième SVG lorsque nous avons défini la taille de la fenêtre de visualisation sur 50px par 50px on ne voit qu'un quart du cercle.

SVG viewBox

le viewBox peut être considéré comme une fenêtre d'affichage, mais avec deux fonctionnalités supplémentaires: il peut «faire un panoramique» et il peut «faire un zoom». En s’appuyant sur l’analogie «regarder à travers le verre», si la fenêtre est comme une fenêtre, le viewBox est comme un télescope.

Le viewbox du SVG est très similaire au viewport, mais il peut aussi faire un panoramique et un zoom comme un télescope

Paramètres viewBox

Nous contrôlons le viewBox en l'ajoutant comme attribut à la svg élément, avec une valeur comprenant quatre nombres séparés par des espaces:

viewBox =    

Les deux premiers chiffres définissent la position du viewBox, que nous considérerons comme «panoramique». Les deux derniers chiffres définissent les dimensions du viewBox, que nous qualifierons de "zoom".

Remarque: aussi bien que svg élément, le viewBox attribut peut également être utilisé sur les éléments symbole, marqueur, modèle et vue.

Zoomer

Nous allons commencer par regarder le «zoom», ce que nous pouvons faire avec les deux derniers viewBox paramètres: largeur et la taille respectivement. Nous allons laisser les deux premiers paramètres à 0 0 pour l'instant.

Si ces deux derniers paramètres ont les mêmes dimensions que la fenêtre d'affichage, il n'y a pas de zoom avant ou arrière, donc rien ne change. Prenez par exemple le numéro 3 de SVG:

Mais si nous faisons en sorte que ces deux nombres soient plus grands que les dimensions de la fenêtre d'affichage, nous effectuerons effectivement un zoom arrière et si nous les réduisons, nous ferons un zoom avant..

En SVG numéro 4 dans l'exemple ci-dessus, nous avons défini la viewBox largeur et la taille à 100, qui est le double de la taille de notre viewport. Ce "zoom arrière" et affiche le double du contenu, révélant ainsi à nouveau le cercle entier.

Dans le cinquième SVG notre viewBox est réglé sur largeur et la taille de 25, qui est la moitié de la taille de notre viewport. Ce "zoom", montrant la moitié de la quantité de contenu.

Panoramique

Les deux premiers viewBox Les paramètres vous permettent de «faire un panoramique» en définissant le coin supérieur gauche de la fenêtre. viewBox devrait être. Le premier nombre contrôle la position horizontale et le second contrôle la position verticale.

• Pour vous déplacer vers la droite, augmentez le premier nombre. 
• Pour faire un panoramique à gauche, diminuez le premier nombre.
• Pour recadrer, augmentez le deuxième nombre. 
• Pour faire un panoramique, diminuez le deuxième nombre.

Examinez le fonctionnement de ce panoramique dans cet exemple. Pour vous rappeler, le numéro 3 SVG a un 50 par 50 fenêtre d'affichage, le viewBox est ajouté mais sans panoramique ni zoom. Le numéro 6 est identique, mais orienté vers la droite et vers le bas:

Panoramique et zoom ensemble

Vous pouvez, bien entendu, faire un panoramique et un zoom en même temps, en utilisant les quatre paramètres en même temps, par exemple:

Lorsque vous utilisez viewBox, définissez votre fenêtre

Chaque fois que vous utilisez le viewBox attribut, n'oubliez pas de définir également les dimensions de votre fenêtre. Si vous ne le faites pas, leur valeur par défaut sera 100% et vous aurez probablement un graphique surdimensionné:

En un mot

Résumons tout en quelques points:

• La fenêtre est comme une fenêtre dans laquelle vous regardez pour voir le contenu d'un SVG..
• le viewBox est similaire à la fenêtre d'affichage, mais vous pouvez également l'utiliser pour «déplacer» et «zoomer» comme un télescope..
• Contrôler la fenêtre via largeur et la taille paramètres sur le svg élément.
• Contrôler le viewBox en ajoutant l'attribut viewBox au svg élément. Il peut également être utilisé sur les éléments symbole, marqueur, modèle et vue.
• le viewBox la valeur de l'attribut est composée de quatre paramètres séparés par des espaces.
• Les deux premiers viewBox les paramètres contrôlent le «panoramique» et les deux derniers contrôlent le «zoom».
• Augmentez le premier paramètre à «panoramique» à droite, diminuez-le à «panoramique» à gauche.
• Augmentez le second paramètre pour “panoramique”, diminuez-le pour “panoramique”.
• Faire le viewBox dimensions, c’est-à-dire les deux derniers paramètres, plus grands que ceux de la fenêtre pour «zoom arrière» et plus petits pour «zoom avant».

J'espère que cela aide à clarifier les eaux parfois troubles de SVG fenêtre d'affichage et viewBox. Bonne création SVG!

Plus de bases SVG