Cartes de déplacement SVG : déforme l’aperçu de ton logo

Un filtre SVG feDisplacementMap déforme l’image affichée par un moteur de rendu en utilisant une autre image comme carte d’échantillonnage. Il laisse intactes les données de tes chemins sources. Utilise-le pour un aperçu de logo réversible ou une illustration web, et conserve un maître sans filtre pour la modification et la livraison.

Pour un premier exemple prévisible, définis in="SourceGraphic", choisis une carte nommée pour in2, précise les canaux horizontal et vertical, puis définis color-interpolation-filters="sRGB". La référence de déplacement de MDN explique les deux entrées et la formule d’échantillonnage. Une forme qui semble courbée à l’écran n’est pas automatiquement un nouveau contour modifiable.

Décide de quel fichier tu as besoin

L’exemple ci-dessous utilise un badge carré original dont le centre est ouvert. Ses bords droits facilitent la comparaison de la déformation. C’est un motif de démonstration, pas le logo d’un client ni le résultat d’un vectoriseur.

L’aperçu et la source sont distincts

Pour un changement d’aperçu limité à la couleur, utilise la recoloration avec feColorMatrix. Le déplacement répond à un problème spatial : à quel endroit l’image rendue est échantillonnée.

Copie un exemple SVG statique et contrôlé

Enregistre ce code au format SVG et ouvre-le dans un navigateur. Il contient un chemin, une source de bruit fixe, une matrice qui garde le canal horizontal variable et le canal vertical neutre, ainsi qu’une échelle de déplacement de 36.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200">
  <defs>
    <filter id="warp" x="-25%" y="-25%" width="150%" height="150%" primitiveUnits="userSpaceOnUse"
            color-interpolation-filters="sRGB">
      <feTurbulence type="fractalNoise" baseFrequency="0.035"
                    numOctaves="1" seed="8" result="noise"/>
      <feColorMatrix in="noise" type="matrix" values="1 0 0 0 0
        0 0 0 0 0.5
        0 0 0 0 0
        0 0 0 0 1" result="map"/>
      <feDisplacementMap in="SourceGraphic" in2="map" scale="36"
                         xChannelSelector="R" yChannelSelector="G"/>
    </filter>
  </defs>
  <path d="M42 42H158V158H42Z M78 78H122V122H78Z" fill="#e76b50" fill-rule="evenodd" filter="url(#warp)"/>
</svg>

feTurbulence fournit une variation procédurale. La référence du bruit de MDN documente les réglages de fréquence, d’octaves, de graine et de type. Nous gardons ces valeurs fixes ici pour que les changements de scale comparent l’intensité avec la même carte.

La matrice conserve le canal rouge du bruit, fixe le vert à 0.5, le bleu à zéro et l’alpha à un. Sa sortie est une carte de contrôle, pas une nouvelle palette pour le badge corail. La référence des matrices de MDN explique la transformation des canaux. Le rouge commande ensuite l’échantillonnage horizontal, tandis que le vert apporte un décalage vertical neutre.

Pour comparer les intensités, remplace uniquement scale="36" par scale="12", puis par scale="0". Garde le chemin, la graine, la matrice de la carte, l’espace colorimétrique et le viewBox inchangés. Tu isoles ainsi la décision que tu prends.

Interprète l’échelle comme un décalage d’échantillonnage

Pour les canaux sélectionnés de la carte, les positions d’échantillonnage de la source sont :

sampleX = x + scale × (horizontalChannel - 0.5)
sampleY = y + scale × (verticalChannel - 0.5)

La spécification de déplacement du W3C définit ce mappage inverse : chaque position de sortie demande où échantillonner la source. Un décalage d’échantillonnage positif n’est pas une instruction de déplacer un nœud du chemin dans cette direction.

À une échelle de 36, le canal horizontal produit les décalages suivants :

L’exemple utilise primitiveUnits="userSpaceOnUse" : ces valeurs se rapportent donc au système de coordonnées utilisateur du SVG. Elles ne garantissent pas des distances en pixels CSS après la mise à l’échelle du viewBox. La spécification définit aussi une échelle de 0 comme n’ayant aucun effet de déplacement.

