SVG (Scalable Vector Graphics)

Scalable-Vector-Graphics

Copyright © Shutterstock / Visual Generation

Was bedeutet SVG?

Scalable Vector Graphics (SVG) sind Grafiken, die in ihrer GrĂ¶ĂŸe beliebig verĂ€ndert werden können, ohne unter einem QualitĂ€tsverlust zu leiden. Das Dateiformat basiert auf XML, ist also fĂŒr den Einsatz auf Websites optimiert. Alle gĂ€ngigen Internetbrowser und Darstellungsprogramme fĂŒr Bilddateien können sie anzeigen. SVG kommen nicht nur als eigenstĂ€ndige Dateien vor. Auch in PDF-Dateien sind sie hĂ€ufig aufgrund ihrer Skalierbarkeit eingebunden. SVG-Grafiken werden auch als zweidimensionale Vektorgrafiken bezeichnet. Das World Wide Web Consortium (W3C) entwickelte das Format und fĂŒhrte es 2001 ein. Die Dateien tragen die Endung .svg oder .svgz.

Ein XML-Code beschreibt die Grafik

Das Erscheinungsbild einer SVG-Grafik beruht auf einem Koordinatensystem. Das unterscheidet sie von Bildern des gĂ€ngigen Formats JPEG. Diese bestehen aus einer vordefinierten Anzahl von Pixeln bestehen, die sich auch beim VergrĂ¶ĂŸern nicht verĂ€ndert. Die Bilder werden unscharf. Im Koordinatensystem eine Vektorgrafik sind alle Punkte eingetragen. Sie stehen entweder fĂŒr sich alleine oder bilden gemeinsam mit anderen eine Form (Polygon). Daraus entsteht ein XML-Code, der die Grafik beschreibt. Streng genommen kann eine SVG-Grafik durch das VerĂ€ndern des Codes angepasst werden. Es helfen also Programmierkenntnisse. Somit benötigt der User zum Bearbeiten nicht zwangslĂ€ufig ein Bildbearbeitungsprogramm. Die in einem Koordinatensystem angelegten Punkte sind das Geheimnis hinter der verlustfreien Skalierung einer SVG. Weil es sich um einen Code handelt und nicht um eine Bilddatei mit unzĂ€hligen Pixeln, ist die DateigrĂ¶ĂŸe sehr gering.

Ein weiterer Unterschied zu JPEG-Grafiken ist, dass SVG-Dateien aus mehreren Ebene bestehen können und damit leicht zu bearbeiten sind. JPEG-Dateien sind hingegen auf nur eine Ebene reduziert. Wer mehrere Ebenen zum Bearbeiten behalten möchte, der muss die Dateien im jeweiligen Format der Bildbearbeitungssoftware speichern (zum Beispiel .psd oder .xcf). Die JPEG-Speicherung ist immer mit einer Kompression und einem QualitÀtsverlust verbunden.

Der Einsatz von SVG-Dateien eignet sich fĂŒr viele verschiedene Bereiche. Einfarbige Diagramme, moderne Logos mit Glanzeffekten und Schattierungen oder Infografiken mit hohem Textanteil, lassen sich problemlos als Vektorgrafik anlegen.

Animationen sind knifflig umzusetzen

Mehrere Vektordateien können zu einer Animation zusammengefasst werden. Dazu sind zum Teil mehrere Techniken erforderlich, die sich ergĂ€nzen. Eine Animation mit CSS zu erstellen, bringt zwar durch die Integration in das Stylesheet einen Vorteil mit sich. Dabei werden User, die den Internet Explorer verwenden zum Teil ausgeschlossen. Ältere Versionen (IE9 bis IE11) unterstĂŒtzen diese Funktion nicht. Wenn eine Animation mit SMIL erstellt werden soll, bleiben ebenfalls die User des Internet Explorer außen vor. Auch mit Javascript lassen sich Animationen erstellen. Hier gibt es ebenfalls einen Nachteil: Sie können nicht in img- oder object-Elemente eingebunden werden, sondern mĂŒssen immer auf einer Website platziert werden. Beim Animieren von SVG-Dateien muss also ein Kompromiss gefunden werden.

Tipp

In der heutigen Zeit, in der User viele verschiedene EndgerĂ€te nutzen, ist die Anpassung des Inhalts von großer Bedeutung. Ein responsives Design umfasst nicht nur die Aufteilung der Website. Auch die Eigenschaft einer Bild- oder Grafikdatei, sich an das EndgerĂ€t anzupassen, gehört dazu. Vektorgrafiken bieten gerade fĂŒr mobile Nutzer viele Vorteile. Sie können die Dateien stark vergrĂ¶ĂŸern, ohne dass die Formen oder der Text unscharf werden. Außerdem sind sie wegen Ihrer geringen DateigrĂ¶ĂŸe schnell geladen.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte