Sur une page d'équipe, chaque photo de profil doit apparaître dans un cercle parfait, ou parfois dans un hexagone pour coller à la charte graphique. Recadrer l'image en amont dans un logiciel de retouche fonctionne, mais il faut refaire l'opération à chaque changement de photo, et la forme reste figée dans le fichier.
L'élément <clipPath> résout ce problème directement dans le SVG : il définit une silhouette qui découpe n'importe quel autre élément qui la référence, sans jamais modifier les pixels ou les points d'origine. Changez la photo, la forme de découpe reste identique.
Définition
Un <clipPath> regroupe une ou plusieurs formes (un <path>, un <rect>, une ellipse) qui définissent ensemble une zone de découpe. Ce contenu n'est jamais affiché tel quel : il sert uniquement de gabarit. Pour qu'il agisse, un autre élément du document doit le référencer via la propriété de présentation clip-path, avec la syntaxe clip-path="url(#monId)". Tout ce qui dépasse de la silhouette devient invisible, tout ce qui est à l'intérieur reste affiché normalement.
Attributs principaux
L'attribut le plus important n'est pas porté par <clipPath> lui-même mais par les formes qu'il contient : c'est leur tracé qui dessine la découpe. Deux réglages méritent tout de même d'être connus.
- id : obligatoire, c'est lui que l'attribut
clip-pathde l'élément à découper vient référencer. - clipPathUnits : vaut
userSpaceOnUsepar défaut (les coordonnées de la découpe suivent le système de coordonnées du document) ouobjectBoundingBox(les coordonnées vont de 0 à 1, relatives à la boîte englobante de l'élément découpé, pratique pour une forme réutilisable sur des tailles variées).
Exemple de rendu concret
Voici un badge photo hexagonal, construit avec un <polygon> comme gabarit de découpe :
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="hexagone">
<polygon points="100,10 180,55 180,145 100,190 20,145 20,55" />
</clipPath>
</defs>
<image href="photo-equipe.jpg" x="0" y="0" width="200" height="200" clip-path="url(#hexagone)" />
</svg>Le fichier photo reste un simple rectangle. C'est uniquement au moment de l'affichage que la forme hexagonale prend effet, et elle s'applique à n'importe quelle autre image tant que l'identifiant hexagone est référencé.
Différence avec la propriété CSS clip-path
Les deux partagent le même nom, ce qui prête à confusion. La propriété CSS clip-path peut soit pointer vers un <clipPath> SVG avec une url, soit utiliser une fonction de forme autonome comme circle(), polygon() ou inset(), calculée entièrement en CSS sans aucun balisage SVG. <clipPath> lui-même n'existe qu'à l'intérieur d'un SVG, contient de vraies formes vectorielles comme enfants, et est pensé pour être défini une seule fois puis référencé par plusieurs éléments via le même identifiant.
| Aspect | <clipPath> (SVG) | Fonction clip-path (CSS) |
|---|---|---|
| Où ça vit | Dans le SVG, en général dans defs | Dans une feuille de style ou l'attribut style |
| Formes possibles | Tracés SVG réels (path, rect, polygon...) | Fonctions prédéfinies (circle(), polygon(), inset()...) |
| Réutilisation | Un seul id référencé par plusieurs éléments | Doit être répétée sur chaque règle |
Piège classique
<clipPath> avec un P majuscule, jamais <clippath> tout en minuscules. Une erreur de casse ne provoque aucune erreur visible dans la console : le navigateur ignore silencieusement l'élément inconnu, et l'image ou la forme censée être découpée s'affiche simplement sans aucune découpe.Cas d'usage réel
Sur un site d'apprentissage en ligne, <clipPath> sert typiquement à afficher les avatars des utilisateurs dans un cercle parfait sans dépendre du format d'upload de la photo, à découper une capture d'écran pour qu'elle s'insère exactement dans le contour d'une maquette de téléphone dessinée en SVG, ou à donner une forme de médaille ou de bouclier à une image de badge de récompense.
FAQ
<clipPath> ?Oui. Comme le contenu d'un <clipPath> est composé de formes SVG classiques, leurs attributs (points d'un polygone, rayon d'une ellipse, position d'un rectangle) peuvent être animés ou modifiés en JavaScript, ce qui fait bouger la zone visible en temps réel.
<clipPath> peut-il être visible directement dans la page ?Non, jamais. Le navigateur ne rend pas le contenu du <clipPath> à l'écran : seul l'élément qui le référence via clip-path devient visible, découpé selon sa silhouette. Le placer en dehors d'un defs ne change rien à ce comportement, seule la référence par id compte.
<clipPath> pour chaque élément à découper ?Non, c'est justement son intérêt : un seul <clipPath> défini une fois dans le document peut être référencé par autant d'éléments que nécessaire, via le même identifiant, ce qui garantit une forme strictement identique partout où elle est utilisée.