SVG-Dateien.

Inhalt.

• Was ist eine SVG-Datei?
• Geschichtlicher Hintergrund
• Wofür werden SVG-Dateien verwendet?
• Was sind die Vor- und Nachteile von SVG-Dateien?
• 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 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 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.