Contours SVG : place-les à l’intérieur ou à l’extérieur

Un contour SVG est centré sur son tracé. Pour placer un contour de 12 unités entièrement à l’intérieur d’une forme fermée, dessine un contour de 24 unités et découpe-le selon cette forme. Pour placer la même largeur visible à l’extérieur, dessine le contour de 24 unités à travers un masque qui cache l’intérieur de la forme. Conserve une copie du tracé original : le découpage et le masque modifient ce qui est visible, pas la géométrie sous-jacente.

La propriété proposée stroke-alignment figure dans un brouillon de spécification SVG Strokes, mais ce brouillon indique que la définition des contours SVG 2 reste normative. Pour un fichier devant fonctionner dans différents navigateurs et éditeurs, construis et teste le résultat visible au lieu de dépendre de cette propriété proposée.

Observe où se place le contour peint

Ce badge fermé original utilise un seul tracé dans les trois panneaux. Son remplissage bleu-vert, sa largeur nominale visible de 12 unités et l’espace du document environnant restent identiques. La ligne corail en tirets représente le tracé central. Dans le panneau central, elle coïncide avec le bord extérieur de la bande bleue ; à droite, elle coïncide avec le bord intérieur.

Le panneau central maintient la limite extérieure peinte du badge sur son tracé d’origine. Le panneau extérieur étend l’empreinte peinte de 12 unités autour du tracé. Si le badge touche presque le bord du viewBox, cette peinture supplémentaire peut être coupée. Le guide MDN des remplissages et contours décrit les contours ordinaires comme centrés sur le tracé ; la comparaison ci-dessus affiche les trois constructions à une même taille.

Crée un contour intérieur avec un découpage

Place le tracé fermé dans <defs>. Réutilise-le une fois comme remplissage et une fois comme découpage. Peins une seconde copie avec le double de la largeur de contour souhaitée, puis limite ce contour à l’intérieur du tracé. Un découpage rend invisible tout ce qui est hors de sa forme ; il ne supprime pas la moitié cachée du contour. Consulte la référence MDN de clipPath et notre guide des coordonnées clipPath si un découpage importé se décale par rapport à son illustration.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <clipPath id="badge-inside">
      <use href="#badge"/>
    </clipPath>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    clip-path="url(#badge-inside)"/>
</svg>

Ici, le contour de 24 unités s’étend normalement de 12 unités de chaque côté du tracé. Le découpage retire sa moitié extérieure et laisse une bande visible de 12 unités à l’intérieur. Place le remplissage sous le contour découpé, comme dans l’exemple, si tu souhaites conserver toute la bande intérieure visible. Pour les tracés composés avec des trous, examine les règles de remplissage et de découpage avant de supposer quel côté est intérieur.

Crée un contour extérieur avec un masque

Une bande extérieure nécessite la région de visibilité inverse. Le masque ci-dessous est blanc sur la zone du document et noir à l’intérieur du badge. Il est appliqué uniquement à la copie du contour, tandis qu’une copie sans masque fournit le remplissage. La région de masque explicite laisse de la place au contour au-delà de la forme d’origine.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="80 20 240 260">
  <defs>
    <path id="badge" d="M150 44 H250 L281 75 V207 L200 252 L119 207 V75 Z"/>
    <mask id="badge-outside" mask-type="luminance"
      maskUnits="userSpaceOnUse" maskContentUnits="userSpaceOnUse"
      x="80" y="20" width="240" height="260">
      <rect x="80" y="20" width="240" height="260" fill="white"/>
      <use href="#badge" fill="black"/>
    </mask>
  </defs>
  <use href="#badge" fill="#20a6a8"/>
  <use href="#badge" fill="none" stroke="#244b7b" stroke-width="24"
    mask="url(#badge-outside)"/>
</svg>

Là encore, seule la moitié du contour centré de 24 unités subsiste : la bande extérieure visible mesure donc 12 unités. Définis délibérément la région du masque : MDN décrit comment maskUnits, maskContentUnits et les dimensions de la région influencent un masque. Le rectangle blanc doit couvrir tout le contour extérieur. Un masque trop petit peut rogner précisément le bord que tu voulais préserver.

