Was ist SVG? Das Vektor-Dateiformat im Überblick

Webdesign ist eines der wichtigsten Tools, um Kunden und Kundinnen aufmerksam zu machen und an sich zu binden. Eine zunehmend wichtige Rolle bei der Gestaltung von professionellen Webseiten spielen SVG-Dateien. Sie erlauben den Einsatz von Logos, Illustrationen und Animationen, um den Auftritt im Netz besonders individuell und ansprechend zu gestalten.

Was ist eine SVG-Datei?

Skalierbare Vektorgrafiken (Scalable Vector Graphics = SVG) sind wichtige Hilfsmittel im Webdesign. Da diese Grafiken nicht verpixeln, eignen sie sich für verschiedenste Endgeräte. Zudem nutzen Entwickler bzw. Entwicklerinnen SVG für Animationen, Programme und Dokumente ganz unterschiedlicher Art.

Was kann man mit SVG machen?

Ein Vektor ist ein Objekt, das über einen oder mehrere Punkte eindeutig definiert und lokalisierbar ist. Durch die Kombination von Vektoren entstehen sogenannte Vektorgrafiken. Diese spielen im Webdesign eine elementar wichtige Rolle.

In einer SVG-Datei werden verschiedene Vektordaten gesammelt und verfügbar gemacht. So lassen sich bei der Gestaltung eines Webauftritts durch die Abbildung von individuellen Logos, Illustrationen und Animationen professionelle Ergebnisse erzielen.

Immer mehr Entwickler und Entwicklerinnen entscheiden sich für Scalable Vector Graphics und gegen andere Formate wie PNG oder JPEG. Das liegt daran, dass eine SVG-Datei ausschließlich aus Vektoren besteht und somit keinerlei Pixel aufweist.

Die mittels SVG erstellten Inhalte sind somit besonders scharf und können auf jeglichen Geräten genutzt und angezeigt werden. Ein weiterer Vorteil ist die Skalierbarkeit der Grafiken, wodurch Sie diese perfekt auf Ihren individuellen Webauftritt zuschneiden können.

Vorteile von SVG-Dateien im Überblick:

Sie können in ihrer Größe beliebig verändert werden, ohne dass Pixel auftreten. SVG-Dateien werden von Google angezeigt und unterstützen somit die SEO. Sie sind vergleichsweise klein und lassen sich daher leicht erstellen, einsetzen, speichern und teilen. SVG arbeitet mit XML-Dateien und Code, sodass Sie die Inhalte leicht animieren können. SVG-Dateien erstellen: So geht’s!

Es gibt verschiedene Wege für die Erstellung und Verwendung von Dateien im SVG-Format. Die meisten Anwender und Anwenderinnen vertrauen hierbei auf den Adobe Illustrator. Ebenso können Sie aber auf einen speziellen SVG-Editor zurückgreifen.

Im Folgenden erfahren Sie Schritt für Schritt, wie Sie eine SVG-Datei erstellen:

1. Erstellen oder Öffnen einer Datei

Sie haben zum einen die Möglichkeit, eine SVG-Datei eigenhändig im Illustrator zu erstellen. Ebenso können Sie aber auch ein anderes Dateiformat wie PNG oder JPEG öffnen. So müssen Sie bei der Erstellung der SVG nicht bei null anfangen, sondern greifen auf ein bereits bestehendes Dokument zurück.

2. Das Bild nachzeichnen

Bei der Erstellung der SVG müssen Sie das gewünschte Bild entweder selbst zeichnen oder nachzeichnen. Jede Form eines vorhandenen Logos wird bei der Erstellung abgebildet und mit einer Farbe versehen. Nur so bekommen Sie passgenaue Ergebnisse.

3. Die SVG abspeichern

Sie sollten die erstellte Datei als „.svg“ abspeichern, um sie jederzeit leicht auffinden, verschicken und nutzen zu können.

Wenn Sie dieser Anleitung folgen, erhalten Sie sehr gute Ergebnisse und können Logos, Illustrationen und Featured Images ganz nach Ihren persönlichen Vorstellungen erstellen. Eine spätere Bearbeitung der SVG ist kein Problem und die Datei lässt sich in unterschiedlichen Dokumenten einsetzen.

