Was ist eine SVG-Datei (und wie wird sie verwendet)?

Veröffentlicht: 2020-08-18

Eine skalierbare Vektorgrafik (SVG) ist eine einzigartige Art von Bildformat. Im Gegensatz zu anderen Varianten verlassen sich SVGs nicht auf einzelne Pixel, um die Bilder zu bilden, die Sie sehen. Stattdessen verwenden sie „Vektor“-Daten.

Durch die Verwendung von SVGs erhalten Sie Bilder, die auf jede Auflösung skaliert werden können, was sich neben vielen anderen Anwendungsfällen für das Webdesign als nützlich erweist. In diesem Artikel stellen wir uns die Frage: Was ist eine SVG-Datei? Wir zeigen Ihnen dann, wie Sie das Format verwenden.

Lasst uns anfangen!

Abonnieren Sie unseren Youtube-Kanal

Was ist eine SVG-Datei?

SVGs sind Grafiken, die aus Vektoren erstellt wurden. Für den Uneingeweihten ist ein Vektor ein Element mit einer bestimmten Größe und Richtung. Theoretisch können Sie mit einer Sammlung von Vektoren fast jede gewünschte Art von Grafiken erstellen. Nehmen Sie dieses Bild eines blauen Rechtecks ​​mit schwarzem Rand und Schatten, zum Beispiel:

Ein blaues Quadrat im PNG-Format.

Dies ist eine andere Art von Bilddatei, die als Portable Network Graphic (PNG) bezeichnet wird und für Illustrationen und Zeichnungen verwendet wird. Wenn Sie etwas Ähnliches mit Vektorgrafiken replizieren möchten, müssen Sie es mit XML-Code generieren (derselbe, der für Sitemaps verwendet wird). Der folgende Code könnte das gleiche Ergebnis erzielen: 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

Theoretisch sehen Sie, wenn Sie diesen Code in eine HTML-Datei einfügen, einen ähnlichen Satz von Rechtecken wie im PNG-Format – das heißt, solange der von Ihnen verwendete Browser SVG-Dateien unterstützt. Obwohl beide Bilder gleich aussehen, bieten SVG-Dateien eine ganze Reihe von Vorteilen, die andere Formate nicht bieten. SVGs sind beispielsweise in der Lage, die Bildqualität beim Vergrößern oder Verkleinern beizubehalten.

Wenn Sie das PNG-Rechteck weiter vergrößern, werden Sie feststellen, dass seine Qualität irgendwann nachlässt. Bei komplexeren pixelbasierten Grafiken wird die Verschlechterung viel schneller sichtbar. SVGs sehen jedoch bei praktisch jeder Auflösung gut aus.

Warum eine SVG-Datei verwenden?

Viele Websites verwenden Formate wie PNG und JPEG fast austauschbar. SVGs sind jedoch nicht ganz so vielseitig. Wenn Sie versuchen, ein komplexes Foto mithilfe von Vektoren neu zu erstellen, erhalten Sie normalerweise riesige und unbrauchbare SVG-Dateien.

Das SVG-Format ist jedoch eine fantastische Option für eine ganze Reihe anderer Szenarien:

  • Logo Design. Da Sie Logos wahrscheinlich auf Websites und in sozialen Medien wiederverwenden werden, behebt die Verwendung von SVG alle potenziellen Skalierbarkeitsprobleme.
  • Diagramme. SVGs passen perfekt zu Diagrammen und jeder anderen Art von Illustration, die auf einfachen Linien basiert.
  • Animierte Elemente. Sie können CSS verwenden, um SVGs zu animieren, was sie zu einer nützlichen Komponente im Website-Design macht, insbesondere für Mikrointeraktionen.
  • Diagramme und Grafiken. Sie können SVGs verwenden, um skalierbare Grafiken und Diagramme zu erstellen, die Animationen unterstützen.

Da SVGs das XML-Format verwenden, sind sie dadurch auch durchsuchbar und indiziert. Screenreader können SVG-Dateien interpretieren, solange Sie die richtigen Barrierefreiheits-Tags verwenden.

Schließlich sind SVG-Dateien in der Regel viel kleiner als hochauflösende Äquivalente in anderen Formaten. Auf dem Papier bedeutet dies, dass Sie möglicherweise einige Ihrer Seitengrößen reduzieren und die Ladezeiten verkürzen können. Wenn Sie jedoch nicht vorhaben, die meisten Ihrer Bilder in SVGs zu konvertieren, wird die Leistungssteigerung wahrscheinlich minimal sein.

So erstellen Sie eine SVG-Datei (2 Möglichkeiten)

Es gibt zwei Ansätze, die Sie bei SVG-Dateien verwenden können. Sie können sie von Grund auf neu erstellen oder ein vorhandenes Bild nehmen und es konvertieren. Beginnen wir mit der manuellen Methode.

1. Manuelles Erstellen einer SVG-Datei

