SVG hält Kanten bei jeder Pixeldichte scharf und kann Farben an das Design anpassen. Diese Flexibilität hat eine Bedingung: Die Datei muss eigenständig, einfach und auch auf kleinstem Raum erkennbar bleiben.
Ein Quadrat mit viewBox aufbauen
Verwende eine quadratische viewBox, etwa 0 0 64 64, und lasse Abstand um das Symbol. Die viewBox legt das Koordinatensystem fest, ohne eine feste Anzeigegröße vorzuschreiben.
Reduziere das Motiv auf seine charakteristischen Formen. Feine Details, kleine Innenräume von Buchstaben und ganze Wörter verschwinden oft bei 16 Pixeln, obwohl die Vektordatei technisch scharf bleibt.
| Merkmal | Grund | Prüfung |
|---|---|---|
| Quadratische viewBox | Vorhersehbarer Zuschnitt | Vorschau mit 16×16 |
| Einfache Pfade | Erkennbarkeit | Helle und dunkle Tabs |
| Keine Abhängigkeiten | Eigenständiges Laden | Netzwerk offline |
| ICO-Ersatzdatei | Ältere Programme | URL im Stammverzeichnis |
Die Datei unabhängig machen
Bette benötigte Stile direkt in das SVG ein. Wandle Text in Pfade um, wenn das Symbol eine bestimmte Schriftart benötigt. Eine externe Webschrift ist in diesem Kontext keine zuverlässige Abhängigkeit.
Entferne Skripte, entfernte Verweise und unnötige Metadaten des Grafikprogramms. Einfache Formen und Stile erleichtern zudem die Sicherheitsprüfung und verringern die Dateigröße.
Öffne die Datei abschließend direkt im Browser und teste sie offline. Wenn sich das Motiv verändert oder verschwindet, hängt es noch von einer externen Ressource ab, die eingebettet oder ersetzt werden muss.
SVG mit einem Ersatzformat einbinden
Ergänze link rel icon mit type image/svg+xml und einer URL ab dem Stammverzeichnis. Behalte außerdem favicon.ico im Stammverzeichnis für Programme, die SVG nicht auswählen oder ICO direkt anfordern.
SVG ersetzt weder das Apple Touch Icon noch die Manifest-Symbole. Exportiere für diese Oberflächen deckende oder maskierbare PNG-Dateien.
Farben an das Design anpassen
Eine prefers-color-scheme-Regel in einem style-Element kann im Dunkelmodus fill oder stroke ändern. Lege zuerst eine gut erkennbare Standardfarbe fest und ergänze die Variante als schrittweise Verbesserung.
Teste die Datei in echten Tabs und bei mehreren Zoomstufen. Prüfe auch das Ersatzformat, wenn SVG nicht ausgewählt wird: Eine auf dunklem Hintergrund unsichtbare ICO bleibt für diese Programme ein Problem.
Primärquellen
Häufige Fragen
Braucht ein SVG width und height?
Eine quadratische viewBox ist für die Skalierung entscheidend. Explizite Werte für width und height sind möglich, der Browser passt die Symbolgröße aber an den Kontext an.
Kann es eine externe Schriftart laden?
Verlasse dich nicht darauf. Wandle Schriftzüge in Pfade um, damit die Datei eigenständig ist und zuverlässig dargestellt wird.
Reicht SVG für iOS aus?
Nein. Stelle ein separates, deckendes Apple Touch Icon im PNG-Format für den Startbildschirm bereit.