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.
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.
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.
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.
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.
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.
Wenn du diese JPEG-Datei mit einem der online verfügbaren Tools in SVG umwandelst, erhältst du viel weniger Details.
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.
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.
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.
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.
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.
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:
- Verwende einen Browser
- Öffne SVG-Dateien mit einem Texteditor
- 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.
