Skalierbare Vektorgrafiken oder SVG spielen heutzutage eine wichtige Rolle im Website-Design. Wenn Sie derzeit kein SVG in Ihrer Webdesign-Arbeit verwenden, finden Sie hier einige Gründe, warum Sie damit beginnen sollten, sowie Fallbacks, die Sie für ältere Browser verwenden können, die diese Dateien nicht unterstützen.
Auflösung
Der größte Vorteil von SVG ist die Auflösungsunabhängigkeit. Da es sich bei SVG-Dateien um Vektorgrafiken handelt (im Gegensatz zu pixelbasierten Rasterbildern), können Sie ihre Größe ändern, ohne an Bildqualität einzubüßen. Dies ist besonders hilfreich, wenn Sie responsive Websites erstellen, die gut aussehen und auf einer Vielzahl von Bildschirmgrößen und Geräten gut funktionieren müssen. Sie können SVG-Dateien nach oben oder unten skalieren, um sie an die sich ändernden Anforderungen an Größe und Layout Ihrer responsiven Website anzupassen, ohne deren Qualität in irgendeiner Weise zu beeinträchtigen.
Im Allgemeinen haben SVGs ein glatteres, klareres Aussehen als Bilder anderer Formate, unabhängig von der Größe.
Dateigröße
Eine Herausforderung bei der Verwendung von Rasterbildern (z. B. JPG, PNG, GIF) auf responsiven Websites ist die Dateigröße. Da Rasterbilder nicht so skaliert werden wie Vektorbilder, müssen Sie Ihre pixelbasierten Bilder in der größten Größe liefern, in der sie angezeigt werden. Dies liegt daran, dass Sie ein Bild immer verkleinern und seine Qualität beibeh alten können, aber das Gleiche gilt nicht für das Vergrößern von Bildern. Das Ergebnis sind Bilder, die weitaus größer sind als die Größe, in der sie angezeigt werden, was Browser dazu zwingt, große Dateien herunterzuladen.
Im Gegensatz dazu sind Vektorgrafiken skalierbar, sodass Sie sehr kleine Dateigrößen verwenden können, unabhängig davon, wie groß diese Bilder angezeigt werden müssen. Dies optimiert letztendlich die Gesamtleistung und Downloadgeschwindigkeit einer Website.
CSS-Design
Sie können SVG ganz einfach direkt in den HTML-Code einer Seite einfügen. Dies wird als Inline-SVG bezeichnet. Ein Vorteil der Verwendung von Inline-SVG besteht darin, dass keine HTTP-Anforderung zum Abrufen einer Bilddatei erforderlich ist, da die Grafiken tatsächlich vom Browser gezeichnet werden.
Weiterer Vorteil: Sie können Inline-SVG mit CSS stylen. Müssen Sie die Farbe eines SVG-Symbols ändern? Anstatt dieses Bild in einer Grafikbearbeitungssoftware zu bearbeiten und die Datei dann zu exportieren und erneut hochzuladen, können Sie die SVG-Datei einfach mit ein paar Zeilen CSS ändern. Sie können CSS auch verwenden, um SVGs für Hover-Zustände und andere Designanforderungen zu ändern.
Bottom Line
Da Sie Inline-SVG-Dateien mit CSS stylen können, können Sie auch CSS-Animationen darauf verwenden. CSS-Transformationen und -Übergänge sind zwei einfache Möglichkeiten, SVGs etwas Leben einzuhauchen. Sie können umfangreiche Flash-ähnliche Erlebnisse auf einer Seite erh alten, ohne Flash zu verwenden, das das iPad nicht mehr unterstützt. Tatsächlich stellt Adobe Flash bis Ende 2020 aus.
Verwendung von SVG
So leistungsfähig SVGs auch sind, sie können nicht jedes andere Bildformat ersetzen. Fotos, die eine hohe Farbtiefe erfordern, sollten immer noch im JPG- oder PNG-Format vorliegen, aber einfache Bilder wie Symbole eignen sich perfekt, um als SVG ausgeführt zu werden.
SVG eignet sich auch für einige komplexe Illustrationen wie Grafiken, Diagramme und Firmenlogos. All diese Grafiken profitieren davon, dass sie skalierbar sind und mit CSS gest altet werden können.
Unterstützung für ältere Browser
Die aktuelle Unterstützung für SVG ist in modernen Webbrowsern sehr gut. Die einzigen Browser, die diese Grafiken nicht unterstützen, sind alte Versionen von Internet Explorer (die von Microsoft nicht mehr unterstützt werden) und einige alte Android-Versionen. Alles in allem verwendet immer noch ein sehr kleiner Prozentsatz der surfenden Bevölkerung diese Browser, und diese Zahl nimmt weiter ab. Das bedeutet, dass Sie SVG bedenkenlos auf Ihrer Website verwenden können.
Wenn Sie ein Fallback für SVG bereitstellen möchten, verwenden Sie ein Tool wie Grumpicon von der Filament Group. Diese Ressource erstellt PNGs aus Ihren SVG-Bilddateien.
