Scalable Vector Graphics (SVG)-Dateien sind eine fantastische Option, wenn es um Webentwicklung oder Design geht. Diese Art von Bildern verpixelt nicht, wenn du sie vergrößerst oder verkleinerst, und sie sind normalerweise leichter als JPEGs. Allerdings kann das Öffnen und Bearbeiten von SVG-Dateien ohne die richtigen Werkzeuge eine Herausforderung sein.

Wenn du eine SVG-Datei öffnen und bearbeiten willst, bevor du sie in WordPress hochlädst, musst du lernen, wie man sie öffnet. Einige Tools ermöglichen es dir, SVG-Dateien sowohl zu öffnen als auch zu bearbeiten, sodass du die Grafiken erstellen kannst, die du für deine Webseite brauchst.

In diesem Artikel werden wir kurz erklären, was SVG-Dateien sind. Wir gehen darauf ein, warum sie so beliebt sind und wann du sie verwenden solltest. Dann zeigen wir dir, wie du Dateien in SVG umwandelst und wie du sie öffnen kannst. Los geht’s!

Was ist eine SVG-Datei?

Ein Vektor ist ein Objekt, das durch einen oder mehrere miteinander verbundene Punkte definiert ist. Wenn du genügend Vektoren miteinander kombinierst, kannst du so ziemlich jede Art von Grafik erstellen, die du willst.

Eine SVG-Datei ist eine Sammlung von Vektordaten, die im XML-Format zusammengefasst sind. Nimm zum Beispiel dieses Kinsta-Logo.

Das Kinsta-Logo
Das Kinsta-Logo

Im Gegensatz zu einem PNG oder JPEG besteht dieses Bild nur aus Vektoren und nicht aus Pixeln. Hier siehst du, wie die selbe Datei aussieht, wenn du sie mit einem Texteditor öffnest.

Eine SVG-Datei in einem Texteditor
Eine SVG-Datei in einem Texteditor

Die meisten Daten in dieser Datei befinden sich innerhalb des Pfadelements. Mit diesem Element lassen sich Vektoren in jede Richtung definieren. Wir haben den Linien mit CSS ein wenig Farbe hinzugefügt.

Wenn du versuchst, eine JPEG- oder PNG-Datei mit einem Texteditor zu öffnen, wirst du nur Kauderwelsch sehen. Du kannst aber auch ein anderes Bildformat nehmen und es in SVG umwandeln, indem du die Pixel in Pfade oder Vektoren umwandelst. Wir werden dir gleich zeigen, wie das funktioniert, aber jetzt wollen wir erst einmal besprechen, warum und wann du SVG-Dateien verwenden solltest.

Scalable Vector Graphics (SVG)-Dateien sind eine fantastische Option, wenn es um Webentwicklung oder Design geht. ✨ Erfahre mehr über sie in diesem Beitrag! ⬇️Click to Tweet

Warum sollte man eine SVG-Datei verwenden

Eine SVG-Datei wird für alle Arten von Grafiken verwendet, die du skalieren musst. Wenn du versuchst, verschiedene Bildgrößen zu ändern, hast du normalerweise Probleme mit der Pixelung. SVG-Dateien hingegen sind stufenlos skalierbar, weil du mit Vektoren statt mit Pixeln arbeitest.

SVG-Dateien sind skalierbar
SVG-Dateien sind skalierbar

Wie du siehst, verzerrt oder verpixelt sich das Bild nicht, wenn du seine Größe veränderst. Das macht SVG-Dateien perfekt für Logos, Illustrationen, Featured Images, Inline-Grafiken und vieles mehr. Das bedeutet auch, dass du die Größe der Bilddatei reduzieren kannst, um deine WordPress-Webseite zu beschleunigen, ohne dass die Qualität darunter leidet.

Hier ist ein kurzer Blick auf einige der SVG-Dateien, die wir auf unserer Webseite verwenden, damit du einen Anhaltspunkt hast, über welche Arten von Grafiken wir sprechen.

 Einige SVG-Dateien auf Kinsta
Einige SVG-Dateien auf Kinsta

