SVG feMorphology : un contour sans nouveaux tracés

Pour entourer toute la silhouette d’un SVG multicolore, dilate son SourceAlpha, retire l’alpha d’origine du résultat agrandi, colore l’anneau restant, puis superpose l’illustration d’origine. Le filtre modifie l’apparence affichée tout en laissant intactes les données des tracés d’origine.

Utilise operator="erode" si tu souhaites au contraire réduire la silhouette alpha. Aucune de ces opérations ne crée un tracé décalé modifiable. Vérifie visuellement les trous, les espaces étroits et les angles vifs : la morphologie utilise un voisinage rectangulaire, et non le décalage circulaire d’un contour.

Pars de la silhouette, pas des canaux de couleur

La spécification Filter Effects du W3C définit la dilatation comme le maximum de chaque composante dans un voisinage rectangulaire, et l’érosion comme le minimum. Avec SourceAlpha, l’entrée correspond au canal alpha de l’illustration. Nous pouvons ainsi obtenir une silhouette sans agrandir séparément les canaux de couleur bleu-vert et corail.

Cet exemple applique le filtre à l’illustration complète composée de deux tracés. Son trou carré transparent fait partie de la silhouette alpha. L’insert corail se trouve déjà dans une zone bleu-vert opaque ; il ne crée donc pas de limite extérieure distincte.

Nous avons créé le SVG à la main et ouvert cinq variantes autonomes dans un navigateur. Chaque fichier conserve les deux mêmes définitions de tracés d’origine. La comparaison ci-dessous montre le rendu réel de ces fichiers, sans illustration vectorisée ni aperçu d’effet généré.

Avec un rayon de 10, le contour s’étend à l’extérieur de la silhouette visible et dans le trou. À 22, le doré remplit l’ouverture carrée de cet exemple. La version 18 4 s’étend davantage à l’horizontale qu’à la verticale. L’érosion réduit la zone extérieure opaque et agrandit l’ouverture transparente ; la pointe inférieure change aussi.

Ces observations concernent cette illustration et ces réglages. Elles ne constituent pas une règle générale de rayon sûr pour d’autres logos ou icônes.

Construis l’anneau alpha extérieur

Enregistre cet exemple complet sous outline.svg et ouvre-le dans un navigateur. Il s’agit du SVG exact de rayon 10 utilisé pour la capture :

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="220" viewBox="0 0 300 220">
<defs>
<g id="artwork">
  <path fill="#173b40" fill-rule="evenodd"
    d="M50 60H250V170H170L150 195L130 170H50Z M105 90H145V130H105Z"/>
  <path fill="#f28567" d="M175 90H220V140H175Z"/>
</g>
<filter id="outline" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="dilate" radius="10" result="grown"/>
  <feComposite in="grown" in2="SourceAlpha" operator="out" result="ring"/>
  <feFlood flood-color="#e4b84c" result="paint"/>
  <feComposite in="paint" in2="ring" operator="in" result="coloredRing"/>
  <feMerge>
    <feMergeNode in="coloredRing"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>
<use href="#artwork" filter="url(#outline)"/>
</svg>

Le filtre fonctionne en quatre étapes :

1. feMorphology dilate SourceAlpha pour produire grown.
2. feComposite conserve la partie de grown située hors de l’alpha d’origine et produit ring.
3. feFlood fournit une couleur dorée ; une autre composition limite cette couleur à l’anneau.
4. feMerge place le SourceGraphic d’origine au-dessus de l’anneau coloré.

L’ordre des entrées compte lors de la soustraction. La section de la spécification consacrée à la composition désigne in comme source et in2 comme destination. Ici, in="grown", in2="SourceAlpha" et operator="out" retirent la zone opaque d’origine de l’alpha agrandi. Inverser ces entrées ne produit pas cet anneau extérieur.

Le mot extérieur signifie hors de la région alpha opaque, y compris dans l’espace d’un trou transparent. Si le contour doit éviter les ouvertures intérieures, ce filtre ne fait pas automatiquement cette distinction. Il te faut une silhouette distincte ou une autre construction définissant l’extérieur souhaité.

Les couleurs sources restent visibles car nous fusionnons en dernier le SourceGraphic non modifié. Ce mécanisme diffère du contour ordinaire d’un tracé. Pour des contours centrés, limités à l’intérieur par découpage ou à l’extérieur par masque, consulte l’alignement des contours SVG ; l’ordre de peinture explique le cas plus simple de la superposition du contour et du remplissage.

Érode l’alpha et conserve les couleurs restantes

Remplace le filtre de contour par la définition suivante, puis modifie l’utilisation finale en filter="url(#erode)" :

<filter id="erode" filterUnits="userSpaceOnUse"
  primitiveUnits="userSpaceOnUse" x="0" y="0" width="300" height="220">
  <feMorphology in="SourceAlpha" operator="erode" radius="10" result="shrunken"/>
  <feComposite in="SourceGraphic" in2="shrunken" operator="in"/>
</filter>

Cette composition conserve l’illustration d’origine uniquement là où subsiste l’alpha érodé. Elle ne superpose pas à nouveau l’original complet, car cela masquerait l’amincissement recherché. Dans cet exemple, la zone extérieure bleu-vert se réduit tandis que la région corail subsiste à l’intérieur.

Indique explicitement l’opérateur dans les exemples de travail. La référence de l’attribut operator distingue erode et dilate sur feMorphology de in et out sur feComposite. Le même nom d’attribut joue des rôles différents sur les deux éléments. L’opérateur par défaut de la morphologie est erode : l’omettre peut facilement produire l’effet inverse de la dilatation souhaitée.

