SVG paint-order : un contour épais derrière le texte

Définis paint-order="stroke fill" sur un élément texte ou une forme SVG pour dessiner son contour avant son remplissage. Avec un remplissage opaque, celui-ci recouvre la partie intérieure du contour : un contour épais ne grignote donc pas la face colorée du lettrage. Tu peux aussi écrire paint-order: stroke fill; en CSS.

Le tracé, la taille de police et la largeur du contour restent identiques. C’est un réglage d’apparence, utile si un logotype avec contour devient lourd ou difficile à lire après augmentation de la largeur du contour. Il ne crée pas un contour aligné à l’extérieur ni un nouveau contour de découpe.

Pourquoi le contour par défaut envahit les lettres

SVG peint normalement le remplissage d’un élément, puis son contour, puis ses marqueurs. Un contour centré s’étend de part et d’autre de la limite de la forme remplie. Le peindre en dernier recouvre une partie du remplissage. Sur les fûts étroits des lettres, un large contour peut masquer presque toute la couleur de face.

Inverser les deux premières opérations permet au remplissage de recouvrir ce chevauchement. La spécification de peinture SVG définit cet ordre, et la référence MDN de l’attribut SVG décrit l’attribut et son équivalent CSS. La valeur courte stroke donne le même ordre que stroke fill markers : les opérations omises suivent ensuite dans leur ordre relatif normal.

L’effet nécessite un remplissage visible. Un tracé avec fill="none" n’a rien à peindre sur le contour intérieur. Un remplissage partiellement transparent peut laisser apparaître ce contour : utilise donc un remplissage opaque pour le résultat démontré ici.

Compare la même illustration à deux tailles

Nous avons créé un court logotype BOLD avec du texte éditable et un petit emblème triangulaire en tracés. La comparaison de navigateur ci-dessous change uniquement l’ordre de peinture dans chaque paire. Elle utilise des contours de 4 et 8 unités utilisateur SVG, puis affiche le même viewBox de 400 × 110 aux largeurs de 400 et 200 pixels CSS.

Au réglage de 8 unités, le logotype en ordre normal perd une grande partie de sa face jaune. Peindre le remplissage en dernier conserve les fûts jaunes visibles. L’effet reste perceptible dans la version de 200 pixels, mais les petites ouvertures restent étroites. La minuscule ouverture intérieure de l’emblème devient aussi difficile à distinguer avec le contour plus épais.

Ce dernier détail compte : l’ordre de peinture peut préserver la face d’une lettre sans rendre chaque trou ou espace lisible. Les contours s’étendent encore dans les espaces non remplis. Si une ouverture se ferme à la taille d’affichage prévue, réduis le contour ou simplifie l’illustration. Agrandir l’aperçu du navigateur ne remplace pas la vérification à la taille réellement vue par le lecteur.

Ce sont des exemples de dessin originaux, pas des conversions PerfectVector. Le logotype utilise la police Arial installée avec une famille sans-serif de repli ; une autre police change la forme et l’espacement des lettres.

Essaie un SVG complet

Enregistre ceci sous wordmark.svg et ouvre-le directement dans un navigateur. L’exemple laisse assez de place autour des formes pour le contour visible. Change paint-order en normal pour comparer, puis essaie stroke-width="4".

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 110" width="400" height="110">
  <g fill="#ffd76a" stroke="#263b55" stroke-width="8"
     stroke-linejoin="round" paint-order="stroke fill">
    <path d="M22 72 L40 28 L58 72 Z M34 60 H46 L40 44 Z" fill-rule="evenodd"/>
    <text x="78" y="76" font-family="Arial, sans-serif"
          font-size="64" font-weight="700">BOLD</text>
  </g>
</svg>

Le groupe transmet ses propriétés de peinture au tracé et au texte. Chaque enfant utilise l’ordre demandé pour son propre rendu. fill-rule="evenodd" donne à l’emblème son ouverture intérieure ; cet attribut est indépendant de l’ordre de peinture.

Pour reproduire les petits exemples, change width et height en 200 et 55, sans modifier le viewBox. Puisque ce fichier ne possède pas de contour non redimensionnable, l’illustration et son contour changent d’échelle ensemble. Un contour de 8 unités devient large de 4 pixels CSS à cette échelle réduite de moitié, avant de tenir compte de la partie cachée par le remplissage.

Pour une version avec feuille de style, attribue une classe à la cible et définis :

.outlined-wordmark {
  paint-order: stroke fill;
}

Lorsqu’un attribut de présentation et une déclaration CSS indiquent tous deux la propriété, le CSS prime. Si changer l’attribut semble ne rien faire, examine les règles appliquées. La référence CSS de MDN explique aussi l’héritage et les combinaisons de mots-clés autorisées.

Ce que ce réglage ne change pas

L’alignement du contour. Le contour suit toujours le même tracé central. Peindre le remplissage sur une partie du contour crée une bordure d’apparence extérieure autour des régions remplies, mais ne déplace pas la géométrie du contour vers l’extérieur. Sur le bord d’un trou, le contour visible restant peut empiéter dans le trou.