SVG-Dateien sind nicht nur stufenlos skalierbar, sondern bieten auch viele andere Vorteile, z. B:

  • Sie werden von Google indiziert. SVG-Dateien erscheinen in der Google-Bildersuche, was bedeutet, dass sie aus Sicht der Suchmaschinenoptimierung (SEO) keine Nachteile mit sich bringen.
  • Sie haben eine relativ geringe Dateigröße. Wenn du ein einfaches Bild oder eine Illustration nimmst und sie in den Formaten SVG, JPEG und PNG speicherst, ist das erste Format in der Regel viel kleiner als die anderen. Das gilt allerdings nur für „einfache“ Bilder, auf die wir gleich noch eingehen werden.
  • Du kannst SVG-Dateien animieren. Da du es mit XML-Dateien oder Code zu tun hast, kannst du SVG-Dateien mit CSS gestalten und animieren.

Obwohl SVG-Dateien unglaublich vielseitig sind, eignen sie sich nicht für jede Situation. Wenn du SVG mit JPEG und PNG vergleichst, wirst du schnell merken, dass die beiden letzteren Optionen viel besser sind, wenn es um komplexe Grafiken und Fotos geht.

Nimm zum Beispiel diese JPEG-Datei. Es ist kein hochauflösendes Bild, aber es ist mehr als groß genug, um Details zu erkennen.

JPEG-Datei Beispiel
JPEG-Datei Beispiel

Wenn du diese JPEG-Datei mit einem der online verfügbaren Tools in SVG umwandelst, erhältst du viel weniger Details.

JPEG in SVG umgewandelt
JPEG in SVG umgewandelt

Diesem Bild fehlen nicht nur Details und Farben, sondern es ist auch größer als das Original. Das liegt daran, dass sich Vektordaten schnell summieren, wenn es sich um Fotos oder andere komplexe Grafiken handelt.

Zusammenfassend lässt sich sagen, dass SVGs das bevorzugte Format für Bilder mit wenigen Linien sind, z. B. für Logos und Illustrationen. Wenn es um Fotos geht, solltest du dich lieber an hochauflösende JPEGs und PNGs halten (solange du sie optimierst).

So konvertierst du eine SVG-Datei

Mit der Bildbearbeitungssoftware deiner Wahl solltest du auch andere Arten von Bilddateien in das SVG-Format umwandeln können und andersherum. Hier ist ein kurzes Beispiel mit einem unserer beliebtesten kostenlosen Bildbearbeitungsprogramme, Photopea.

Dateien mit Photopea in SVG umwandeln
Dateien mit Photopea in SVG umwandeln

Wenn du keinen Zugang zu einer Fotobearbeitungssoftware hast, gibt es viele kostenlose Online-Tools, mit denen du Bilder in fast jedem Format in SVG oder umgekehrt exportieren kannst. Der Nachteil dieser kostenlosen Tools ist, dass die Ergebnisse oft nicht so detailliert sind, wie du es gerne hättest.

Unserer Erfahrung nach führt die Verwendung kostenloser Bildkonvertierungssoftware oft zu SVG-Dateien ohne Farbe oder zu Dateien, die dem Originalbild kaum ähneln. Die Konvertierung von SVG-Dateien in andere Bildformate ist dagegen viel einfacher und führt fast nie zu einem spürbaren Qualitätsverlust, egal welches Tool du verwendest.

Wie man SVG-Dateien öffnet (3 Wege)

Es gibt verschiedene Möglichkeiten, SVG-Dateien zu öffnen, je nachdem, was du mit ihnen machen willst. Beginnen wir mit den Browsern.

1. Mit einem Browser

Wenn du eine SVG-Datei öffnest, wird sie im Gegensatz zu anderen Grafikdateien in deinem Standardbrowser geöffnet. Das liegt daran, dass dein Computer SVGs nicht als Grafiken, sondern als XML-Dateien erkennt.

Brauchst du eine Hosting-Lösung, die dir einen Wettbewerbsvorteil verschafft? Kinsta bietet dir eine unglaubliche Geschwindigkeit, modernste Sicherheit und automatische Skalierung. Schau dir unsere Pläne an

Öffne eine SVG-Datei mit einem Browser
Öffne eine SVG-Datei mit einem Browser

SVG-Dateien gibt es schon seit einiger Zeit und etwa 33 Prozent aller Webseiten verwenden sie in der einen oder anderen Form. Das bedeutet, dass die meisten modernen Browser SVG-Dateien unterstützen, darunter Edge, Firefox, Chrome, Safari und so ziemlich jede andere Option, die du dir vorstellen kannst.

