Die Erstellung von SVGs mit Rauscheffekt

 (daniel.do)
4 Punkte von GN⁺ 2023-12-08 | 2 Kommentare | Auf WhatsApp teilen

Hinzufügen von Rauscheffekten zu SVG

  • Interesse daran, wie die Weiterentwicklung von Webtechnologien das Webdesign beeinflusst
  • Die steigende Pixeldichte von Displays fördert den Wechsel von Fotografien zu Vektorillustrationen
  • In jüngeren Designtrends tauchen Rauschtexturen mit strukturierten Schatten- oder Lichteffekten auf

Studio Vellekoop & León

  • Persönliche Vorliebe für den Stil von Rauschtexturen und die Schwierigkeit, ihn in SVG nachzubilden
  • Interesse an SVG und die Erkundung verschiedener Wege, unterschiedliche Effekte zu erzeugen
  • Vorstellung von SVGO, einem Optimierungstool für SVG, sowie Erfahrungen beim direkten Schreiben von SVG

Grundformen und Verläufe

  • In SVG lassen sich Grundformen wie Kreise oder Rechtecke leicht zeichnen
  • Beim Einsatz von Verläufen wird ein Verlauf benötigt, der sich abhängig von der Basisfarbe verändert, um Komponenten wiederzuverwenden
  • Einführung in die Verwendung von Masken und in die Methode, Formen mit <defs> nur einmal zu definieren und sie mit dem Element use zu referenzieren

Ergebnis

  • Erzeugung einer künstlichen Rauschtextur mit dem Filter <feTurbulence>
  • Anwendung von Filtereffekten, um Farbveränderungen zu entfernen und die Textur natürlich mit der gewählten Füllfarbe zu mischen
  • Am Ende entstand eine zufriedenstellende Illustration, die in Safari jedoch anders gerendert wird

Zusätzliche Informationen 7. Dezember 2023

  • Der Artikel wurde bei Hacker News eingereicht und erhielt einige Reaktionen
  • Hinweis auf einen ähnlichen Artikel zu diesem Thema bei CSS Tricks von Jimmy Chion aus dem Jahr 2021
  • Zum Zeitpunkt des Schreibens war der frühere Artikel nicht bekannt, jetzt ist er als ergänzendes Material verlinkt

Meinung von GN⁺

Das Wichtigste an diesem Artikel ist die Auseinandersetzung damit, wie sich Rauschtexturen als einer der aktuellen Webdesign-Trends mit SVG umsetzen lassen. Das ist nicht nur für Webdesigner und Entwickler ein interessantes Thema, sondern bietet auch angehenden Softwareingenieuren, die moderne Webdesign-Techniken lernen möchten, nützliche Informationen. Anhand praktischer Beispiele zur Flexibilität von SVG-basiertem Design und zu Optimierungsmethoden können Leser lernen, wie sich komplexe Designeffekte effizient umsetzen lassen.

Verwandte Beiträge

2 Kommentare

 
ndrgrd 2023-12-09

Safari enttäuscht die Erwartungen mal wieder nicht! Der Name des IE der 2020er ist wirklich nicht unverdient.
 
GN⁺ 2023-12-08
Hacker-News-Kommentare

  • Es wurde versucht, mit SVG Schatteneffekte umzusetzen, die sich auf Canvas nicht erzeugen ließen, aber da CSS-Schatten in Safari nicht funktionierten, mussten native SVG-Filter verwendet werden. Da das Ergebnis anders aussah als in anderen Browsern, wurde JavaScript eingesetzt, um Safari zu erkennen und die CSS-Version zu deaktivieren.

  • Der Hintergrund zum „rekursiven Yin und Yang“ wird im betreffenden Blog erklärt; es ist geplant, mit Texturen zu experimentieren, aber dass Safari es anders darstellt, ist frustrierend. Es stellt sich die Frage, ob die Interpretation von SVG jemals standardisiert wird.

  • Es ist frustrierend, dass sich ein bestimmter Illustrationsstil mit SVG nicht leicht nachbilden lässt. Dieser Stil wird als „Dithering“ bezeichnet, und auf der CSS-Tricks-Seite „Grainy Gradients“ wird dieselbe Technik erklärt. Es gibt auch eine Alternative, die auf das gesamte Bild per CSS angewendet wird.

  • Es wurde ein komplexes Konferenzposter mit SVG erstellt, aber Browser und Programme rendern es jeweils unterschiedlich. Man kann SVG einbetten/verlinken, aber wenn andere SVGs eingebunden werden, funktioniert es nicht. Manchmal zeigen Browser eingebettete/verlinkte Bilder wegen „Sicherheits“-Problemen nicht an. Das Konvertieren komplexer SVGs in PDF führt uneinheitlich zu Speicherproblemen. Jedes Tool zur Umwandlung von SVG in PDF liefert andere Ergebnisse. Werkzeuge wie Inkscape behandeln eingebundene SVGs manchmal als Rastergrafiken.

  • Filmfotografen haben sich bemüht, das Filmkorn loszuwerden, aber Digitalfotografen neigen dazu, es wieder hinzuzufügen. In der Sauberkeit des Digitalen wirken solche Beispiele reizvoll.

  • Inkscape kann dieses Rauschen mit verschiedenen Filtereffekten hinzufügen, und beim Export als Plain SVG lässt sich im Code die Verwendung von feTurbulence erkennen. Außerdem wurde verglichen, wie Affinity Designer 2 mit Rauschen umgeht. Im exportierten SVG ist das Rauschen als base64-JPEG-Bild enthalten.

  • Die Website „ApeFest“ erzeugt dynamisches Rauschen mit einem gekachelten PNG-Overlay, das per CSS-Animationen (tatsächlich per JS bewegt) „zufällig“ bewegt wird. Technisch simpel, aber effektiv.

  • Da sich das Aussehen von SVG-Filtern je nach Engine und Skalierungsfaktoren stark unterscheidet, werden sie nur für subtile Details eingesetzt und nur dann, wenn Präzision nicht wichtig ist. Filter wie feDisplacementMap zerstören das Antialiasing und ruinieren dadurch die Hälfte der Situationen, in denen man sie eigentlich verwenden möchte.

  • Es wird davon abgeraten, so etwas als Seitenhintergrund zu verwenden. Bei früheren Versuchen traten auf verschiedenen Geräten seltsame Bugs auf, und bei großen Websites fror die Seite teils komplett ein oder SVG hörte ab einer bestimmten Größe auf zu rendern.

  • Perlin Noise und sein Nachfolger Fractal Noise sind sehr effektiv, um Realismus zu erhöhen oder ein „organisches“ Gefühl zu erzeugen. Zum Beispiel wurden sie in „Aladdin (1992)“ in der Szene mit der Flucht aus der Höhle wirkungsvoll eingesetzt.

  • Es besteht Interesse daran, Effekte auf eine Weise zu erzeugen, die unabhängig von der Zoomstufe ist. Außerdem wird im Zusammenhang mit dem Hinzufügen von Zufälligkeit gefragt, ob es eine Möglichkeit gibt, einen Seed zu setzen, mit dem sich für eine gegebene Größe genau ein korrektes Render-Ergebnis definieren lässt.