SVG-Dateien.

SVG ist ein gängiges Dateiformat zur Darstellung von zweidimensionalen Grafiken, Diagrammen und Illustrationen auf Websites. Als Vektorformat lassen sich SVG-Bilder in verschiedene Größen skalieren, ohne dass die Auflösung davon beeinträchtigt wird. Erfahre mehr über die wichtigsten Eigenschaften, die Vor- und Nachteile und die Geschichte des SVG-Formats.

SVG – Marquee

Inhalt.

 

  • Was ist eine SVG-Datei?
     
  • Geschichtlicher Hintergrund
     
  • Wofür werden SVG-Dateien verwendet?
     
  • Was sind die Vor- und Nachteile von SVG?
     
  • Wie öffne ich eine SVG-Datei?
     
  • Wie erstelle und bearbeite ich eine SVG-Datei?
     
  • Häufig gestellte Fragen zu SVG-Dateien

 

 

Was ist eine SVG-Datei?

Das Format Scalable Vector Graphics (SVG) ist ein Web-freundliches Vektorformat. Anders als pixelbasierte Rastergrafiken wie JPEG handelt es sich bei Vektorgrafiken um mathematisch definierte Bilder, die sich aus Punkten und Linien in einem Raster zusammensetzen. Vektordateien wie SVG lassen sich deshalb ohne Qualitätsverlust skalieren. Das macht sie ideal für Logos und komplexe Online-Grafiken. 

 

Das SVG-Format ist bei Webdesignern aber nicht nur aufgrund seiner Skalierbarkeit beliebt. SVG-Dateien sind in XML geschrieben. In XML werden Textinformationen als tatsächlicher Text gespeichert, und nicht als Formen. Suchmaschinen wie Google können somit SVG-Grafiken anhand ihrer Stichwörter (Keywords) erkennen, was sich für das Ranking einer Website in den Suchergebnissen nutzen lässt.

 

Eine SVG-Datei ist an ihrer Erweiterung „SVG“ erkennbar.

 

 

Geschichtlicher Hintergrund.

Die Geschichte des SVG-Formats geht auf die späten 1990er Jahre zurück, als das World Wide Web Consortium (W3C) Entwickler einlud, Vorschläge für ein neues Vektorgrafikformat zu entwickeln. Sechs verschiedene Vorschläge wurden eingereicht, aus denen schlussendlich das SVG-Format des W3C hervorging.  

 

Das Format konnte sich nur langsam durchsetzen. Der Durchbruch kam erst 2017, als sich herausstellte, welche Vorteile die Verwendung von SVG in modernen Webbrowsern brachte. Heute ist es ein weit verbreitetes Format für 2D-Bilder auf Websites, weil es von den meisten Browsern und Zeichenprogrammen für Vektorgrafiken unterstützt wird.

 

 

Wofür werden SVG-Dateien verwendet?

Das Scalable Vector Graphics-Format wurde in den letzten Jahren immer beliebter. Aber in welchen Bereichen wird es in der Praxis eingesetzt?

 

Icons und Logos für Websites.

Designer setzen SVG oft für die Darstellung von Icons oder Symbolen auf Websites ein, z. B. für Buttons oder Firmen-Logos. Da sich SVG ohne Qualitätsverlust vergrößern oder verkleinern lässt, ist dieses Format ideal für Grafiken, die an verschiedenen Stellen in unterschiedlicher Größe erscheinen sollen.

 

Infografiken und Illustrationen.

Da SVG-Dateien in XML geschrieben sind, können Suchmaschinen wie Google textlastige Diagramme und Grafiken lesen und auch die in den Grafiken enthaltenen Stichwörter (Keywords) erkennen. Neben den Möglichkeiten für die Suchmaschinenoptimierung bietet SVG zudem noch Unterstützung für Animation, was das Format noch interessanter für Webdesigner macht.

 

Weitere Vektorformate entdecken

 

 

Was sind die Vor- und Nachteile von SVG?

Informiere dich über die Vor- und Nachteile von SVG, bevor du dich entscheidest, Bilder in diesem Format zu speichern.

 

Vorteile von SVG-Dateien.

  • Im Gegensatz zu pixelbasierten Rasterdateien behalten Vektorformate wie SVG immer ihre Auflösung bei, egal wie stark sie vergrößert oder verkleinert werden. Dass die Bildqualität in bestimmten Browsern oder bei Skalierung leidet, ist mit SVG kein Thema.
     
  • Einfache SVG-Dateien sind oft kleiner als Rasterbilder, die aus zahlreichen Farbpixeln bestehen und nicht anhand eines mathematischen Algorithmus erstellt werden. 
     
  • Da SVG-Dateien Text als Text (und nicht als Design) behandeln, können Bildschirm-Leseprogramme in den Bildern enthaltene Wörter erkennen – ein wichtiges Feature für Menschen, die beim Lesen von Websites Unterstützung benötigen. Auch Suchmaschinen können Text in SVG-Bildern lesen und indizieren.

 

Nachteile von SVG-Dateien.

  • SVG-Dateien sind perfekt für Web-Grafiken wie Logos, Illustrationen und Diagramme. Da sie jedoch keine Pixel enthalten, lassen sich mit diesem Format kaum hochauflösende Digitalfotos abbilden. Für detailreiche Fotos ist das JPEG-Format in der Regel besser geeignet. 
     
  • SVG-Bilder werden nur von modernen Browsern unterstützt. Mit einem älteren Browser wie Internet Explorer 8 ist SVG nicht immer kompatibel.
     
  • Der in SVG-Bildern enthaltene Code ist für Einsteiger manchmal schwer verständlich. 

 

 

