Exploiter toute la puissance des filtres SVG pour la typographie

Au-delà des filtres CSS classiques

En intégration web, la propriété CSS filter est souvent associée à des ajustements basiques comme blur(), drop-shadow() ou grayscale(). Pourtant, en la couplant à la déclaration de filtres SVG personnalisés avec <filter>, le navigateur devient un véritable outil de composition graphique vectorielle.

L’un des cas d’usage les plus révélateurs concerne les titres massifs à contours complexes, difficiles à maîtriser avec les propriétés CSS standards.

Le problème de -webkit-text-stroke

Sur un titre où les lettres sont collées ou dont l’intérieur est transparent, le contour CSS échoue pour deux raisons.

Traiter le mot comme un masque global

La solution consiste à ne plus voir le texte comme une suite de lettres, mais comme une forme vectorielle unique. Le filtre intercepte le SourceGraphicavant son affichage et lui applique un pipeline de cinq primitives.

1. 1feMorphology

   Dilate la silhouette globale du mot.

2. 2feComposite · out

   Soustrait le texte original pour évider le centre.

3. 3feFlood + composite

   Applique la couleur uniquement sur le contour.

4. 4feComponentTransfer

   Règle indépendamment l’opacité du texte intérieur.

5. 5feMerge

   Superpose le contour et le texte traité.

Code source d’implémentation

Le filtre peut être déclaré une seule fois dans un SVG invisible, puis appliqué à n’importe quel élément HTML avec la propriété CSS filter.

<svg
  style="position: absolute; width: 0; height: 0; pointer-events: none;"
  aria-hidden="true"
>
  <filter
    id="hollow-stroke"
    x="-40%"
    y="-40%"
    width="180%"
    height="180%"
    color-interpolation-filters="sRGB"
  >
    <!-- Étape 1 : Élargissement global de la silhouette -->
    <feMorphology
      operator="dilate"
      radius="2"
      in="SourceGraphic"
      result="base-elargie"
    />

    <!-- Étape 2 : Évidage du centre par soustraction -->
    <feComposite
      in="base-elargie"
      in2="SourceGraphic"
      operator="out"
      result="contour-seul"
    />

    <!-- Étape 3 : Coloration du contour -->
    <feFlood flood-color="#7000FF" result="couleur-bordure" />
    <feComposite
      in="couleur-bordure"
      in2="contour-seul"
      operator="in"
      result="bordure-finale"
    />

    <!-- Étape 4 : Opacité du texte intérieur -->
    <feComponentTransfer in="SourceGraphic" result="fond-transparent">
      <feFuncA type="linear" slope="0.3" />
    </feComponentTransfer>

    <!-- Étape 5 : Fusion des calques -->
    <feMerge>
      <feMergeNode in="bordure-finale" />
      <feMergeNode in="fond-transparent" />
    </feMerge>
  </filter>
</svg>

.titre-fusion {
  color: #7000FF;
  filter: url(#hollow-stroke);

  font-size: 140px;
  font-weight: 900;
  letter-spacing: -12px;
  line-height: 0.85;
}

Que peut-on créer d’autre ?