SVG shape-rendering crispEdges : quand est-ce utile ?

Utilise shape-rendering="crispEdges" lorsque le SVG comporte des bords volontairement nets, essentiellement droits, et qu’un test à sa taille d’affichage finale donne un meilleur résultat avec cette valeur. Conserve la valeur par défaut auto lorsque la différence est négligeable. Sur un dessin courbe, cette indication peut rendre un bord plus irrégulier. Elle modifie la façon dont le moteur dessine les formes existantes, sans modifier les formes elles-mêmes. La spécification SVG 2 la qualifie d’indication et autorise le moteur à réduire l’anticrénelage ou à aligner certains bords sur les pixels du périphérique.

Cette distinction compte lorsqu’une petite icône paraît floue ou qu’un logo semble crénelé après exportation. crispEdges ne peut ni transformer un PNG intégré en tracés, ni réparer un contour cassé, ni garantir les mêmes pixels dans chaque navigateur. Avant de modifier globalement le fichier, compare une forme représentative avec auto, crispEdges et geometricPrecision aux tailles réellement utilisées.

Ce que crispEdges demande au moteur de rendu

SVG propose quatre valeurs de shape-rendering. Ce sont des priorités, et non quatre formats d’exportation. La valeur par défaut auto laisse le moteur équilibrer vitesse, contraste des bords et précision géométrique. crispEdges privilégie un contraste fort des bords et peut supprimer l’anticrénelage ; geometricPrecision privilégie une géométrie fidèle. La référence MDN de l’attribut SVG explique qu’un moteur peut traiter différemment tous les bords, ou uniquement ceux presque horizontaux et verticaux. Aucun filtre de netteté n’est imposé.

Un attribut sur un SVG parent peut être hérité par ses formes enfants : l’appliquer à la racine peut donc affecter un cercle qui devrait rester lisse. Tu peux cibler plutôt un rectangle ou un tracé unique. Si l’attribut de présentation SVG et une déclaration CSS shape-rendering s’appliquent tous deux, la propriété CSS est prioritaire.

Nous avons comparé les mêmes formes à deux tailles

Nous avons créé un symbole rectangulaire en grille et un contour courbe comme formes SVG originales. Le balisage, les remplissages et le viewBox étaient identiques dans les trois colonnes ; seule la valeur de shape-rendering changeait. Chaque forme a été rendue à 63 et 111 pixels CSS dans Chromium, avec un zoom navigateur de 100 %. La figure est une capture du navigateur lors de ce test local, et non une illustration d’un résultat imaginaire.

Même géométrie SVG, trois indications, deux tailles

Aucun des modes ne modifie les tracés. Dans cette capture, les différences sont trop petites pour déclarer qu’un réglage est généralement supérieur. Le nom évoque un outil de réparation, mais l’effet peut être faible pour une forme, une taille et un moteur donnés. Inspecte la destination réelle avant de conserver l’attribut supplémentaire.

Il s’agissait d’un rendu Chromium unique, et non d’une étude de compatibilité entre navigateurs. Une visionneuse PDF, un éditeur de dessin ou un navigateur utilisant une autre échelle de périphérique peut rastériser différemment les mêmes tracés. La définition SVG 2 laisse volontairement les choix d’implémentation ouverts.

Teste sur une forme avant de l’appliquer partout

Enregistre une copie du SVG, puis place l’indication sur une forme représentative. Par exemple, applique-la à la partie rectangulaire d’une icône en laissant le détail courbe sur auto :

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <rect x="4" y="4" width="16" height="8" fill="#154b67"
        shape-rendering="crispEdges" />
  <path d="M5 18 Q12 11 19 18" fill="none" stroke="#23a6a1"
        stroke-width="2" shape-rendering="auto" />
</svg>

Ouvre le fichier dans sa visionneuse prévue à une petite taille d’icône, puis à une taille plus grande. Compare-le à l’original enregistré, y compris les diagonales et les courbes. Si tu appliques des styles CSS à un SVG intégré, cherche une règle qui remplace ton attribut. Retire l’indication lorsqu’elle n’apporte aucune amélioration significative ; une propriété inutile complique le diagnostic des différences d’affichage ultérieures.

Adapte la correction au véritable symptôme

Pour un sprite PNG dont la grille exacte de pixels constitue le dessin, conserver l’image matricielle peut être le choix le plus propre. La propriété CSS image-rendering: pixelated contrôle l’échantillonnage d’une image redimensionnée ; c’est une propriété différente de shape-rendering en SVG. Le guide de conversion du pixel art explique quand préserver la grille, créer des tuiles vectorielles ou lisser volontairement le contour.

Quand utiliser PerfectVector

Si ta seule source est un petit PNG aplati et que tu as besoin de tracés modifiables, une indication de rendu ne peut pas les fournir. PerfectVector est utile à cette étape antérieure : convertis le PNG en SVG candidat, puis inspecte les formes à la taille voulue. Vérifie le contour, les trous intérieurs et les petits détails avant d’essayer une indication d’affichage sur certains tracés. Un traçage peut réinterpréter les pixels en géométrie ; il ne peut pas décider si une marche d’escalier de pixel art doit devenir une courbe lisse.

Conserve le PNG lorsque la grille originale est le dessin final. Si tu disposes déjà d’un SVG propre et que seul son affichage dans le navigateur semble étrange, corrige directement l’affichage ou la géométrie. Lorsqu’un PNG aplati nécessite réellement des contours modifiables, crée un SVG candidat avec PerfectVector, inspecte ses tracés et compare le rendu navigateur à la taille finale avant d’ajouter crispEdges.

FAQ

crispEdges supprime-t-il l’anticrénelage de toutes les formes SVG ? Non. Il demande au moteur de privilégier le contraste des bords. La spécification autorise différentes implémentations, dont celles qui ne modifient que certains bords presque verticaux ou horizontaux. Teste la sortie dans la visionneuse que tu utiliseras.

Dois-je placer shape-rendering="crispEdges" sur tout le SVG ? Seulement si chaque forme enfant en bénéficie. Une indication à la racine peut aussi affecter les enfants courbes. Appliquer l’attribut à une seule forme rectangulaire est plus facile à évaluer et risque moins de dégrader une courbe.

crispEdges corrige-t-il les interstices blancs ou un PNG flou dans un SVG ? Il ne peut pas fermer un véritable espace ni remplacer des pixels matriciels par des tracés vectoriels. Diagnostique d’abord la géométrie de l’interstice. Pour un PNG redimensionné, utilise une méthode adaptée de mise à l’échelle matricielle ou crée des tracés vectoriels modifiables si c’est le véritable besoin.

Sources

1. W3C — Propriété shape-rendering de SVG 2 — Définit les quatre valeurs comme indications au moteur et explique les compromis autorisés.
2. MDN — Attribut SVG shape-rendering — Documente les formes SVG concernées, l’héritage et la priorité CSS.
3. MDN — Propriété CSS shape-rendering — Décrit le comportement de la propriété et les variations possibles du rendu des courbes.
4. MDN — Propriété CSS image-rendering — Distingue la mise à l’échelle des pixels matriciels du rendu des bords de formes vectorielles.