Allerdings müssen Sie für die händische Erstellung eine Menge Zeit einplanen und äußerst exakt arbeiten. Zudem kostet die Nutzung des Adobe Illustrators und einiger SVG-Editoren Geld und erfordert einiges an Einarbeitungszeit.

SVG: Beispiel der Erstellung

Sie haben Ihr Firmenlogo bereits als JPEG vorliegen und laden dieses nun in einen SVG-Editor. Dieser zeigt Ihnen die Datei so an, wie sie aktuell ist. Nun fahren Sie die einzelnen Linien und Muster des Logos per Hand ab. Die verschiedenen Formen werden daraufhin erstellt und mit der von Ihnen gewünschten Farbe versehen.

Sobald das Logo Ihren Wünschen entspricht, speichern Sie es als „.svg“ ab und können die Datei anschließend als Image in Ihre Webseite integrieren. Dank der geringen Größe ist es außerdem kein Problem, sie zu versenden und mit anderen zu teilen.

SVG-Dateien öffnen und einbinden

Es gibt grundsätzlich drei Möglichkeiten, um SVG-Dateien mit einem Darstellungsprogramm zu öffnen und einzubinden. Wir stellen sie Ihnen im Folgenden vor:

1. Öffnen im Browser

Mittlerweile nutzen rund 33 % aller Webseiten im Internet Vektorgrafiken. Moderne, gängige Browser können diese daher problemlos erkennen, öffnen und korrekt darstellen. Allerdings ist eine Bearbeitung von SVG-Dateien über den Browser nicht möglich. Hierfür müssen Sie einen Texteditor nutzen.

2. Öffnen im Texteditor

Mit einem Texteditor können Sie SVG-Dateien öffnen und bearbeiten. Dieses Vorgehen bietet sich aber nur bei einfachen Grafiken mit wenigen Faktoren an. Je mehr Faktoren eine Illustration oder ein Logo enthalten, desto komplizierter ist die Bearbeitung im jeweiligen Darstellungsprogramm.

3. Öffnen im Foto- oder Bildeditor

Die meisten aktuellen Bildeditoren erkennen SVG-Dateien, zeigen sie an und bieten eine Bearbeitungsfunktion. Diese Methode hat den Vorteil, dass Sie auf eine Vielzahl von Tools und Features zugreifen und diese für die Bearbeitung der Vektorgrafiken nutzen können.

SVG-Dateien exportieren und einbinden

Um SVG-Dateien nutzen zu können, müssen Sie diese nach der Erstellung exportieren und einbinden. Das gelingt am besten, wenn Sie die Exportfunktion des jeweiligen Programms nutzen. Bei diesem Vorgehen können Sie entweder Zeichenflächen oder ganze Elemente exportieren. In einigen Fällen ist zudem eine Copy-and-Paste-Funktion zielführend.

Bei der Einbindung stehen Ihnen verschiedene Verfahren offen. So können Sie beispielsweise den Code der Grafik direkt in den HTML-Code einbinden oder das <img>-Tag nutzen. Ebenso ist es möglich, die SVG als CSS einzusetzen oder die HTML-Elemente <object>, <embed> oder <iframe> zu nutzen.

Fazit: Grafiken und Bilder zielführend einsetzen

Modernes Webdesign und ansprechende Animationen kommen ohne Scalable Vector Graphics nicht mehr aus. Sie haben viele verschiedene Möglichkeiten, die Vektorgrafiken in einem Darstellungsprogramm anzusehen, zu bearbeiten und gezielt einzusetzen.

Möchten Sie die hierfür notwendige Zeit nicht investieren, können Sie externe Entwickler bzw. Entwicklerinnen damit beauftragen, SVG zu erstellen und zu implementieren bzw. zu verwenden. So nutzen Sie die Vorteile der Vektorgrafiken, ohne dass Sie sich intensiv mit HTML auseinandersetzen müssen.

Titelbild: staticnak1983 / iStock / Getty Images Plus