Was du über das SVG-Dateiformat wissen solltest

Ein Bild im Format Scalable Vector Graphics (SVG) ist eine 2D-Grafik, die Animationen und Interaktivität unterstützt. Das Verhalten der SVG-Datei wird in einer XML-Textdatei definiert. Diese legt Kodierungsregeln fest, die sowohl für Menschen als auch für Computer lesbar sind. SVG-Dateien lassen sich auf verschiedene Größen skalieren, ohne dass sich die Bildqualität verändert. Alle modernen Browser unterstützen inzwischen das SVG-Format.

Wenn du Bilder für deine Website erstellen möchtest, musst du dich zwischen Vektor- und Rasterbildern entscheiden. Rasterbilder bestehen aus Pixeln und haben eine feste Auflösung. Wenn du hineinzoomst oder das Bild vergrößerst, wirkt es deshalb körnig oder pixelig.

Vektorbilder hingegen werden aus Linien, Punkten und Formen aufgebaut. Dadurch eignen sie sich besonders gut für skalierbare Bilder, da beim Vergrößern keine Bildqualität verloren geht. Die meisten Druckgrafiken und Websites werden im SVG-Format erstellt, damit sich die Designs später an unterschiedliche Größen anpassen lassen. Das SVG-Format wird häufig für Logos, Typografie, Symbole oder Illustrationen verwendet.

Vorteile von SVG-Dateien

Skalierbarkeit

Die Auflösung oder Größe deines Bildschirms spielt bei der Anzeige von SVG-Bildern keine Rolle. Anders als PNG und JPG, die beim Vergrößern unscharf wirken können, behalten SVG-Bilder ihre hohe Qualität. Das ist möglich, weil sie auflösungsunabhängig sind.

Website-Leistung

Bei richtiger Optimierung sind SVG-Dateien kleiner als Dateien in anderen Formaten. Das verkürzt die Ladezeit und verbessert die Leistung deiner Website. So wird auch die Nutzung angenehmer, da Besucher schneller durch deine Seiten navigieren können.

Einfache Bearbeitung

Du kannst SVG-Dateien ganz einfach mit gängigen Grafikprogrammen bearbeiten. Häufig werden dafür Adobe Illustrator, Corel und Sketch verwendet. Auch ein Texteditor eignet sich, da du den Auszeichnungscode direkt anpassen kannst.

Unterstützung für Animationen

Mit Technologien wie JavaScript lassen sich SVG-Dateien verändern und interaktiver und auffälliger gestalten. Besonders animierte SVG-Bilder machen eine Website interessanter.

Kontrolle über die Gestaltung

Mit SVG-Dateien kannst du die Darstellung deiner Bilder frei bestimmen. Eigenschaften wie Linienfarbe, Größe oder Füllfarbe lassen sich einfach anpassen. Außerdem brauchst du keine Bild-Sprites, um einem Bild einen Hover-Effekt hinzuzufügen.

Nachteile von SVG-Dateien

• Das Format eignet sich nur für 2D-Grafiken und unterstützt daher keine Kamerafotos.
• Du benötigst ein WordPress-Plugin (WP SVG), damit deine WordPress-Website das SVG-Dateiformat verwenden kann. Aus Sicherheitsgründen erlaubt WordPress SVG-Bilder nur, wenn du sie ausdrücklich freigibst.

So konvertierst du Dateien in SVG

Mit Filestar kannst du über hundert Dateitypen ganz einfach in SVG konvertieren. Unter diesem Link findest du alle Skills für das SVG-Dateiformat. Mit der Desktop-App Filestar sind für die Konvertierung in SVG nur wenige Schritte nötig. Nachdem du Filestar heruntergeladen hast, gehst du so vor:

• Klicke mit der rechten Maustaste auf die Datei auf deinem Computer, die du konvertieren möchtest, und wähle Convert with Filestar
• Gib ‘convert to SVG’ in das Suchfeld ein
• Klicke auf RUN
• Das SVG-Bild wird automatisch auf deinem Computer gespeichert

Oder schau dir einfach das kurze Video unten an, das wir für dich erstellt haben. Darin zeigen wir, wie eine PDF-Datei in SVG konvertiert wird.