SVG viewBox et coordonnées en Python

Réponse rapide: Pour contrôler les coordonnées SVG en Python, chargez ou créez un SVGDocument et définissez width, height et viewBox sur l’élément racine SVG avec set_attribute(). width et height définissent la taille visible de sortie. viewBox choisit le rectangle de coordonnées affiché, et SVG agrandit ou réduit ce système de coordonnées pour remplir le viewport.

from aspose.svg import SVGDocument

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "300")
    svg.set_attribute("height", "150")
    svg.set_attribute("viewBox", "0 0 100 50")
    document.save("viewbox.svg")

Dans cet article, vous apprendrez à:

• définir width, height et viewBox sur l’élément racine SVG;
• comprendre comment les coordonnées SVG se projettent dans le viewport visible;
• créer une sortie SVG scalable avec un système de coordonnées stable;
• éviter les graphiques générés recadrés, étirés ou redimensionnés de façon inattendue.

La façon la plus simple de comprendre viewBox consiste à séparer le dessin de l’endroit où il est affiché. Le canevas SVG est l’espace de coordonnées dans lequel les formes sont placées. Le viewport est la zone visible de sortie, généralement définie par width et height. Le viewBox signifie: “affiche ce rectangle du canevas SVG dans le viewport, puis mets ce rectangle à l’échelle pour remplir le viewport”.

L’attribut viewBox contient quatre valeurs: min-x, min-y, width et height. Par exemple, viewBox="0 0 100 50" signifie: commence à la coordonnée (0, 0), affiche 100 unités de coordonnées horizontalement et 50 unités verticalement. Si le viewport est 300x150, ce système de coordonnées 100x50 est agrandi trois fois pour remplir la zone visible. La taille rendue peut aussi être 600x300 ou toute autre taille proportionnelle; les mêmes coordonnées seront alors remises à l’échelle pour s’adapter.

Bases de viewBox

Attribut	Exemple	Signification
width	300	Largeur visible de sortie, par exemple 300 pixels d’écran ou unités CSS
height	150	Hauteur visible de sortie
viewBox	0 0 100 50	Rectangle de coordonnées mis à l’échelle pour remplir le viewport
preserveAspectRatio	xMidYMid meet	Manière dont le graphique est aligné et mis à l’échelle lorsque les proportions diffèrent

Un système de coordonnées utilisateur est simplement le système que vos formes utilisent après l’application de viewBox. Si un rectangle a x="10" et width="80", ces valeurs sont mesurées en unités de viewBox, et non directement en pixels d’écran. Avec width="300" height="150" viewBox="0 0 100 50", SVG agrandit le système de coordonnées utilisateur: une unité de viewBox devient 3 unités rendues dans les deux directions. Si le viewBox était plus grand que le viewport, le même mécanisme réduirait le dessin.

Comment définir SVG viewBox en Python

Utilisez ce workflow lorsqu’un graphique SVG généré nécessite des coordonnées prévisibles et une zone visible claire:

1. Créez ou chargez un SVGDocument.
2. Obtenez l’élément racine SVG avec document.root_element.
3. Définissez les attributs racine comme width, height et viewBox avec set_attribute().
4. Ajoutez ou mettez à jour des formes avec des coordonnées situées dans le rectangle viewBox.
5. Enregistrez le SVG avec document.save() et vérifiez qu’aucune partie du graphique n’est recadrée.

Agrandir un graphique SVG avec un viewBox plus petit

Un modèle courant consiste à conserver des coordonnées de dessin simples tout en rendant une image plus grande. L’exemple suivant utilise un viewport 300x150 avec un viewBox 100x50, puis dessine un rectangle en coordonnées de viewBox. Le rectangle est défini comme 80x30 unités de coordonnées, mais il apparaît comme 240x90 unités rendues, car le viewport est trois fois plus grand que le viewBox dans les deux directions.

import os
from aspose.svg import SVGDocument

SVG_NS = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-viewbox-fixed.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "300")
    svg.set_attribute("height", "150")
    svg.set_attribute("viewBox", "0 0 100 50")

    rect = document.create_element_ns(SVG_NS, "rect")
    rect.set_attribute("x", "10")
    rect.set_attribute("y", "10")
    rect.set_attribute("width", "80")
    rect.set_attribute("height", "30")
    rect.set_attribute("rx", "4")
    rect.set_attribute("fill", "#2e86de")
    svg.append_child(rect)

    document.save(output_path)

