Wie viele Kilobyte darf ein Wellen-SVG haben?

Als Trenner unter 6 KB, als Hintergrund unter 10 KB. Mit gzip oder Brotli schrumpft SVG auf ein Drittel, weil Pfade sehr repetitiv sind.

SVG, solange die Welle aus Flächen besteht. PNG nur, wenn Fotos, Verläufe mit Rauschen oder Software ohne SVG-Unterstützung im Spiel sind, etwa manche Mail-Clients und Präsentationsprogramme.

Braucht eine Welle einen alt-Text?

Nein, sie ist Dekoration. Inline mit aria-hidden true, als img mit leerem alt. So überspringen Screenreader sie.

SVG-Wellen optimieren: kleiner, schärfer, schneller

Wellen sind Vektoren, und Vektoren sind billig. Trotzdem sieht man Seiten, die für einen Trenner 60 KB laden. Das lässt sich vermeiden, ohne dass man an der Form spart.

Stützpunkte: weniger ist glatter

Der Generator zeichnet jede Schicht mit 64 Stützpunkten (statisch) beziehungsweise 128 (animiert, doppelte Breite) als kubische Bézier-Kurve. Das reicht für 1440 Pixel Breite bei voller Glätte, weil die Kurve zwischen den Punkten interpoliert. Mehr Punkte machen die Datei größer, nicht die Welle schöner. Eine Welle mit 2.000 Punkten aus einem Zeichenprogramm ist fast immer ein Export-Artefakt.

Rundung

Koordinaten mit einer Nachkommastelle sind visuell nicht von Koordinaten mit vier zu unterscheiden, sparen aber rund 40 Prozent Dateigröße. Der Generator rundet auf eine Stelle. Wer aus einem Zeichenprogramm exportiert, nutzt SVGO mit --precision=1.

npx svgo --precision=1 --multipass wellen.svg

Kompression

SVG ist Text und komprimiert hervorragend. Ein 5-KB-SVG wird mit Brotli zu etwa 1,5 KB. Prüfe, ob dein Hosting image/svg+xml komprimiert; Netlify, Cloudflare und Vercel tun es standardmäßig, manche Apache-Konfigurationen nicht.

Data-URI oder Datei?

Als Data-URI im CSS spart die Welle einen Request, wird aber nicht separat gecacht und kann nicht komprimiert werden, weil sie Teil des Stylesheets ist. Faustregel: unter 8 KB als Data-URI, darüber als eigene Datei mit langem Cache-Header.

Wann PNG

PNG ist richtig, wenn die Welle in ein Umfeld ohne SVG-Unterstützung muss (viele Mail-Clients, ältere Präsentationssoftware, manche CMS-Uploads). Der PNG-Export des Generators ist 1440 Pixel breit; für Retina-Displays exportiere die Höhe verdoppelt und skaliere per CSS herunter. Rechne mit dem Fünffachen der SVG-Größe.

Barrierefreiheit

Eine Welle trägt keine Information. Sie bekommt deshalb aria-hidden="true" (inline) oder ein leeres alt="" (als img). Bewegte Wellen brauchen einen Ausschalter über prefers-reduced-motion, sonst stören sie Menschen mit Bewegungsempfindlichkeit. Und Text über einer Welle braucht Kontrast: Bei hellen Schaumkämmen unter heller Schrift hilft eine halbtransparente Fläche zwischen beiden.

Checkliste

Stützpunkte unter 100 je Schicht.
Koordinaten auf eine Nachkommastelle.
Kompression am Server prüfen.
Unter 8 KB als Data-URI, sonst Datei.
aria-hidden oder leeres alt.
Bewegung mit Ausschalter.