SVG preserveAspectRatio : ajuster sans étirer le dessin

Utilise preserveAspectRatio="xMidYMid meet" lorsque tout le viewBox SVG doit tenir dans sa zone d’affichage sans étirement. Utilise slice lorsque cette zone doit être couverte et qu’une partie du contenu peut dépasser ses bords. Utilise none seulement si des échelles horizontale et verticale différentes sont voulues.

La distinction essentielle est celle entre le rectangle de coordonnées du dessin, défini par viewBox, et la zone d’affichage où il apparaît. L’ajustement change la correspondance de l’un vers l’autre. Il ne redessine pas un logo, ne retire pas le canevas source vide et ne supprime pas définitivement les tracés rognés.

Choisir d’abord le comportement d’ajustement

La référence MDN de preserveAspectRatio décrit ces valeurs et la valeur par défaut, xMidYMid meet. Pour un élément svg, cette correspondance exige un viewBox. L’attribut est sensible à la casse : conserve les A et R majuscules.

Pour un logo, commence avec meet. Perdre une lettre ou transformer un cercle en ovale est généralement pire que laisser de l’espace. Pour un fond ornemental, un rognage volontaire peut convenir. Décide-le avant de choisir l’alignement.

Tester un emblème dans deux formes de zone d’affichage

Cet exemple original utilise un cercle, un rectangle et un triangle décentré. Le cercle rend l’étirement visible ; les parties inégales facilitent l’observation des changements d’alignement par rapport à un badge symétrique.

Colle ceci dans un fichier HTML et ouvre-le dans un navigateur :

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

Le viewBox mesure 200 unités de large et 100 de haut. Son rapport est 2:1. La première zone d’affichage mesure 300 sur 100 pixels CSS, soit un rapport de 3:1. Change seulement l’attribut pour comparer xMidYMid slice et none. Passe ensuite la zone d’affichage à width="100" height="300" et répète.

Nous avons rendu cette géométrie dans Chrome avec un petit dispositif à sélecteur. Son affichage utilisait la matrice de transformation courante du groupe du dessin. Les échelles et translations obtenues correspondaient à ces valeurs ; le décalage slice d’environ −25 pixels est arrondi ici.

Dans la zone d’affichage haute, meet montrait les trois petites formes. slice centré ne montrait qu’une partie de la composition agrandie, dominée par le rectangle doré. none rendait le cercle étroit et haut. Il s’agit d’une vérification de cet exemple dans Chrome, pas d’une garantie sur l’import dans chaque éditeur graphique.

La règle d’échelle est simple pour cet exemple d’origine zéro. Divise la largeur de la zone d’affichage par celle du viewBox, puis la hauteur de la zone d’affichage par celle du viewBox. meet utilise le plus petit rapport pour les deux axes ; slice utilise le plus grand. none garde les deux rapports distincts. La spécification du système de coordonnées SVG définit la correspondance, y compris l’alignement et les origines de viewBox non nulles.

Utiliser l’alignement pour choisir où va l’espace restant

Le premier mot-clé contrôle l’alignement. xMin, xMid et xMax alignent le bord gauche, le centre horizontal ou le bord droit du viewBox. YMin, YMid et YMax font l’équivalent verticalement. Ils font référence au rectangle du viewBox, qui peut contenir de l’espace vide autour des tracés réels.

Pour la zone d’affichage de test haute :

• xMinYMin meet place le viewBox ajusté en haut au lieu de le centrer verticalement.
• xMinYMin slice garde le côté gauche du viewBox aligné sur celui de la zone d’affichage. Le côté droit agrandi dépasse la zone d’affichage.
• xMidYMid slice répartit le débordement horizontal de chaque côté.

Nous avons passé le dispositif du centrage à xMinYMin. Les translations meet et slice sont toutes deux devenues nulles, tandis que leurs facteurs d’échelle sont restés respectivement à 0.5 et 3. L’alignement a déplacé la composition ; il n’a pas changé l’échelle d’ajustement.

Un changement d’alignement n’est visible que sur un axe avec de l’espace libre ou un débordement. Dans le cas large meet, le viewBox remplit déjà la hauteur ; remplacer YMid par YMin ne laisse donc aucune place pour le déplacer verticalement.

Faire du rognage un choix explicite

slice sélectionne une échelle. Le rognage détermine si tu vois les parties qui dépassent la zone d’affichage. L’exemple définit explicitement overflow:hidden pour rendre le rognage prévisible.

Dans le dispositif haut, passer overflow à visible a révélé le cercle et le triangle agrandis au-delà de la zone d’affichage slice. La géométrie n’avait pas disparu. La référence MDN de l’overflow SVG explique la relation entre débordement et rognage de zone d’affichage, y compris les différences de styles par défaut entre contextes SVG.

