Comment identifier les dimensions d’une image indiquées dans .svg
Some of the links in this article are "affiliate links", a link with a special tracking code. This means if you click on an affiliate link and purchase the item, we will receive an affiliate commission.
The price of the item is the same whether it is an affiliate link or not. Regardless, we only recommend products or services we believe will add value to our readers.
By using the affiliate links, you are helping support our Website, and we genuinely appreciate your support.
Dans un fichier SVG, les dimensions d’une image peuvent être spécifiées de plusieurs façons. Voici quelques-unes des méthodes les plus courantes :
1. Attributs « width » et « height » : Ces attributs définissent la largeur et la hauteur de l’image en pixels. Par exemple :
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
Dans cet exemple, l’image a une largeur de 200 pixels et une hauteur de 100 pixels.
2. Attribut « viewBox » : Cet attribut définit une boîte englobante qui contient tous les éléments de l’image.
Les dimensions de cette boîte peuvent être spécifiées en utilisant les valeurs x, y, width et height. Par exemple :
<svg viewBox="0 0 200 100">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
Dans cet exemple, la boîte englobante a une largeur de 200 unités et une hauteur de 100 unités, et l’image est redimensionnée pour s’adapter à cette boîte.
3. Attribut « preserveAspectRatio » :
Cet attribut contrôle le comportement de redimensionnement de l’image par rapport à la boîte englobante. Il peut être défini avec les valeurs « none », « xMinYMin », « xMidYMin », « xMaxYMin », « xMinYMid », « xMidYMid », « xMaxYMid », « xMinYMax », « xMidYMax » ou « xMaxYMax ». Par exemple :
<svg viewBox="0 0 200 100" preserveAspectRatio="xMidYMid meet">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
Dans cet exemple, l’image est centrée horizontalement et verticalement dans la boîte englobante, et est redimensionnée pour s’adapter à la boîte sans être déformée.
En utilisant ces attributs, vous pouvez spécifier les dimensions d’une image dans un fichier SVG de manière précise et flexible.
