Was ist eine SVG-Datei? Leitfaden für die Verwendung

Skalierbare Vektorgrafiken (SVG) sind eine besondere Art von Bildformat. SVGs sind nicht wie andere Formate. Sie sind nicht auf einzelne Pixel angewiesen, um die Bilder zu erstellen, die Sie sehen. Stattdessen verwenden sie „Vektor“-Daten.

Mit SVGs können Sie Bilder auf eine beliebige Auflösung skalieren. Das ist nützlich für das Webdesign und viele andere Anwendungen. Wir beantworten die Frage: „Was ist eine SVG-Datei? Dann zeigen wir Ihnen, wie Sie sie verwenden können.

Was ist eine SVG-Datei und wie verwendet man sie?

SVG ist eine vektorbasierte Grafik. Ein Vektor ist ein Element, das eine bestimmte Größe und Richtung hat.

Scalable Vector Graphics sind ein XML-basiertes Markup zur Beschreibung von zweidimensionalen Vektorgrafiken. Es handelt sich um einen textbasierten und offenen Webstandard, der Bilder beschreibt. Sie können in jeder beliebigen Größe gerendert werden. SVG ist im Grunde für Grafiken das, was HTML für Text ist.

Warum eine SVG-Datei verwenden?

Mit SVG lassen sich viele der schwierigsten Probleme der heutigen Webentwicklung lösen. Sehen wir uns einige davon an.

Empfänglichkeit und Skalierbarkeit

SVG verwendet Formen, Zahlen und Koordinaten anstelle eines Pixelrasters, um Grafiken im Browser darzustellen, was es auflösungsunabhängig und unbegrenzt skalierbar macht. Sie können einen Kreis mit einem Stift oder einen Himmelsplan erstellen, wenn Sie genau hinsehen. Nur der Maßstab ist anders.

SVG ermöglicht es Ihnen, verschiedene Formen, Pfade und Textelemente zu kombinieren, um Bilder zu erstellen, die in jeder Größe klar und deutlich sind.

Rasterbasierte Formate wie GIF, JPG und PNG hingegen haben feste Abmessungen, die bei der Skalierung zu Pixelbildung führen. Responsive Image-Techniken sind zwar für Pixelgrafiken nützlich, werden aber nie mit der unverwüstlichen Skalierung von SVG mithalten können.

Programmierbarkeit und Interaktivität

SVG lässt sich bearbeiten und mit Skripten versehen. Mit CSS oder JavaScript können Sie Animationen und Interaktionen zu Ihrer SVG-Grafik hinzufügen.

Zugänglichkeit

SVG-Dateien können durchsucht und indiziert werden, da sie textbasiert sind. Sie sind für Screenreader, Suchmaschinen und andere Geräte zugänglich.

Leistung

Die Größe der Dateien auf einer Website ist einer der wichtigsten Faktoren, die sich auf die Leistung der Website auswirken. SVG-Grafiken sind in der Regel kleiner als Bitmap-Dateien.

Häufige SVG-Anwendungsfälle und Browser-Unterstützung

SVG bietet eine Vielzahl von praktischen Anwendungen. Werfen wir einen Blick auf die wichtigsten.

Diagramme und einfache Illustrationen

SVG ist das perfekte Format für alle traditionellen Zeichnungen, die mit Stift und Bleistift angefertigt werden können.

Icons und Logos

SVG ist ideal für Icons und Logos, die in allen Größen scharf und klar sind, z. B. Schaltflächen und Plakate. SVG-Symbole sind auch leichter zu finden und leichter zugänglich.

Animationen

SVG-Grafiken können zur Erstellung attraktiver Animationen verwendet werden. SVG-Code kann sowohl mit JavaScript-Animationen als auch mit der integrierten SMIL-Animationsfunktion interagieren.

Interaktivität (Diagramme und Schaubilder, Infografiken oder Karten)
SVG kann zur Darstellung von Daten und deren dynamischer Aktualisierung auf der Grundlage von Benutzeraktionen oder anderen Ereignissen verwendet werden. Interaktive SVG-Infografik, interaktive SVG-Roadtrip-Karte.

Besondere Effekte

SVG kann viele Live-Effekte haben, wie z. B. Form-Morphing und andere Schnulzeneffekte.

Anwendungs- und Schnittstellendesign

Mit SVG können Sie anspruchsvolle Schnittstellen erstellen, die Sie in HTML5, webbasierte Anwendungen und Rich-Internet-Anwendungen (RIAs) integrieren können.

Wie Sie sehen können, kann SVG in vielen Situationen und fast überall eingesetzt werden. Die gute Nachricht dabei ist, dass die Browserunterstützung für SVG großartig ist, wie Sie auf caniuse.com selbst überprüfen können.

