Optimierung ist keine Validierung oder Sanitierung
SVG ist XML, das der Browser als Grafik darstellt, kann aber auch Referenzen, Stile und Verhalten enthalten. Leerraum, Editor-Metadaten oder überflüssige Gruppen zu entfernen spart möglicherweise Bytes, entscheidet aber nicht, ob eine Datei für eine Seite geeignet ist. Trenne drei Fragen: Ist das Dokument gültiges XML, bleibt die vorgesehene Darstellung erhalten und ist es für sein Ziel akzeptabel? Ein Optimierer kann einen Pfad vereinfachen oder Kommentare entfernen; ein Sanitizer muss über script, Event-Handler, externe Links, foreignObject und gefährliche URLs entscheiden. Ein kleineres Ergebnis ist kein Sicherheitsbeweis. Stammt ein SVG von Dritten, prüfe es nach einer Inhaltsrichtlinie und öffne die Ausgabe vor der Veröffentlichung erneut.
Kontrolliertes Beispiel: DOM-Elemente und Bytes zählen
Arbeite immer mit einer Kopie. Nimm ein einfaches Icon mit zwei verschachtelten Gruppen, einem hilfreichen Titel, einer Beschreibung, Editor-Metadaten und vier Formen. Zähle vor der Optimierung DOM-Elemente mit dem Inspektor oder suche nach svg-, g-, path-, title- und desc-Tags; notiere außerdem die Dateigröße in Bytes. Führe die Optimierung aus und vergleiche beide Zahlen. Leere Gruppen oder Editor-Metadaten dürfen verschwinden, ein zugänglicher Titel jedoch nicht ohne geplanten Ersatz. Speichere Original und Ausgabe unter verschiedenen Namen. Die Verkleinerung ist nur wertvoll, wenn Darstellung, Zweck und benötigte Referenzen die Änderung überstehen.
Darstellung bestätigen, nicht nur das Markup
Öffne Original und Ausgabe in derselben Browserversion und teste das Icon auch dort, wo es in einer Oberfläche verwendet wird. Prüfe Kontur, Füllung, Strich, Deckkraft, viewBox, Seitenverhältnis und Beschneidung bei kleinen und großen Größen. Zoome hinein, um Genauigkeitsänderungen bei Kurven und feinen Linien zu erkennen. Nutzt das SVG eine ID für Verlauf, clipPath, Maske oder Marker, kontrolliere, dass jedes url(#id) noch auf eine vorhandene ID verweist. Ein schneller Bildvergleich kann einen Fehler übersehen, der nur auf dunklem Hintergrund, bei hohem Zoom oder mit einem bestimmten Stylesheet sichtbar wird. Bewahre für Produktionsgrafiken einen Referenz-Screenshot oder eine wiederholbare Sichtprüfung auf.
Barrierefreie Bedeutung bewahren
Ein dekoratives Icon kann im jeweiligen Kontext für assistive Technik verborgen werden; eine Grafik mit Information braucht einen zugänglichen Namen oder eine gleichwertige Alternative. Entferne title, desc, aria-label, aria-labelledby oder sichtbaren Text nicht, ohne zu wissen, wie die Bedeutung danach vermittelt wird. Prüfe, dass aria-labelledby keine gelöschten oder umbenannten IDs nennt. Alternativtext soll die Funktion statt der inneren Geometrie beschreiben: „Bericht herunterladen“ hilft mehr als „blauer Pfeil nach unten“. Optimierung kann wiederholte Attribute verringern, darf aber kein verständliches Bild stumm machen. Der Leitfaden zu barrierefreien QR-Codes ist relevant, wenn SVG Teil eines Codes mit zusätzlichen Anweisungen außerhalb des Bildes ist.
Aktive oder externe Inhalte vor dem Vertrauen suchen
Untersuche das XML, bevor du es einbettest. Prüfbedürftig sind script, onload oder andere on*-Attribute, xlink:href- oder href-Werte zu anderen URLs, externe Bilder, foreignObject, eingebettete Objekte und unerwartete data:-Referenzen. Eine Netzwerkreferenz kann Datenschutz, Verfügbarkeit oder Inhaltsrichtlinien beeinflussen; aktives JavaScript und Events gehören nicht in ein nicht vertrauenswürdiges statisches Icon. Das Blockieren eines einzelnen Tags ersetzt keine gepflegte Sanitierungsrichtlinie und keine Tests im echten Kontext. Füge unbekanntes SVG nicht direkt in JSX oder HTML mit weitreichenden Berechtigungen ein. Soll eine nicht vertrauenswürdige Datei nur gezeigt werden, biete sie zum Download an oder nutze passende Isolation.
Grenzen vor der Veröffentlichung testen
Wende ohne Kopie keine aggressiven Änderungen an, wenn die Datei SMIL- oder CSS-Animationen, Filter, komplexe Masken, eingebettete Fonts, eingebettete Bilder oder von CSS beziehungsweise JavaScript verwendete IDs enthält. Umbenannte IDs können Selektoren, Script-Referenzen oder mehrere Icons auf derselben Seite brechen; ein entfernter Font kann Maße und Umbrüche ändern. Filter unterscheiden sich zwischen Browsern, und ein data:-Bild kann den Großteil des Gewichts ausmachen, obwohl das XML klein ist. Prüfe die Ausgabe in unterstützten Browsern und miss die vollständige Ladezeit. Eine große Illustration braucht möglicherweise ein Redesign oder ein anderes Format; Sicherheit verlangt separate Sanitierung und Prüfung. Die Leitfäden zu SVG-Optimierung und Datenschutz erläutern diese Entscheidungen.