Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

SVG viewport et viewBox (pour les débutants complets)

by
Difficulty:BeginnerLength:ShortLanguages:

French (Français) translation by Richter Domagas (you can also view the original English article)

Dans cette astuce, nous allons faire tomber exactement quels viewport  et viewBox sont en SVG. Vous apprendrez :

  • La différence entre la viewport et viewBox
  • Les aspects de votre SVG, vous pouvez contrôler avec chacun
  • Comment ils sont chacune appliquées

Commençons !

SVG viewport 

Si vous décomposez littéralement le mot « viewport » vous obtiendrez une indication quant à son rôle dans SVG ; il crée un « port » à travers laquelle vous pouvez « voir » une section d'un SVG. Vous pouvez imaginer cela comme étant quelque chose de semblable à une fenêtre hublot à travers lequel vous pouvez voir le monde extérieur.

The SVG viewport is like a porthole window whose size determines what you can see through it
La viewport SVG est comme une hublot fenêtre dont la taille détermine ce que vous pouvez à voir travers elle

Comme pour une fenêtre, la taille de la viewport détermine combien vous pouvez le voir, mais il ne définit pas la taille de tout ce qui peut être visible à travers cette viewport. Ce qui est de l’autre côté pourrait théoriquement être n’importe quelle taille du tout.

Par exemple, vous pourriez avoir une forme à votre graphique qui est de 100px par 100px, mais si vous affectez le viewport 50px de 50px vous ne verrez qu’une partie de cette forme. La taille de la viewport est définie en ajoutant des attributs width et height de l’élément svg, comme suit :

Dans le premier SVG, nous voyons l’ensemble 100px par 100px cercle, mais dans le deuxième SVG lorsque nous avons mis notre taille viewport à 50px de 50px on voit seulement un quart du cercle.

SVG viewBox

ViewBox peut être considéré aussi bien comme la viewport, mais avec deux fonctions supplémentaires : il peut « pan » et il peut « zoom ». S'appuyant sur l'analogie « à regardant travers le verre », si la viewport est comme une fenêtre, la viewBox est comme un télescope.

The SVG viewBox is very similar to the viewport but it can also pan and zoom like a telescope
Le SVG viewBox est très similaire à la viewport, mais il peut également panoramique et de zoom comme un télescope

viewBox Paramètres

Nous contrôlons la viewBox en l’ajoutant en tant qu’attribut de l’élément svg, avec une valeur composée de quatre nombres séparés par un espace :

Les deux premiers chiffres définissent la position de viewBox, dont nous allons considérer comme « panoramique ». Les deux derniers chiffres définissent les dimensions de viewBox, dont nous allons penser comme « zoom ».

Remarque : ainsi que l’élément svg, l’attribut viewBox peut également être utilisé sur le symbol des éléments, le marker, le pattern et le view.

Zoom

Nous allons commencer en regardant « zoom », qui nous pouvons faire avec les deux derniers paramètres viewBox : width et height 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 viewport, il n’y a aucun zoom avant ou arrière donc rien ne change. Regarde par exemple un numéro SVG 3 :

Mais si nous faisons ces deux nombres plus grand que les dimensions de la viewport nous allons effectivement effectuer un zoom arrière, et si nous le rendre plus petit nous allons effectuer un zoom avant.

Nombre de SVG 4 dans l’exemple ci-dessus nous avez valeur viewBox width et height 100, qui est le double de la taille de notre fenêtre d’affichage. Ce « zoom arrière » et montre double le contenu, révélant ainsi à nouveau le cercle entier.

Dans un cinquième SVG notre viewBox est définie à une width et une height de 25, qui est la moitié de notre viewport. Cette « zoom avant », montrant la moitié du contenu.

Panoramique

Deux viewBox premiers paramètres vous permettent « pan » de réglage où le coin supérieure gauche de viewBox devrait être. Le premier numéro de contrôle de la position horizontale et le second contrôle la position verticale.

  • Pour effectuer un panoramique droite, augmenter le nombre premier.
  • Pour effectuer un panoramique gauche, diminuer le nombre premier.
  • Pour effectuer un panoramique vers le bas, augmenter le nombre de second.
  • Pour effectuer un panoramique vers le haut, diminuer le nombre de second.

Jetez un oeil à ce panoramique comment fonctionne dans cet exemple. Pour rappel, SVG numéro 3 comporte une viewport de 50 par 50, viewBox est ajouté mais sans panoramique et de zoom. Numéro 6 est le même, mais la batée vers la droite et vers le bas :

Panoramique et zoom ensemble

Vous pouvez, bien sûr, les pans et zoom dans le même temps, en utilisant tous les quatre paramètres à la fois, par exemple :

ViewBox, définissez votre viewport

Chaque fois que vous utilisez l’attribut viewBox, n’oubliez pas de définir les dimensions de la viewport trop. Si vous n’avez pas, ils vont par défaut à 100 % et vous aurez probablement avoir un graphique surdimensionné :

En un mot

Nous allons tout résument en quelques points de la balle :

  • La viewport est comme une fenêtre vous feuilleter pour voir le contenu d’un SVG.
  • ViewBox est similaire à la viewport, mais vous pouvez également l’utiliser pour « pan » et « zoom » comme un télescope.
  • Contrôler la viewport via les paramètres width et height sur l’élément svg.
  • Contrôle viewBox en ajoutant l’attribut viewBox de l’élément svg. Il peut également être utilisé sur le symbol des éléments, le marker, le pattern et le view.
  • Valeur de l’attribut viewBox est composée de quatre paramètres séparés par un espace.
  • Les deux premiers viewBox paramètres contrôle « panoramique » et le contrôle de deux derniers « zoom ».
  • Augmenter le premier paramètre de « pan » à droite, diminuer à gauche « pan ».
  • Augmenter le deuxième paramètre à « pan » vers le bas, diminuer pour le « panorama » vers le haut.
  • Rendre les dimensions de viewBox, c'est-à-dire les deux derniers paramètres, plus grandes que celles de la viewport pour un « zoom arrière » et plus petit pour « zoomer ».

J’espère que cela aide à clarifier les eaux parfois troubles de SVG viewport et viewBox. Création de SVG heureux !

Plusieurs principes de base SVG

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.