Créer des SVG bruités

Ajouter un effet de bruit à des SVG

• Intérêt pour la manière dont l’évolution des technologies web influence le web design
• L’augmentation de la densité de pixels des écrans favorise le passage de la photo à l’illustration vectorielle
• Les tendances récentes du design voient apparaître des textures de bruit utilisant des ombres texturées ou des effets d’éclairage

Studio Vellekoop & León

• Préférence personnelle pour le style de texture bruitée et difficulté à le reproduire en SVG
• Intérêt pour le SVG et exploration de différentes façons de produire divers effets
• Partage de l’apparition de SVGO, un outil d’optimisation SVG, et de l’expérience d’écriture directe de SVG

Formes de base et dégradés

• Dans SVG, il est facile de dessiner des formes de base comme des cercles ou des rectangles
• Lorsqu’on applique des dégradés, il faut des dégradés qui varient selon la couleur de base afin de permettre la réutilisation des composants
• Présentation de l’usage des masques et de la façon de définir une forme une seule fois avec <defs> puis de la référencer avec l’élément use

Résultat

• Création d’une texture de bruit artificielle à l’aide du filtre <feTurbulence>
• Application d’effets de filtre pour supprimer les variations de couleur et fondre naturellement le rendu avec la couleur de remplissage choisie
• L’illustration finale est satisfaisante, mais le rendu diffère dans Safari

Informations complémentaires 7 décembre 2023

• L’article a été soumis sur Hacker News et a suscité quelques réactions
• Présentation d’un article sur un sujet similaire publié sur CSS Tricks par Jimmy Chion en 2021
• L’auteur n’avait pas connaissance de cet article précédent au moment de la rédaction, mais l’ajoute désormais comme ressource complémentaire

Avis de GN⁺

Le point le plus important de cet article est l’exploration de la manière d’implémenter en SVG les textures de bruit, l’une des tendances récentes du web design. Ce sujet est non seulement intéressant pour les web designers et les développeurs, mais il fournit aussi des informations utiles aux ingénieurs logiciels débutants qui souhaitent apprendre les techniques récentes du web design. À travers des exemples pratiques sur la flexibilité du design en SVG et les méthodes d’optimisation, les lecteurs peuvent apprendre à mettre en œuvre efficacement des effets visuels complexes.

[ndrgrd]

Safari ne déçoit décidément jamais ! Le surnom d’IE des années 2020 ne lui va vraiment pas si mal.

[GN⁺]

Avis Hacker News

• J’ai essayé d’utiliser du SVG pour obtenir un effet d’ombre impossible à réaliser sur canvas, mais les ombres CSS ne fonctionnaient pas dans Safari, j’ai donc dû utiliser les filtres natifs du SVG. Comme le rendu différait des autres navigateurs, j’ai utilisé du JavaScript pour détecter Safari et désactiver la version CSS.

• Le contexte autour du « yin-yang récursif » est expliqué sur le blog concerné, et il est prévu d’expérimenter avec les textures, mais le fait que Safari affiche un rendu différent est frustrant. Je me demande si l’interprétation du SVG finira par être standardisée.

• Il est frustrant de constater qu’il n’est pas facile de reproduire un certain style d’illustration en SVG. Ce style s’appelle le « dithering », et la page « Grainy Gradients » de CSS-Tricks décrit la même technique. Il existe aussi une alternative qui applique l’effet à toute l’image en utilisant du CSS.

• J’ai créé un poster de conférence complexe en SVG, mais le rendu diffère selon les navigateurs et les logiciels. On peut l’intégrer en incluant/liant le SVG, mais inclure un autre SVG à l’intérieur ne fonctionne pas. Il arrive que des navigateurs n’affichent pas les images intégrées/liées pour des raisons de « sécurité ». Convertir des SVG complexes en PDF provoque de manière irrégulière des problèmes de mémoire insuffisante. Chaque outil de conversion SVG vers PDF donne un résultat différent. Des outils comme Inkscape traitent parfois les SVG inclus comme des images matricielles.

• Les photographes argentiques ont longtemps essayé d’éliminer le grain de la pellicule, mais les photographes numériques ont tendance à vouloir le rajouter. Dans la propreté du numérique, ce type d’exemples paraît séduisant.

• Inkscape permet d’ajouter ce type de bruit via différents effets de filtre, et en exportant en Plain SVG, on peut voir dans le code l’utilisation de feTurbulence. J’ai aussi comparé la manière dont Affinity Designer 2 gère le bruit. Dans le SVG exporté, le bruit est inclus sous forme d’image JPEG encodée en base64.

• Le site web « ApeFest » crée un bruit dynamique à l’aide d’une superposition de PNG en tuiles qui se déplacent « aléatoirement » grâce à une animation CSS (en réalité pilotée par du JS). C’est techniquement simple, mais efficace.

• Comme l’apparence des filtres SVG varie énormément selon le moteur de rendu et les facteurs d’échelle, je ne les utilise que pour des détails subtils, et seulement quand la précision n’est pas essentielle. Des filtres comme feDisplacementMap détruisent l’anticrénelage et ruinent la moitié des cas où j’aimerais les utiliser.

• Je déconseille de l’utiliser comme arrière-plan de page. Quand j’ai essayé auparavant, cela provoquait d’étranges bugs sur divers appareils, et pour les gros sites, la page se figeait complètement ou le rendu du SVG cessait au-delà d’une certaine taille.

• Le bruit de Perlin et son successeur, le bruit fractal, sont en réalité très efficaces pour ajouter du réalisme ou une sensation « organique ». Par exemple, ils ont été utilisés efficacement dans la scène de fuite de la caverne dans « Aladdin (1992) ».

• Il y a de l’intérêt pour une manière de créer des effets indépendants du niveau de zoom. Par ailleurs, concernant l’ajout d’aléatoire, je me demande s’il existe un moyen de définir une seed permettant d’obtenir un rendu correct unique pour une taille donnée.