La sortie conserve les proportions du rectangle, car le rapport du viewport 300:150 correspond au rapport du viewBox 100:50. SVG agrandit le système de coordonnées utilisateur avec le même facteur sur les axes x et y; le rectangle devient donc plus grand à l’écran tout en gardant ses proportions. En pratique, cela permet de concevoir une icône, un graphique ou un diagramme avec de petits nombres pratiques et de le rendre à une taille plus grande sans réécrire chaque coordonnée.

L’illustration compare le même rectangle dans le même viewport rendu 300x150. La partie (a) utilise viewBox="0 0 300 150": une unité de coordonnée correspond à une unité rendue et le rectangle 80x30 reste petit. La partie (b) utilise viewBox="0 0 100 50": SVG agrandit trois fois le système de coordonnées plus petit pour remplir le même viewport. Le rectangle utilise les mêmes valeurs de code, mais il apparaît beaucoup plus grand.

Déplacer la zone de coordonnées visible

Les deux premières valeurs de viewBox peuvent être négatives ou non nulles. Elles ne déplacent pas une seule forme. Elles déplacent la fenêtre de coordonnées visible sur le canevas SVG. C’est utile lorsque les graphiques générés utilisent des coordonnées autour d’un point central ou lorsque vous avez besoin d’espace autour d’une forme dont les coordonnées traversent zéro.

Dans l’exemple suivant, viewBox="-60 -60 120 120" place la coordonnée (0, 0) au centre du viewport carré. La zone visible commence à x=-60, y=-60, puis s’étend de 120 unités vers la droite et de 120 unités vers le bas.

import os
from aspose.svg import SVGDocument

namespace_uri = "http://www.w3.org/2000/svg"

output_folder = "output/"
output_path = os.path.join(output_folder, "svg-viewbox-shifted.svg")
os.makedirs(output_folder, exist_ok=True)

with SVGDocument() as document:
    svg = document.root_element
    svg.set_attribute("width", "240")
    svg.set_attribute("height", "240")
    svg.set_attribute("viewBox", "-60 -60 120 120")

    x_axis = document.create_element_ns(namespace_uri, "line")
    x_axis.set_attribute("x1", "-50")
    x_axis.set_attribute("y1", "0")
    x_axis.set_attribute("x2", "50")
    x_axis.set_attribute("y2", "0")
    x_axis.set_attribute("stroke", "#0071aa")
    x_axis.set_attribute("stroke-width", "3")
    svg.append_child(x_axis)

    marker = document.create_element_ns(namespace_uri, "circle")
    marker.set_attribute("cx", "0")
    marker.set_attribute("cy", "0")
    marker.set_attribute("r", "25")
    marker.set_attribute("fill", "#00aaaa")
    marker.set_attribute("stroke", "#006863")
    marker.set_attribute("stroke-width", "5")
    svg.append_child(marker)

    document.save(output_path)

Ici, le centre de la zone visible est la coordonnée (0, 0). L’axe horizontal va de x=-50 à x=50, et le cercle est exactement centré sur l’origine. Ce modèle est utile pour les icônes, marqueurs, diagrammes polaires et symboles générés qui sont plus faciles à calculer autour d’un centre.

L’illustration compare deux façons d’afficher un cercle dont le centre est à la coordonnée (0, 0). La partie (a) utilise viewBox="0 0 240 240": (0, 0) se trouve dans le coin supérieur gauche, et la plus grande partie du cercle est recadrée hors du viewport. La partie (b) utilise viewBox="-60 -60 120 120": la zone visible de coordonnées commence à (-60, -60) et se termine à (60, 60). Ainsi, (0, 0) est au centre du viewport et le cercle complet devient visible.

Erreurs courantes et solutions