Il existe une astuce visuelle plus courte pour un remplissage opaque : peins un contour de largeur double, puis le remplissage par-dessus avec paint-order="stroke fill". Cela cache la moitié intérieure sous le remplissage, mais le contour existe toujours à cet endroit et peut réapparaître si le remplissage devient translucide ou est retiré. MDN explique l’ordre de peinture. Utilise le masque explicite lorsque la bande extérieure doit rester une construction visible distincte. Pour un contour dérivé de toute une silhouette alpha multicolore, consulte les contours morphologiques SVG ; ce filtre modifie l’apparence tout en préservant les tracés sources.

Vérifie le SVG après importation

Les découpages et les masques influencent le rendu, tandis qu’une application en aval peut exiger des contours remplis. Conserve un original modifiable et teste une copie de livraison dans la destination réelle :

1. Ouvre le SVG seul, puis place-le dans l’éditeur ou l’application de production prévus. Compare les bords intérieur et extérieur au même zoom.
2. Vérifie le viewBox ou le plan de travail autour de la version extérieure. Laisse de la place à sa bande extérieure de 12 unités et aux jointures dans les angles vifs.
3. Examine la liste des objets. Les exemples contiennent des tracés réutilisables, un découpage ou un masque, et un contour actif. Ils ne créent pas un seul contour plein.
4. Si le destinataire a besoin d’une géométrie remplie, convertis le contour sélectionné sur une copie de livraison et examine les formes obtenues. Conserve la source au contour actif pour les futurs changements de largeur.

Si la ligne disparaît à l’export, utilise la liste de vérification de visibilité des contours pour distinguer couleur manquante, découpage et prise en charge à l’importation. Si un contour recouvre un remplissage de façon inattendue, notre explication de SVG paint-order montre quel élément est dessiné en dernier.

La place de PerfectVector

Ces étapes partent d’un tracé SVG modifiable. Si le logo existe uniquement en PNG ou JPG, le processus de vectorisation de logos PerfectVector peut créer un candidat SVG avant l’ajout du découpage ou du masque. Compare sa silhouette, ses angles et ses éventuelles ouvertures à l’original à la taille de livraison prévue. La vectorisation reconstruit une géométrie candidate ; elle n’attribue pas à ta place un alignement intérieur ou extérieur du contour.

Si le tracé SVG original est disponible, modifie-le directement. Vectoriser sa capture d’écran ajouterait une étape inutile de reconstruction et pourrait modifier la limite que tu cherches à aligner. Notre guide de vectorisation des logos aide à choisir entre vectorisation, redessin et conservation d’un original vectoriel existant.

FAQ

SVG prend-il en charge l’alignement des contours à l’intérieur ou à l’extérieur ? Un brouillon de spécification SVG Strokes décrit ces valeurs, mais indique que SVG 2 reste la définition normative des contours. Pour une livraison portable, utilise un découpage ou un masque testé plutôt que de dépendre de la propriété du brouillon.

Pourquoi doubler la largeur du contour ? Un contour ordinaire se place pour moitié de chaque côté du tracé. Un découpage ou un masque élimine une moitié. Un contour de 24 unités laisse donc une bande intérieure ou extérieure visible de 12 unités dans ces exemples.

Un découpage intérieur ou un masque extérieur crée-t-il des contours prêts à découper ? Non. Ils modifient l’apparence affichée, tandis que le tracé et le contour sous-jacents subsistent. Si une machine de découpe ou un fournisseur exige des contours remplis, crée une copie de livraison distincte, convertis le contour en tracés dans un éditeur adapté et examine la géométrie après importation.

Sources

1. MDN — remplissages et contours — Définit le rendu centré des contours et le comportement de paint-order évoqués ici.
2. Groupe de travail SVG du W3C — brouillon de spécification SVG Strokes — Établit les valeurs d’alignement proposées et le statut du brouillon par rapport à SVG 2.
3. MDN — élément clipPath — Définit comment la construction intérieure limite la visibilité.
4. MDN — élément mask — Définit les attributs de région et de coordonnées du masque de la construction extérieure.
5. Alex Chan — dessiner des contours intérieurs et extérieurs en SVG — Présente la méthode de découpage et de masque à largeur double utilisée comme point de départ de notre badge original.

Si ton logo est encore une image matricielle, crée un candidat SVG avec PerfectVector, examine la limite de son tracé, puis essaie la construction intérieure ou extérieure dans ton éditeur et vérifie le fichier livré dans sa destination.