La valeur verte fixe garde l’échantillonnage vertical neutre dans cet exemple. Pour explorer ensuite une déformation sur deux axes, fournis volontairement une variation dans le vert aussi. Ne change pas les canaux et la carte en même temps lorsque tu diagnostiques un résultat inattendu.

Définis le gris neutre dans un espace colorimétrique explicite

Neutre signifie une valeur de canal sélectionné de 0.5 dans l’espace de travail utilisé pour la carte. Cela ne signifie pas que toute nuance visuellement gris moyen est neutre avec tous les réglages de filtre.

L’espace de travail par défaut des filtres est linearRGB, alors que cet exemple utilise explicitement sRGB. Une couleur écrite rgb(50%,50%,50%) n’a pas la valeur numérique 0.5 après conversion en RGB linéaire. La référence de color-interpolation-filters de MDN documente la valeur par défaut et les choix explicites.

Pour obtenir une carte constante de diagnostic, remplace la primitive de bruit et la matrice par :

<feFlood flood-color="rgb(50%,50%,50%)" result="map"/>

Garde la primitive de déplacement, les sélecteurs et le sRGB explicite sur le filtre. La référence de feFlood de MDN documente l’image de couleur constante utilisée ici. Ce contrôle aide à distinguer une variation de la carte d’un décalage dû à l’espace colorimétrique.

Dans notre fichier de test Chrome, le badge à carte constante sRGB semblait aligné avec le badge sans filtre. Supprimer le réglage colorimétrique explicite faisait visiblement décaler le même badge à carte grise. C’est une observation dans un navigateur, pas une affirmation de rendu identique au pixel près entre moteurs. Garde le réglage colorimétrique lorsque tu adaptes cette recette à ton dessin ; vérifie si des règles CSS le remplacent.

Examine le même badge à deux tailles

Nous avons rendu le badge original à 120 × 120 et 300 × 300 pixels CSS dans Chrome. Chaque taille présentait la même carte fixe aux échelles 0, 12 et 36, avec le même viewBox 0 0 200 200.

L’effet était visible aux deux tailles ; le plus grand aperçu facilitait l’examen du trou et des bords. Le DOM du navigateur contenait toujours un chemin dans chacun des six exemples, avec des valeurs d identiques. Trois contrôles supplémentaires de 200 pixels comparaient un badge sans filtre à des cartes grises constantes en sRGB explicite et en linearRGB par défaut.

Ces exemples SVG ont été créés indépendamment. Ils établissent le comportement de ce fichier dans le navigateur testé et l’absence de changement de sa géométrie source. Ce ne sont ni des tests d’éditeurs natifs, ni des résultats de PerfectVector, ni une étude de compatibilité.

Pour ton propre logo, examine d’abord la plus petite taille d’affichage réelle. Une ouverture ou un angle déformé peut changer la lecture du signe même si le maître propre reste intact.

Diagnostique un décalage, un effet faible ou un bord rogné

Tout le badge se décale au lieu de se courber. Teste le contrôle à carte constante avec sRGB explicite. Vérifie les canaux sélectionnés et si la carte varie réellement dans ces canaux. Une valeur sélectionnée constante et non neutre crée un décalage d’échantillonnage uniforme.

L’effet reste faible. Confirme que in2="map" correspond au result nommé de la matrice. Augmente l’échelle progressivement en gardant la même graine et la même fréquence. Ensuite, si nécessaire, essaie une autre carte. Une nouvelle graine change le motif spatial : c’est donc une comparaison distincte.

Le bord vertical se comporte de façon inattendue. Cet exemple est conçu pour un déplacement horizontal : xChannelSelector="R" et yChannelSelector="G", avec G fixé à 0.5. Vérifie la ligne de matrice et l’orthographe du canal avant d’ajouter une variation sur deux axes.

Le contour déformé est coupé. Examine la région du filtre avant de modifier le chemin source. L’exemple prévoit de l’espace supplémentaire avec x="-25%", y="-25%" et une largeur et une hauteur de 150%. La référence de filter de MDN documente ces attributs de région. Les effets plus extrêmes peuvent nécessiter une autre région, et un viewport environnant peut imposer une limite distincte. Suis les vérifications du rognage des filtres et viewports SVG si agrandir la région ne résout pas la sortie manquante.