Problème	Pourquoi cela se produit	Solution
Le SVG semble vide	Tous les éléments visibles sont hors du rectangle de coordonnées défini par viewBox. Par exemple, un cercle à cx="200" n’est pas visible dans viewBox="0 0 100 100".	Déplacez les éléments dans la plage du viewBox ou augmentez width, height, min-x et min-y du viewBox afin que les éléments soient dans la zone de coordonnées visible.
Le graphique est recadré	L’élément n’est que partiellement dans le viewBox. SVG affiche la partie située dans le rectangle de coordonnées visible et masque le reste.	Agrandissez le viewBox ou décalez-le avec min-x et min-y pour que toute la forme tienne dans la zone visible.
Le graphique paraît plus grand que prévu	La largeur et la hauteur du viewBox sont plus petites que le viewport, ce qui crée un effet de zoom avant.	Utilisez un viewBox plus grand ou réduisez les valeurs rendues de width et height.
Le graphique paraît plus petit que prévu	La largeur et la hauteur du viewBox sont plus grandes que le viewport, ce qui crée un effet de zoom arrière.	Utilisez un viewBox plus petit ou augmentez les valeurs rendues de width et height.
La sortie semble étirée	Le rapport du viewport ne correspond pas au rapport du viewBox. Par exemple, 300x150 et 100x100 ont des proportions différentes.	Utilisez des proportions correspondantes ou définissez volontairement preserveAspectRatio.
Les coordonnées sont difficiles à gérer	Le viewBox ne correspond pas à votre façon de penser le dessin.	Choisissez un système de coordonnées pratique, par exemple 0 0 100 100 pour les icônes ou des coordonnées négatives à positives pour les formes symétriques.
Le contour est coupé au bord	La forme elle-même tient dans la zone, mais le trait est dessiné pour moitié à l’intérieur et pour moitié à l’extérieur de la limite. Un cercle touchant le bord du viewBox peut perdre une partie de son contour.	Laissez une marge supplémentaire dans le viewBox ou éloignez la forme du bord d’au moins la moitié de stroke-width.

FAQ

Que signifie SVG viewBox?

viewBox définit quelle zone rectangulaire de coordonnées du canevas SVG doit être affichée dans le viewport SVG. Dans viewBox="0 0 100 50", la zone visible commence à (0, 0) et couvre 100 unités en largeur et 50 unités en hauteur. SVG met ensuite cette zone 100x50 à l’échelle vers le haut ou vers le bas pour remplir le viewport rendu.

Quelle est la différence entre viewport et viewBox?

Le viewport est la zone visible de sortie définie par width et height. Le viewBox est le rectangle de coordonnées projeté dans cette zone visible. Pour une explication SVG plus théorique, consultez SVG Coordinate Systems and Units et SVG viewBox.

width et height changent-ils les coordonnées SVG?

Non. width et height contrôlent la taille du viewport rendu. Le viewBox contrôle la zone de coordonnées utilisée par les formes, textes et chemins. Un cercle avec cx="50" utilise toujours la coordonnée 50, même si le SVG est rendu avec une largeur de 100 pixels ou 1000 pixels.

Pourquoi un viewBox plus petit rend-il le graphique SVG plus grand?

Un viewBox plus petit affiche une zone de coordonnées plus petite et l’ajuste dans le même viewport. Par exemple, placer viewBox="0 0 50 50" dans un viewport 200x200 fait que chaque unité de coordonnée occupe plus d’espace rendu que viewBox="0 0 200 200" dans le même viewport.

Pourquoi un viewBox plus grand rend-il le graphique SVG plus petit?

Un viewBox plus grand affiche davantage d’espace de coordonnées dans le même viewport. Le moteur de rendu doit faire tenir une plus grande zone de canevas dans la même taille visible; chaque unité de coordonnée prend donc moins d’espace rendu et le graphique paraît plus petit.

Les valeurs de viewBox peuvent-elles être négatives?

Oui. Les valeurs négatives de min-x ou min-y sont utiles lorsque vous dessinez autour d’un point central ou lorsqu’un graphique a besoin d’une marge visible autour de coordonnées proches de zéro.

Articles associés

• Dessiner des formes SVG en Python montre comment placer des formes visibles dans un système de coordonnées.
• Dessiner du texte SVG en Python explique le fonctionnement des coordonnées et lignes de base du texte dans les libellés SVG générés.
• Créer des icônes SVG en Python utilise un viewBox compact pour les icônes générées.
• Convertir SVG en PNG en Python explique pourquoi des valeurs de viewport manquantes ou incorrectes peuvent affecter la sortie raster.