Wie öffne ich eine SVG-Datei?

SVG-Dateien lassen sich inzwischen mit allen gängigen Browsern wie Chrome, Edge, Safari und Firefox sowohl auf dem Mac als auch unter Windows öffnen. Starte deinen Browser, klicke auf „Datei > Öffnen“, und wähle die Datei aus, die du anzeigen willst. Daraufhin wird die Grafik im Browser geöffnet.

 

Genauso einfach kannst du eine SVG-Datei in einem Programm auf dem Computer öffnen. Doppelklicke auf den Dateinamen, um eine Liste der Programme aufzurufen, mit denen du die Datei öffnen kannst. Oft wird die Datei auch gleich automatisch in einem kompatiblen Programm geöffnet.

 

 

Wie erstelle und bearbeite ich eine SVG-Datei?

Wenn du Adobe Photoshop verwendest, gehe wie folgt vor: 

 

  1. Sobald du ein Bild in Photoshop fertiggestellt hast, klicke auf „Datei > Exportieren > Exportieren als“.
     
  2. Wähle im daraufhin angezeigten Bedienfeld das Format „SVG“ aus.
     
  3. Aktiviere „Alles auswählen“, klicke auf „Exportieren“, und speichere die Datei. 

 

Hinweis: Da Photoshop ein Editor für Rasterdateien ist, bevorzugen die meisten User für die Erstellung und Bearbeitung von SVG-Dateien Adobe Illustrator, einen Editor für Vektorgrafiken.

 

 

Häufig gestellte Fragen zu SVG-Dateien.

Unterstützt das SVG-Format auch Animationen?

Das SVG-Dateiformat ist nicht auf statische Bilder beschränkt. Im Web stehen viele Tools zur Verfügung, mit denen du deine Web-Grafiken in Bewegung bringen kannst. SVG-Animationen können aus relativ einfachen Elementen bestehen, beispielsweise einen Regler zur Navigation in einer Infografik. Du kannst auch Illustrationen animieren, z. B. die Zeiger auf dem Ziffernblatt einer Uhr.

 

Wie erkenne ich eine SVG-Datei?

Eine SVG-Datei erkennst du am schnellsten an ihrer Dateierweiterung „SVG“. Eine andere Möglichkeit, Vektorgrafiken wie SVG als solche zu identifizieren, besteht darin, das Bild auf dem Computerbildschirm auf 200 % vergrößern. Vektorgrafiken bleiben immer gestochen scharf, und die Farben verschwimmen nicht.

 

Können SVG-Dateien nur im Internet verwendet werden?

Obwohl SVG-Dateien hauptsächlich im Web verwendet werden, gibt es auch noch andere Einsatzbereiche. Zum Beispiel werden SVG-Dateien als Vorlagen im Textildruck eingesetzt, weil sie bei Änderungen der ursprünglichen Maße nicht verzerrt werden. Eine JPEG-Datei, die aus Pixeln besteht, ließe sich nicht so sauber übertragen.

 

Wie groß sind SVG-Dateien?

Die Größe einer SVG-Datei hängt von der Menge der enthaltenen Bildinformationen ab, ist in der Regel aber kleiner als bei anderen Dateiformaten. Komplexe Grafiken mit zahlreichen Pfaden und Ankerpunkten nehmen mehr Speicherplatz in Anspruch als einfachere, schlichtere Designs. Deshalb solltest du versuchen, die Anzahl komplexer Anweisungen innerhalb deiner Datei zu minimieren.

 

Was ist der Unterschied zwischen SVG und PNG?

Kurz gesagt, SVG-Dateien sind Vektordateien, und PNG-Dateien sind Rasterdateien. Ein PNG-Bild wird verpixelt oder verschwommen dargestellt, wenn es zu stark vergrößert oder verkleinert wird. Die Auflösung einer SVG-Datei bleibt immer gleich, weil sie keine Pixel enthält. Ein weiterer Unterschied ist, dass PNG keine Animationen unterstützt.

Ähnliche Dateiformate.

PNG-Grafik

PNG.

Erfahre mehr über ein weiteres beliebtes Format für Web-Grafiken und Logos.

JPEG-Grafik

JPEG.

Finde heraus, warum JPEG für komplexe Digitalfotos verwendet wird.

HEIC-Grafik

HEIC.

Lerne dieses neue Rasterformat von Apple kennen.

AI-Grafik

AI.

Entdecke dieses häufig verwendete Vektorformat, das für Adobe Illustrator entwickelt wurde.

SVG im Vergleich zu anderen Dateiformaten.

Grafik zum Vergleich SVG vs. PNG

SVG vs. PNG.

Welches Dateiformat ist die beste Wahl für Webdesign?

Grafik zum Vergleich SVG vs. EPS

SVG vs. EPS.

Finde heraus, welches Format besser für den Druck geeignet ist.

Jetzt bei Creative Cloud einsteigen – mit einem Abo, das zu dir passt.

Illustrator

Adobe Illustrator im Einzelprodukt-Abo.

Gestalte Vektorgrafiken und Illustrationen.
7 Tage kostenlos, danach 23,79 € pro Monat.

InDesign

Adobe InDesign im Einzelprodukt-Abo.

Erstelle moderne Layouts für Print- und digitale Publikationen.
7 Tage kostenlos, danach 23,79 € pro Monat.

Bearbeitung in

Alle Applikationen

Hole dir alle Kreativprogramme und mehr.
7 Tage kostenlos, danach 61,95 € pro Monat.