L’empilement d’objets séparés. Définir l’ordre de peinture d’un élément ne le place pas derrière une forme voisine. Un objet superposé plus tard peut encore le recouvrir. Réordonne les objets si c’est le problème. Pour un exemple, consulte pourquoi SVG z-index ne réordonne pas les tracés d’un logo.

Les parcours de coupe ou décalages. Une machine de découpe ou un outil géométrique a besoin des contours adaptés. Ne suppose pas qu’il interprétera un joli contour de navigateur comme une bordure jointe. Crée et examine séparément la géométrie nécessaire si la livraison le demande.

La portabilité des polices. L’exemple contient du texte éditable. Changer son ordre de peinture n’inclut pas la police et ne fige pas les formes des glyphes. Utilise les vérifications de changement de police SVG si un logotype change lorsqu’il est rouvert ailleurs.

Garde ces distinctions claires pendant les modifications. Un changement de paint-order est facile à inverser ; convertir les contours ou le texte en tracés change la structure modifiable du document.

Vérifie la copie de livraison dans sa destination

Pars du résultat du navigateur, puis ouvre le fichier enregistré dans l’application ou le moteur de rendu qui l’utilisera. Un aperçu de navigateur seul ne prouve pas qu’un éditeur, un convertisseur PDF ou un processus de production préserve l’apparence.

1. Compare la couleur de face et la bordure extérieure à la taille finale. Regarde l’intérieur de B, O et des ouvertures étroites de l’emblème.
2. Confirme que la police attendue a été chargée. Vérifie l’espacement comme la forme des lettres.
3. Vérifie les bords de page. Un contour plus large peut nécessiter davantage de place dans la zone d’affichage ou de découpage.
4. Rouvre le fichier de livraison exporté. Un export peut modifier les styles ou la construction des objets même si le document de travail semblait correct.

Si la destination change le contour, réduis le fichier à une seule forme remplie avec contour et compare-la au navigateur. Suis le diagnostic des contours SVG qui disparaissent si le problème relève du découpage, de l’échelle ou d’une couleur absente. Pour un conflit de règles de couleur, le guide de recoloration SVG explique où peuvent être définis les remplissages et contours.

Si l’apparence définie par les styles ne survit pas à la transmission, conserve l’original modifiable et prépare une copie de livraison distincte dont l’apparence nécessaire est représentée par des formes. Vérifie cette copie visuellement et géométriquement ; convertir simplement un contour centré en tracé ne reproduit pas à lui seul tous les chevauchements souhaités et ne crée pas un seul contour extérieur.

Si la source est un logo matriciel

Utilise l’emblème vectoriel original et le lettrage éditable si tu les possèdes. Capturer un texte fonctionnel puis le vectoriser n’apporte aucun avantage pour ajouter un contour.

Si un PNG ou JPG est le seul emblème restant, le processus de vectorisation de logos PerfectVector peut aider à préparer un candidat SVG en amont. Examine la silhouette convertie et les petites ouvertures avant d’appliquer ce style. La conversion ne définit pas l’ordre de peinture, n’identifie pas ta police originale et ne décide pas quelles formes doivent partager un contour.

Lorsque le lettrage peut être recréé avec la bonne police, conserve-le comme objet texte séparé pendant le design. Le guide général de vectorisation des logos explique comment choisir entre reconstruire une illustration matricielle et utiliser un original vectoriel existant.

FAQ

Quel est l’ordre de peinture SVG par défaut ? L’ordre par défaut est le remplissage, puis le contour, puis les marqueurs. La valeur normal demande cet ordre.

paint-order="stroke" diffère-t-il de "stroke fill" ? Ils produisent ici le même ordre : contour, remplissage, puis marqueurs. Les opérations non listées suivent les opérations listées dans leur ordre relatif normal.

paint-order crée-t-il un contour extérieur ? Il ne déplace ni ne décale le contour. Un remplissage opaque cache la partie intérieure d’un contour centré. Le contour restant peut encore envahir les trous et les espaces.

Pourquoi mon contour SVG semble-t-il encore trop lourd ? Le contour peut être trop large pour la taille d’affichage, le remplissage peut être transparent ou une autre règle CSS peut remplacer l’ordre de peinture. Vérifie ces conditions et examine les petites ouvertures à la taille finale.

Sources

1. W3C — peinture SVG 2 — Définit l’ordre de peinture et la relation entre remplissages et contours.
2. MDN — attribut SVG paint-order — Décrit l’ordre des mots-clés, les types d’éléments pris en charge et la priorité du CSS sur l’attribut de présentation.
3. MDN — propriété CSS paint-order — Explique l’héritage et les séquences abrégées de mots-clés.

Tu possèdes uniquement un emblème matriciel ? Prépare un logo SVG modifiable, examine ses ouvertures et teste le contour à la taille prévue avant de créer la copie de livraison.