Beim Erstellen einer SVG-Datei müssen Sie normalerweise keine Vektorinformationen eingeben, wie wir es zuvor getan haben. Das war nur ein Beispiel, um das Konzept zu zeigen. Stattdessen erstellen Sie SVGs wie jede andere Grafik – indem Sie ein Designprogramm verwenden und die Datei als SVG speichern. Viele moderne Grafikdesign-Tools unterstützen SVGs out of the box. Einige Top-Optionen sind:

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

Die letzten beiden Optionen in dieser Liste sind Open-Source-Lösungen. Dies macht sie zu einer großartigen Option, um mit der Erstellung von SVGs zu experimentieren, ohne für Premium-Software zu bezahlen. Tatsächlich können sie alles sein, was Sie brauchen.

Wenn Sie keine Erfahrung mit Grafikdesign haben, wird es eine Herausforderung sein, eigene Logos oder andere Elemente für Ihre Website zu erstellen. In diesem Fall nehmen Sie am besten vorhandene Bilder und konvertieren sie in SVGs.

2. Konvertieren Sie vorhandene Bilder in SVGs

Es gibt viele kostenlose Tools, mit denen Sie Bilder aus anderen Formaten in SVGs konvertieren können. Mit den meisten der im letzten Abschnitt erwähnten Software können Sie Ihre Bilder öffnen und als SVG-Dateien speichern.

Wenn Sie keine Software herunterladen möchten, können Sie auch Online-Konvertierungstools verwenden – und es gibt viele Dienste, an die Sie sich wenden können. Ein Beispiel ist Vector Magic, mit dem Sie alle Arten von Dateitypen in SVGs konvertieren können:

Die Vector Magic-Homepage.

Wir mögen dieses spezielle Tool, weil es Ihnen eine Vorschau Ihrer SVG-Datei anzeigt, bevor Sie sie herunterladen. Sie können auch einen integrierten Editor verwenden, um kleine Änderungen und Korrekturen vorzunehmen, bevor Sie die Datei herunterladen:

Bearbeiten einer SVG-Datei.

Natürlich ist dies nur eine Option. Andere PNG- und JPG-zu-SVG-Konverterdienste umfassen Convertio und Img2Go. Sie sollten etwas recherchieren, um die für Ihre Bedürfnisse am besten geeignete Lösung zu finden.

Unserer Erfahrung nach bieten die meisten SVG-Konverter Ergebnisse von ähnlicher Qualität. Um die bestmöglichen Ergebnisse zu erzielen, ist der verwendete Konverter nicht so wichtig wie die von Ihnen ausgewählten Bilder.

Als Faustregel gilt, dass das SVG-Format nur für „einfache“ Bilder – also Bilder mit definierten Rändern und klaren Linien – sinnvoll ist. Je komplexer das Bild ist, desto wahrscheinlicher ist es, dass Sie eine riesige SVG-Datei erhalten, die manuell bearbeitet oder animiert werden muss.

So verwenden Sie eine SVG-Datei (in und außerhalb von WordPress)

SVGs sind nicht allzu schwer zu verwenden. Das Hinzufügen einer SVG-Datei zu Ihrer Website ist so einfach wie das Einfügen des Codes in ein HTML-Dokument, wo immer Sie das Bild haben möchten.

Wenn Sie und die Besucher Ihrer Website Browser verwenden, die SVG-Dateien unterstützen (und die meisten tun dies heutzutage), können sie das Element sehen. Das Animieren von SVGs ist natürlich schwieriger, da es die Verwendung von CSS erfordert.

Der Prozess ändert sich jedoch, wenn Sie WordPress verwenden. Das Content Management System (CMS) unterstützt standardmäßig keine SVGs. Wenn Sie die SVG-Unterstützung aktivieren möchten, damit Sie Dateien direkt auf Ihre Website hochladen können, sollten Sie ein Plugin wie Safe SVG verwenden:

Das Safe SVG-Plugin.

Es ist auch möglich, die SVG-Unterstützung in WordPress manuell zu aktivieren, aber der Prozess ist viel komplizierter. In diesem Fall ist die Verwendung eines Plugins die sicherere Option.

Abschluss

Die Anpassung Ihrer Website an die Verwendung von SVG-Dateien ist viel einfacher, als Sie sich vorstellen können. Die eigentliche Herausforderung besteht darin, SVGs von Grund auf neu zu entwerfen oder die richtigen Bilder für die Konvertierung in das Format auszuwählen. Glücklicherweise gibt es viele Tools, mit denen Sie beides tun können.

Einige großartige Optionen sind Adobe Illustrator, InDesign und GIMP. Mit diesen Tools können Sie vorhandene Bilder erstellen und in SVGs konvertieren. Wenn Sie WordPress verwenden, können Sie diese SVGs mit dem Safe SVG-Plugin hochladen und dann viel Spaß beim Animieren haben.

Haben Sie Fragen zur Verwendung von SVG-Dateien? Lassen Sie uns im Kommentarbereich unten darüber sprechen!

Miniaturansicht des Artikelbilds von VectorsMarket / shutterstock.com