Wenn du nicht gerade einen sehr obskuren oder veralteten Browser verwendest (was du nicht tun solltest), kannst du SVG-Dateien mit ein paar Klicks starten. Allerdings kannst du SVG-Dateien nicht direkt in deinem Browser bearbeiten. Dafür musst du einen Texteditor oder eine Bildbearbeitungssoftware verwenden.

2. Öffnen von SVG-Dateien mit einem Texteditor

Da SVG-Dateien XML-basierte Bilder sind, kannst du sie mit einem Texteditor öffnen und bearbeiten. Vorhin haben wir dir gezeigt, wie das Kinsta-Logo als SVG-Datei aussieht. Wir haben uns auch seinen Code angesehen.

Das Kinsta-Logo als SVG in einem Texteditor
Das Kinsta-Logo als SVG in einem Texteditor

Theoretisch kannst du eine SVG-Datei mit einem Texteditor bearbeiten oder erstellen. Das funktioniert aber nur bei sehr einfachen Bildern mit wenigen Vektoren. Bei einer Datei wie der obigen ist es fast unmöglich, jeden Vektor von Hand zu ändern.

Was du tun kannst, ist CSS mit einem Texteditor hinzuzufügen, was ziemlich einfach ist. In diesem Beispiel hast du gesehen, dass wir die Vektorlinien mit dem typischen Kinsta-Lila gefüllt haben. Du kannst CSS verwenden, um der Vektordatei jede Art von Styling hinzuzufügen, auch Animationen. Das ist etwas, was du mit herkömmlichen Bildformaten nicht machen kannst.

3. Einen Foto- oder Bildeditor verwenden

Die meisten modernen Bildbearbeitungsprogramme bieten Unterstützung für SVG-Dateien. Das heißt, du kannst sie öffnen, bearbeiten und dann die Änderungen speichern oder das Bild in andere Formate exportieren.

Wenn du eine SVG-Datei mit einem Bildbearbeitungsprogramm bearbeitest, stehen dir dieselben Werkzeuge zur Verfügung, mit denen du auch andere Bildtypen anpassen kannst. So kannst du die SVG-Datei bearbeiten, weitere Details hinzufügen, Teile davon löschen und im Grunde alles andere tun, was du willst.

Du kannst ein Bildbearbeitungsprogramm verwenden, um ein SVG zu öffnen
Du kannst ein Bildbearbeitungsprogramm verwenden, um ein SVG zu öffnen

Bild- oder Fotobearbeitungssoftware bietet auch die einfachste Möglichkeit, SVG-Dateien von Grund auf zu erstellen. Du kannst mit Vektor- oder Linienwerkzeugen Bilder entwerfen und sie im SVG-Format speichern. Sobald deine SVG-Dateien fertig sind, kannst du sie in WordPress hochladen, damit die Besucher sie sehen können.

In diesem Leitfaden erfährst du, warum SVG-Dateien so beliebt sind, wann du sie verwenden solltest und wie du sie öffnen kannst 🚀Click to Tweet

Zusammenfassung

SVGs sind perfekt für Illustrationen und einfache Grafiken wie Logos. Zum Glück gibt es viele Tools, mit denen du diese Art von Inhalten verwalten kannst. Außerdem werden SVG-Dateien von den meisten Internetbrowsern unterstützt.

Um eine SVG-Datei zu öffnen, gibt es drei Möglichkeiten, die du nutzen kannst:

  1. Verwende einen Browser
  2. Öffne SVG-Dateien mit einem Texteditor
  3. Verwende einen Foto- oder Bildeditor

Brauchst du Hilfe bei deinem Webdesign? Bei Kinsta beinhalten alle unsere Hosting-Angebote einen 24/7-Support durch unsere erstklassigen WordPress-Entwickler.


Spare Zeit, Kosten und maximiere die Leistung deiner Seite mit:

  • Schnelle Hilfe von WordPress Hosting Experten, 24/7.
  • Cloudflare Enterprise Integration.
  • Globale Reichweite mit 29 Rechenzentren weltweit.
  • Optimierung mit unserem integrierten Application Performance Monitoring.

All das und noch viel mehr, in einem Plan ohne langfristige Verträge, betreute Migrationen und eine 30-Tage-Geld-zurück-Garantie. Schau Dir hier unsere Pakete an oder sprich mit dem Vertrieb, um den richtigen Tarif für dich zu finden.