Le SVG perd l’effet dans une autre destination. Ouvre le fichier exact livré dans cette destination. Un aperçu de navigateur n’établit pas le comportement d’un éditeur, d’un exportateur PDF ou d’une machine de découpe. Garde le maître propre disponible au lieu de promettre que le filtre sera transféré sans changement.

Livre le maître propre séparément

Pour une version sans filtre, supprime filter="url(#warp)" du chemin et retire la définition du filtre inutilisée. Conserve le d original, fill-rule="evenodd", le fond et le viewBox. Ouvre le fichier obtenu et confirme que l’ouverture carrée et les bords droits correspondent à la référence propre.

Utilise des noms de fichiers distincts pour le maître propre et le traitement visuel. Si tu répètes le SVG filtré en ligne sur une page, donne à chaque filtre un ID unique et actualise sa référence url(#...). Examine la méthode d’intégration finale et les navigateurs que tu prévois de prendre en charge.

Si le contour déformé final lui-même doit être modifiable, prépare cette géométrie comme un travail graphique distinct. Ce filtre ne transforme pas l’aperçu en nouvelles commandes de chemin. Vectoriser un aperçu pixellisé constitue aussi une nouvelle conversion, avec ses propres contrôles de précision et de nettoyage ; cela ne retrouve pas le maître original resté mathématiquement inchangé.

Un PNG placé dans un SVG est une autre distinction encore. Consulte les fichiers SVG contenant des images matricielles avant de supposer que le nom de fichier garantit des chemins de logo modifiables.

Quand la vectorisation de logo aide

Si ton logo original propre ne subsiste qu’en PNG ou JPG, vectorise ce logo source, puis examine sa silhouette, ses trous et ses zones de couleur modifiables avant d’ajouter un filtre d’affichage. PerfectVector réalise la conversion matricielle vers vectorielle ; le graphe de déplacement de ce guide est un traitement SVG distinct. Il ne transforme pas l’aperçu déformé en contour de production garanti.

Si tu possèdes déjà le maître de chemins propre, utilise directement ce fichier. Pour la préparation de la source et le nettoyage du logo, le guide de vectorisation des logos traite de la récupération, plutôt que de la déformation dans le navigateur.

Questions fréquentes

feDisplacementMap change-t-il mes chemins SVG ? Ce filtre modifie l’image rendue par un échantillonnage piloté par une carte. Dans le fichier de test original du navigateur, les six exemples d’intensité conservaient un chemin avec des valeurs d identiques.

Pourquoi une carte de déplacement grise déplace-t-elle quand même mon dessin ? Neutre correspond à une valeur de canal de 0.5 dans l’espace colorimétrique de travail de la carte. Un gris sRGB de 50 % n’a pas la valeur numérique 0.5 après conversion vers l’espace linearRGB par défaut. Utilise un réglage colorimétrique explicite et un test contrôlé à carte constante.

Que signifie une échelle de 36 dans cet exemple ? Avec les unités de primitive userSpaceOnUse, des valeurs de canal sélectionnées allant de 0 à 1 donnent des décalages d’échantillonnage de -18 à +18 unités utilisateur SVG. La distance affichée dépend de la mise à l’échelle du viewBox SVG.

Puis-je envoyer directement le SVG déformé à une machine de découpe ? La déformation affichée n’est pas une nouvelle géométrie de coupe modifiable. Conserve un maître de chemins sans filtre et examine la destination réelle ; prépare des contours déformés permanents séparément si le travail le demande.

Sources

1. MDN : feDisplacementMap — Entrées source et carte, canaux et comportement d’échantillonnage.
2. W3C : Filtre de déplacement — Mappage inverse, échelle et coordonnées de primitive.
3. MDN : feTurbulence — Réglages fixes de carte procédurale.
4. MDN : feColorMatrix — Valeurs explicites des canaux de la carte de contrôle.
5. MDN : color-interpolation-filters — linearRGB par défaut et sRGB explicite.
6. MDN : feFlood — Contrôle à carte de couleur constante.
7. MDN : filter — Attributs de la région du filtre.

Si l’original propre n’existe qu’en matriciel, convertis ton logo en SVG, vérifie sa silhouette et ses trous, puis enregistre ce maître avant de créer une copie d’affichage déformée distincte.