Distingue les unités du rayon de la région du filtre

La référence de l’attribut radius accepte un ou deux nombres. Un seul s’applique aux deux axes ; avec deux nombres, le premier est le rayon x et le second le rayon y. Pour les deux états de contour supplémentaires, remplace uniquement radius="10" par radius="22" ou radius="18 4" dans l’exemple complet.

Ces rayons sont exprimés dans le système de coordonnées choisi par primitiveUnits. Ils ne garantissent pas une bordure d’épaisseur fixe en pixels CSS à toutes les tailles d’affichage. Nous utilisons explicitement primitiveUnits="userSpaceOnUse" avec un viewBox de 0 0 300 220. Redimensionner le SVG affiché met à l’échelle l’effet en même temps que l’illustration.

Deux attributs aux noms proches contrôlent des éléments différents :

La référence MDN de primitiveUnits décrit le système de coordonnées des primitives. Sa référence de filterUnits décrit séparément la région extérieure. filterUnits vaut par défaut objectBoundingBox ; primitiveUnits vaut par défaut userSpaceOnUse. Définir les deux explicitement facilite l’examen de l’exemple.

La source occupe x=50 à 250 et y=60 à 195. Le plus grand rayon identique sur les deux axes testé est 22, et la région de filtre comme la zone d’affichage de 300 sur 220 laissent de la place à ce résultat. Revérifie les deux limites lorsque tu modifies l’illustration ou le rayon. La spécification décrit la région du filtre comme une limite de découpage stricte : un rayon plus grand ne peut pas peindre au-delà. Le guide du découpage des filtres et de la zone d’affichage SVG montre ces deux limites distinctes.

Si le filtre semble inactif, examine aussi radius. Sa valeur par défaut est 0, et la référence indique qu’une valeur négative ou nulle désactive l’effet de la primitive. Les exemples ci-dessus utilisent des valeurs positives explicites sur les deux axes.

Examine les trous et les angles avant livraison

Le voisinage rectangulaire de la morphologie donne un aspect différent d’un contour arrondi classique. Des rayons x et y égaux ne transforment pas ce voisinage en cercle. La pointe inférieure en escalier de la comparaison est un endroit utile pour examiner la différence.

Nous avons vérifié que les cinq fichiers contiennent toujours deux tracés sources aux attributs d identiques. Leurs définitions de filtre diffèrent ; leur géométrie source reste identique. Examine les objets SVG réels lorsque ta destination exige des tracés que tu peux modifier, décaler ou envoyer en production. Utilise une opération géométrique dans un éditeur pour répondre à ce besoin, puis examine les contours obtenus. Modifier ou retirer seulement ce filtre ne les crée pas.

Conserve un original sans filtre et une copie de livraison distincte. Ouvre le fichier livré dans sa destination réelle et compare les angles, les ouvertures intérieures, les couleurs et les limites. Cet exemple dans un navigateur ne démontre pas la prise en charge dans une application de design, un outil d’export ou une machine de découpe particuliers.

Prépare la source avant d’ajouter l’effet

PerfectVector peut t’aider lorsque l’illustration de départ existe uniquement en PNG ou JPG. Prépare un SVG candidat, puis examine la silhouette source reconstruite, les petits trous et les limites de couleur avant d’appliquer le filtre. Un contour morphologique amplifie les problèmes de cette silhouette au lieu de réparer à ta place la géométrie souhaitée.

Utilise directement un original vectoriel disponible. Pour un symbole simple, un redessin manuel peut être plus facile à maîtriser. Vectoriser une image aplatie avec un contour intégré ne permet pas de retrouver les réglages du filtre d’origine ni de déterminer quelle partie correspondait à la forme sans filtre. La présentation de la vectorisation d’images explique cette limite de reconstruction.

FAQ

feMorphology crée-t-il un tracé de contour modifiable ? Non. Il modifie le résultat du filtre affiché. Cet exemple conserve les deux mêmes tracés sources : une destination exigeant un contour distinct nécessite donc une opération géométrique et une vérification de l’importation.

Pourquoi le contour doré remplit-il le trou de mon SVG ? L’anneau s’étend hors de l’alpha opaque, y compris dans les ouvertures transparentes. Dans cet exemple, un rayon de 22 remplit le trou carré. Toute autre illustration exige sa propre vérification des espaces et du rayon.

Pourquoi utiliser SourceAlpha plutôt que SourceGraphic ? SourceAlpha permet au filtre d’agir sur la silhouette sans dilater chaque canal de couleur d’origine. L’exemple colore cet anneau alpha séparément et fusionne SourceGraphic en dernier pour afficher les couleurs d’origine.

Sources

1. W3C — Filter Effects Level 1 — Définit le voisinage rectangulaire de la morphologie, les entrées de composition et le découpage par la région du filtre.
2. MDN — radius — Définit la syntaxe du rayon à une ou deux valeurs, ses unités et les valeurs désactivant l’effet.
3. MDN — operator — Distingue les opérations de morphologie des opérations de composition.
4. MDN — primitiveUnits — Établit le système de coordonnées du rayon de morphologie.
5. MDN — filterUnits — Établit le système de coordonnées de la région extérieure du filtre.

Si ta source existe uniquement sous forme matricielle, prépare une illustration vectorielle avec PerfectVector, vérifie la silhouette et les ouvertures sans filtre, puis ajoute le contour et compare le fichier final dans le logiciel qui doit le recevoir.