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 image

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 im Bereich Webdesign 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 und Entwicklerinnen 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.

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 Neulinge 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, und klicke auf „Datei“.

Öffne die gewünschte Datei, indem du auf „Öffnen“ klickst. 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 Userinnen und User für die Erstellung und Bearbeitung von SVG-Dateien Adobe Illustrator, einen Editor für Vektorgrafiken.

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 Web-Designerinnen und -Designern 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.

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.

Designerinnen und 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 Web-Designerinnen und -Designer macht.

Weitere Vektorformate entdecken

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.

https://main--cc--adobecom.hlx.page/cc-shared/fragments/seo-articles/express-blade

Ähnliche Dateiformate.

PNG file image

PNG

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

JPEG file image

JPEG

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

HEIC file image

HEIC

Lerne dieses neue Rasterformat von Apple kennen.

AI file image

AI

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

SVG im Vergleich zu anderen Dateiformaten.

SVG vs PNG file image

SVG vs. PNG

Welches Dateiformat ist die beste Wahl für Webdesign?

SVG vs EPS file image

SVG vs. EPS

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

https://main--cc--adobecom.hlx.page/cc-shared/fragments/discovery-hub/products-photoshop-segment-blade