So optimieren Sie SVG-Symbole für Websites und Designsysteme
Bereiten Sie SVG-Symbole und -Logos für schnelle Websites und wartbare Designsysteme vor, indem Sie ViewBox, Pfadkomplexität, Zugänglichkeit, Stil und Bereitstellung steuern.
Schnelle Antwort
Behalten Sie einen gültigen viewBox bei, entfernen Sie Editor-Metadaten, reduzieren Sie unnötige Pfadgenauigkeit, verwenden Sie konsistente Symbolabmessungen und entscheiden Sie, ob Farben festgelegt oder durch CSS gesteuert werden sollen. Geben Sie informativen SVGs einen zugänglichen Namen und verbergen Sie dekorative Symbole vor unterstützender Technologie. Testen Sie die optimierte Datei mit der kleinsten unterstützten Größe.
Wählen Sie zunächst das Liefermodell
Die beste SVG-Struktur hängt davon ab, wie sie verwendet wird.
| Liefermodell | Am besten für | Hauptkompromiss |
|---|---|---|
Extern <img> | Logos und eigenständige Illustrationen | Interne Pfade können nicht mit Seiten-CSS formatiert werden |
| Inline-SVG | Themesfähige Schnittstellensymbole und interaktive Diagramme | Fügt Markup zum HTML |
| Komponentensymbol | Produktdesignsysteme | Benötigt kontrollierte Build- und API-Konventionen |
| SVG-Sprite | Große Mengen wiederverwendbarer Symbole | Höhere Setup- und Symbolreferenzkomplexität |
| CSS-Hintergrund | Dekorative Bilder | Schlechte Eignung für aussagekräftige Inhalte |
Integrieren Sie eine SVG-Datei nicht nur, weil dies möglich ist. Wiederholte externe Bilder können zwischengespeichert werden; Interaktive oder thematisch anpassbare Symbole profitieren stärker vom Inline-Markup.
Behalten Sie die ViewBox bei
Der viewBox definiert das interne Koordinatensystem und ermöglicht eine reaktionsfähige Skalierung. Das Entfernen führt häufig zu einem spröden Breiten- und Höhenverhalten. Standardisieren Sie beim Erstellen einer Komponentenbibliothek Symbol-ViewBoxes, aber strecken Sie die Grafik nicht in ein neues Verhältnis.
Überprüfen Sie, ob die sichtbare Geometrie die Leinwand effizient nutzt. Überschüssiger Leerraum führt dazu, dass ansonsten identische Symbole falsch ausgerichtet oder zu klein erscheinen.
Komplexität sicher reduzieren
Vektorexporte können Editor-Namespaces, Kommentare, ausgeblendete Ebenen, redundante Gruppen, übermäßige Dezimalgenauigkeit und doppelte Stile enthalten. Der SVG-Optimierer entfernt den Sicherheitsaufwand, aber jedes optimierte Ergebnis sollte dennoch eine visuelle Regressionsprüfung erhalten.
Vergleichen Sie diese Kennzahlen vorher und nachher:
- Dateigröße in Bytes
- Anzahl der Pfade und Gruppen
- Gesamtlänge der Pfaddaten
- Rendern mit 16, 24, 32 und 64 Pixeln
- Auftritt in hellen und dunklen Themen
Verfolgen Sie nicht die kleinstmögliche Datei, wenn die Vereinfachung eine Markenkurve verändert oder eine kleine Lücke schließt.
Definieren Sie einen Farbvertrag
Produktsymbole verwenden häufig currentColor, sodass die umgebende Komponente ihre Farbe steuert. Mehrfarbige Markenzeichen erfordern in der Regel explizite Füllungen. Dokumentieren Sie die Regel und halten Sie sie konsistent.
Verwenden Sie SVG-Farbersatz für kontrollierte Füllungsänderungen und überprüfen Sie dann die Markierung, um sicherzustellen, dass Striche und Farbverläufe nicht unbeabsichtigt zurückbleiben.
Machen Sie Barrierefreiheit bewusst
Blenden Sie ein dekoratives Symbol neben sichtbarem Text vor unterstützender Technologie aus. Geben Sie für eine informative eigenständige Grafik einen über den umgebenden HTML-Code oder entsprechende SVG-Titel- und Beschriftungsbeziehungen zugänglichen Namen an.
Vermeiden Sie es, wichtigen Text nur innerhalb umrissener Vektorpfade zu platzieren. Benutzer können umrissene Buchstaben nicht als normalen Text auswählen oder übersetzen, und Suchmaschinen erhalten weniger semantische Informationen als bei HTML.
Sicherheit für hochgeladene SVGs
SVG ist aktiver XML-Inhalt. Vom Benutzer bereitgestellte Dateien können Skripte, externe Referenzen oder unerwartete Elemente enthalten. Bereinigen Sie nicht vertrauenswürdige SVG-Dateien vor dem Inline-Rendering oder stellen Sie sie über einen kontrollierten Rasterisierungs-/Downloadpfad bereit.
Führen Sie SVG-Design-Checker als strukturellen Preflight aus und wenden Sie dann einen speziellen Sanitizer in der Anwendung an, die öffentliche Uploads akzeptiert.
Checkliste für das Designsystem
- Verwenden Sie eine dokumentierte ViewBox und ein optisches Ausrichtungsgitter.
- Halten Sie die Benennung und Komponenten-Requisiten konsistent.
- Definieren Sie das Verhalten mit festen Farben im Vergleich zu thematisch anpassbaren Farben.
- Testen Sie gegebenenfalls die Tastatur, den Bildschirmleser und das Verhalten bei hohem Kontrast.
- Messen Sie die tatsächlichen Auswirkungen von Bundles und Seiten, anstatt davon auszugehen, dass jede SVG-Datei leichtgewichtig ist.
Ein optimiertes Symbolsystem ist eine Produktoberfläche und nicht nur ein Ordner mit exportierten Dateien.