Zwei Wege zur Erstellung einer SVG-Datei

SVG-Dateien können auf zwei Arten erstellt werden. Sie können von Grund auf neu erstellt oder aus einem vorhandenen Bild übernommen werden, das Sie konvertieren können. Beginnen wir mit der manuellen Methode.

1. Eine SVG-Datei manuell erstellen

SVG-Dateien werden in der Regel erstellt, ohne dass die Vektorinformationen eingegeben werden müssen, wie wir es zuvor getan haben. Dies war nur ein Beispiel. Stattdessen können SVGs mit jedem beliebigen Designprogramm erstellt werden. Die Datei wird als SVG gespeichert. SVGs werden von vielen modernen Grafikdesign-Tools unterstützt. Dies sind einige der wichtigsten Optionen:

• Adobe Illustrator, Photoshop und InDesign
• Microsoft Visio
• Inkscape
• GIMP

Diese beiden Open-Source-Lösungen sind die beiden letzten in dieser Liste. Sie sind eine gute Möglichkeit, die SVG-Erstellung auszuprobieren, ohne für eine Premium-Software zu bezahlen. Vielleicht sind sie sogar alles, was Sie brauchen.

Es kann schwierig sein, Logos und andere Elemente für Ihre Website zu erstellen, wenn Sie keine Erfahrung im Grafikdesign haben. Sie können vorhandene Bilder verwenden und sie in SVGs umwandeln.

2. Vorhandene Bilder in SVGs umwandeln

Sie können Bilder aus verschiedenen Formaten mit vielen kostenlosen Programmen in SVGs umwandeln. Die meisten der im vorherigen Abschnitt erwähnten Programme ermöglichen es Ihnen, Bilder zu öffnen und als SVG zu speichern.

Es gibt auch Online-Konvertierungsprogramme, wenn Sie keine Software herunterladen möchten. Es gibt viele Dienste, die Sie nutzen können. Ein Beispiel ist Vector Magic, mit dem Sie alle möglichen Dateitypen in SVGs umwandeln können:

Dieses Tool ist großartig, weil es Ihnen eine Vorschau bietet, bevor Sie die SVG-Datei tatsächlich herunterladen. Ein eingebauter Editor ermöglicht es Ihnen, kleinere Änderungen vorzunehmen, bevor Sie die Datei herunterladen.

Dies ist nur eine Option. Convertio und Img2Go sind weitere Konvertierungsdienste für PNG und JPG in SVG. Um die beste Lösung für Sie zu finden, ist es wichtig, dass Sie sich informieren.

Wir haben festgestellt, dass die meisten SVG-Konverter ähnliche Ergebnisse liefern. Die Bilder, die Sie auswählen, sind ebenso wichtig wie der Konverter, den Sie verwenden, um die besten Ergebnisse zu erzielen.

Am besten verwenden Sie SVG für einfache Bilder, d. h. Bilder mit klaren Linien und definierten Rändern. Je nachdem, wie komplex Ihr Bild ist, werden Sie wahrscheinlich eine große SVG-Datei erhalten, die schwer zu bearbeiten oder zu animieren ist.

Wie man eine SVG-Datei verwendet (in und außerhalb von WordPress)

SVGs können leicht verwendet werden. Es ist einfach, eine SVG-Datei auf Ihrer Website einzufügen, indem Sie den Code kopieren und in ein HTML-Dokument einfügen, in dem Sie das Bild haben möchten.

Wenn Sie und die Besucher Ihrer Website Browser verwenden, die SVG-Dateien unterstützen (und das tun die meisten heutzutage), können sie das Element sehen. Da SVGs mit CSS animiert werden können, ist dies schwieriger.

Für WordPress-Benutzer ergibt sich jedoch eine Änderung des Verfahrens. SVGs werden von dem Content Management System (CMS) nicht unterstützt. Wenn Sie die SVG-Unterstützung aktivieren möchten, damit Sie Dateien direkt in Ihre Website hochladen können, sollten Sie ein Plugin wie Safe SVG verwenden.

Es ist auch möglich, die SVG-Unterstützung in WordPress manuell zu aktivieren, aber der Prozess ist viel aufwändiger. In solchen Fällen ist ein Plugin sicherer.

Fazit

Es ist einfacher als Sie denken, Ihre Website für SVG-Dateien anzupassen. Es ist nicht einfach, SVGs zu erstellen oder die richtigen Bilder für die Konvertierung auszuwählen. Es gibt viele Tools, die für beides verwendet werden können.

Ilya Lavrov

Ich bin ein Produkt- und Grafikdesigner mit 10 Jahren Hintergrund. Schreiben über Branding, Logoerstellung und Business.