Évite de traiter slice comme une opération de découpe des tracés. Si un fichier livré doit contenir seulement la géométrie retenue, effectue et vérifie une vraie opération d’édition. Pour une zone d’affichage d’affichage personnalisée non rectangulaire, un clipPath peut être l’outil adapté.

De même, meet garantit que le viewBox tient ; il ne garantit pas que tout le contenu peint tient. Un contour, un filtre ou un tracé hors de ce rectangle source peut toujours dépasser. Examine les bords visibles au lieu de faire confiance au seul attribut.

Corriger l’espace vide source avant de lutter avec l’alignement

Suppose qu’un petit symbole n’occupe que le milieu d’un très grand viewBox. meet ajuste ce rectangle de coordonnées entier, y compris ses marges vides. Le résultat peut paraître trop petit même si l’échelle est correcte.

Vérifie le canevas ou le plan de travail exporté dans ton éditeur. Si tu modifies le viewBox pour resserrer la composition, inclus les contours et effets prévus et revérifie chaque placement. Ne supprime pas automatiquement toutes les marges : la source peut contenir un espace de protection voulu autour d’un symbole de marque.

Les problèmes de taille physique sont distincts. Un SVG importé à une mauvaise taille en millimètres nécessite la procédure de dimensions SVG ; changer l’alignement d’ajustement a peu de chances de corriger ses hypothèses d’unités.

Distinguer SVG intégré et ajustement d’image

Pour un SVG intégré, change l’attribut de l’élément svg concerné. Le CSS peut dimensionner sa boîte, tandis que preserveAspectRatio fait correspondre son viewBox à cette boîte.

Pour un SVG externe utilisé dans un élément image HTML, le CSS contrôle l’ajustement de l’image remplacée :

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

La documentation MDN de object-fit décrit comment un contenu remplacé tient dans sa boîte CSS. C’est une couche différente de la correspondance interne du document SVG. object-fit: contain ne peut pas non plus supprimer le canevas vide déjà présent dans la source. Consulte SVG intégré ou élément image pour choisir le modèle d’intégration.

Il existe aussi un élément SVG image, écrit en entier plutôt que le img HTML. Son preserveAspectRatio contrôle comment l’image référencée tient dans le rectangle défini pour cet élément. Il constitue l’exception à l’exigence générale d’un viewBox sur le même élément, comme l’explique la référence MDN de l’attribut. Distinguer ces trois cas évite d’essayer de corriger une image HTML en lui ajoutant un attribut réservé au SVG.

Préserver les proportions source avant le placement

Si tu n’as qu’un PNG ou JPG de ton symbole et as besoin de géométrie vectorielle éditable, PerfectVector peut reconstruire une source SVG avant la mise en page. Examine d’abord les contours, petites ouvertures et limites du canevas. Ajuster le résultat préserve sa géométrie actuelle ; cela ne répare pas une source déformée et ne recrée pas des détails jamais reconstruits.

Un SVG propre existant peut passer directement aux vérifications d’ajustement. Pour le simple emblème ci-dessus, une géométrie écrite à la main suffit. La présentation de la vectorisation d’images explique quand reconstruire des tracés depuis une image matricielle est utile.

Pour un symbole uniquement matriciel, essaie ta source dans PerfectVector, examine le SVG, puis compare un placement large et un haut avec meet avant d’envisager un rognage. Garde l’original vectoriel pour que les choix de mise en page restent réversibles.

FAQ

Pourquoi mon SVG a-t-il encore de l’espace vide avec meet ? La zone d’affichage et le viewBox peuvent avoir des rapports différents, ce qui laisse de l’espace après une mise à l’échelle uniforme. Le viewBox source peut aussi contenir des marges autour des tracés. L’alignement déplace ce rectangle ; il ne retire pas son espace vide interne.

slice rogne-t-il définitivement le dessin ? Non. Il change l’échelle utilisée pour couvrir la zone d’affichage. Le débordement et le rognage contrôlent les parties visibles. La géométrie originale des tracés reste dans le document sauf si tu la modifies séparément.

Pourquoi none transforme-t-il mon cercle en ovale ? Il permet des facteurs d’échelle horizontale et verticale différents. Lorsque les rapports de zone d’affichage et de viewBox diffèrent, un cercle peut devenir une ellipse. Utilise meet ou slice avec un mot-clé d’alignement pour garder une échelle uniforme.

Sources

1. MDN preserveAspectRatio — Définit les valeurs d’ajustement, l’alignement, les valeurs par défaut et l’exception image SVG.
2. Spécification du système de coordonnées SVG — Définit le calcul d’échelle et de translation d’une zone d’affichage.
3. MDN overflow SVG — Explique comment overflow contrôle le rognage de zone d’affichage.
4. MDN object-fit — Décrit l’ajustement d’un contenu image remplacé dans une boîte CSS.