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 erfährst du Schritt für Schritt, wie du eine SVG-Datei erstellst:
1. Erstellen oder Öffnen einer Datei
Du has zum einen die Möglichkeit, eine SVG-Datei eigenhändig im Illustrator zu erstellen. Ebenso kannst du aber auch ein anderes Dateiformat wie PNG oder JPEG öffnen. So musst du bei der Erstellung der SVG nicht bei null anfangen, sondern greifst auf ein bereits bestehendes Dokument zurück.
2. Das Bild nachzeichnen
Bei der Erstellung der SVG musst du 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 bekommst du passgenaue Ergebnisse.
3. Die SVG abspeichern
Du solltest die erstellte Datei als „.svg“ abspeichern, um sie jederzeit leicht auffinden, verschicken und nutzen zu können.
Wenn du dieser Anleitung folgst, erhältst du sehr gute Ergebnisse und kannst Logos, Illustrationen und Featured Images ganz nach deinen persönlichen Vorstellungen erstellen. Eine spätere Bearbeitung der SVG ist kein Problem und die Datei lässt sich in unterschiedlichen Dokumenten einsetzen.
Allerdings musst du 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
Du hast dein Firmenlogo bereits als JPEG vorliegen und lädst dieses nun in einen SVG-Editor. Dieser zeigt dir die Datei so an, wie sie aktuell ist. Nun fährst du die einzelnen Linien und Muster des Logos per Hand ab. Die verschiedenen Formen werden daraufhin erstellt und mit der von dir gewünschten Farbe versehen.
Sobald das Logo deinen Wünschen entspricht, speicherst du es als „.svg“ ab und kannst die Datei anschließend als Image in deine 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 dir 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 musst du einen Texteditor nutzen.
2. Öffnen im Texteditor
Mit einem Texteditor kannst du 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 du auf eine Vielzahl von Tools und Features zugreifen und diese für die Bearbeitung der Vektorgrafiken nutzen kannst.
SVG-Dateien exportieren und einbinden
Um SVG-Dateien nutzen zu können, musst du diese nach der Erstellung exportieren und einbinden. Das gelingt am besten, wenn du die Exportfunktion des jeweiligen Programms nutzt. Bei diesem Vorgehen kannst du entweder Zeichenflächen oder ganze Elemente exportieren. In einigen Fällen ist zudem eine Copy-and-Paste-Funktion zielführend.
Bei der Einbindung stehen dir verschiedene Verfahren offen. So kannst du 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. Du hast viele verschiedene Möglichkeiten, die Vektorgrafiken in einem Darstellungsprogramm anzusehen, zu bearbeiten und gezielt einzusetzen.
Möchtest du die hierfür notwendige Zeit nicht investieren, kannst du externe Entwickler bzw. Entwicklerinnen damit beauftragen, SVG zu erstellen und zu implementieren bzw. zu verwenden. So nutzt du die Vorteile der Vektorgrafiken, ohne dass du dich intensiv mit HTML auseinandersetzen musst.
