SVG steht für Scalable Vector Graphics. Es ist eine Art von Bildformat, das aus Vektoren (anstelle von Pixeln) besteht, bei denen es sich um mathematische Beschreibungen der Formen und Farben des Bildes handelt und die im XML-Format gespeichert werden.
Diese Gleichungen beschreiben alle Punkte, Formen, Kurven, Linien und Farben innerhalb eines SVG-Bildes.
Im Gegensatz zu anderen Bildformaten wie JPEG oder PNG kann SVG skaliert werden (größer und kleiner gemacht werden), ohne an Qualität zu verlieren. Das macht es zu einem großartigen Dateiformat für Bilder auf verschiedenen Bildschirmgrößen, wie Desktops, Tablets und Mobilgeräten.
SVGs sind zweidimensional und werden typischerweise für Illustrationen, Grafiken, Icon-Schriften und Branding-Bilder verwendet. Sie können sie jedoch auch für Animationen verwenden.
Wie der Name schon sagt, sind SVGs auch skalierbar. Das bedeutet, dass sie ohne Qualitätsverlust gestreckt oder geschrumpft werden können. Für diese Saison eignen sich SVGs auch hervorragend für Logos und andere Bilder, die in vielen verschiedenen Größen angezeigt werden müssen.
Vorteile von SVG-Bildern
SVG-Bilder eignen sich für viele verschiedene Anwendungen, wie z. B. Grafiken und Illustrationen. Hier sind einige der Hauptvorteile des SVG-Formats:
- Skalierbarkeit: Da sie Vektoren verwenden, können SVG-Bilder ohne Qualitätsverlust auf jede Größe skaliert werden. Dies ist perfekt für responsives Webdesign, das Grafiken benötigt, die auf Bildschirmen aller Größen gut aussehen.
- Bearbeitbar: Sie können SVG-Bilder mit jedem Texteditor direkt auf Ihrer Webseite mit CSS und JavaScript bearbeiten. Das bedeutet, dass Sie Ihre SVG-Bilder einfach ändern können.
- Kleine Dateigrößen: SVG-Dateien haben normalerweise kleinere Dateigrößen im Vergleich zu Bitmap-Bildern wie JPEG oder PNG. Dies kann zu schnelleren Seitenladezeiten und einer besseren Gesamtleistung von WordPress führen.
- Kompatibilität: SVG wird von allen modernen Webbrowsern unterstützt. Das bedeutet, dass Ihre SVG-Bilder für fast jeden Online-Nutzer korrekt angezeigt werden.
Nachteile von SVG-Bildern
Beachten Sie, dass SVG nicht für alle Bildtypen geeignet ist. Hier sind einige Nachteile des SVG-Dateiformats:
- Schwierigkeit: SVG-Bilder können komplexer sein als herkömmliche Rasterbilder wie JPEG oder PNG. Das bedeutet, dass Sie mehr Geschick und Kenntnisse in Bezug auf Bildbearbeitungssoftware benötigen, um SVG-Bilder zu erstellen und zu ändern.
- Darstellungsprobleme: Ältere Browser oder Geräte haben möglicherweise Probleme bei der korrekten Darstellung von SVG-Grafiken.
- Sicherheitsprobleme: SVG-Dateien werden im XML-Markup-Sprachformat gespeichert, das anfällig für bösartigen Code, Brute-Force-Angriffe und Cross-Site-Scripting-Angriffe ist.
- Dateigröße: Bei sehr detaillierten Bildern können SVG-Dateigrößen recht groß werden. Dies kann die Ladezeiten Ihrer Website verlangsamen.
SVG vs. JPEG vs. PNG Bilder
SVG, JPEG und PNG sind einige der beliebtesten Bilddateiformate für die Online-Nutzung, einschließlich WordPress-Websites. Aber es gibt einige wichtige Unterschiede zwischen ihnen.
JPEG ist ein Format, das hauptsächlich für fotografische Bilder verwendet wird. Im Gegensatz zu SVG ist JPEG ein Raster- oder Bitmap-Bild, was bedeutet, dass es aus einzelnen Pixeln besteht.
Wenn Sie ein JPEG-Bild zu stark skalieren, werden die Pixel sichtbar und das Bild kann verschwommen oder verpixelt erscheinen. Das Speichern von JPEG-Bildern verringert auch deren Qualität aufgrund des JPEG-Kompressionsalgorithmus.
PNG ist ein weiteres Rasterbildformat wie JPEG. Es verwendet verlustfreie Datenkomprimierung, was bedeutet, dass beim Komprimieren des Bildes keine Daten verloren gehen. Dies macht PNG zu einer ausgezeichneten Option für Strichzeichnungen, Text und ikonische Grafiken bei kleinen Dateigrößen.
Hier ist ein kurzer Überblick über die Unterschiede zwischen SVG-, JPEG- und PNG-Bildern.
| Attribut | SVG | JPEG | PNG |
|---|---|---|---|
| Skalierbarkeit | Unbegrenzt, kein Qualitätsverlust | Begrenzt, verliert Qualität beim Skalieren | Begrenzt, verliert Qualität beim Skalieren |
| Dateigröße | Relativ klein und überschaubar | Kann groß sein, hängt von der Qualität ab | Normalerweise größer aufgrund verlustfreier Komprimierung |
| Am besten für | Grafiken und Illustrationen | Fotografische Bilder | Linienkunst, Text und ikonische Grafiken |
| Unterstützt Transparenz | Ja | Nein | Ja |
Optimierung von SVG-Bildern
Bevor Sie Bilder in Ihre WordPress-Inhalte einbetten, empfehlen wir Ihnen, diese für das Web zu optimieren. Dies stellt sicher, dass Ihre Seiten schnell geladen werden und eine gute Benutzererfahrung bieten.
Zuerst sollten Sie SVG-Bilder in den genauen Abmessungen speichern, in denen Sie sie verwenden möchten. Eine Skalierung kann die Dateigröße und die Ladezeiten Ihrer Seite erhöhen, auch wenn dies die Bildqualität nicht beeinträchtigt.
Sie sollten auch in Erwägung ziehen, unnötige Daten aus Ihren SVG-Bilddateien zu entfernen. Dies können Sie tun, indem Sie ein Online-Tool zur Bereinigung von SVG-Markup wie den SVG Cleaner & Optimizer verwenden.
Schließlich ist es wichtig, Gzip-Kompression mit SVG-Dateien zu verwenden. Weitere Details finden Sie in unserem Leitfaden zur Aktivierung der Gzip-Kompression in WordPress.
SVG-Bilder in WordPress verwenden
WordPress erlaubt standardmäßig keine SVG-Bilder, da die XML-Markup-Sprache Sicherheitslücken aufweist. Deshalb empfehlen wir, nur vertrauenswürdigen Benutzern den Upload von SVG-Bildern in die Mediathek Ihrer WordPress-Website zu gestatten.
Sie können die SVG-Unterstützung ganz einfach mit dem kostenlosen WPCode-Plugin aktivieren. Es ist das beste Code-Snippet-Plugin, mit dem Sie SVG-Uploads manuell nur für Administratoren aktivieren können.
Zuerst müssen Sie das WPCode-Plugin installieren und aktivieren. Weitere Details finden Sie in unserem Leitfaden zur Installation eines WordPress-Plugins.
Gehen Sie dann in Ihrem WordPress Admin-Panel zu Code Snippets » Snippet hinzufügen. Suchen Sie einfach nach 'svg' und bewegen Sie die Maus über 'SVG-Dateien-Upload zulassen'.
Dann können Sie auf „Snippet verwenden“ klicken.
Dann müssen Sie einfach den Code-Schnipsel auf 'Aktiv' umschalten und dann auf 'Aktualisieren' klicken.
Dies aktiviert die sichere SVG-Unterstützung für Administratoren auf Ihrer Website.
Weitere Details und andere SVG-Unterstützungs-Plugins finden Sie in unserem Leitfaden zum Hinzufügen von WordPress SVG-Bilddateien.
Wir hoffen, dieser Artikel hat Ihnen geholfen, mehr über SVG-Bilder in WordPress zu erfahren. Möglicherweise möchten Sie auch unsere Liste mit zusätzlichen Lektüren unten für verwandte Artikel über nützliche WordPress-Tipps, Tricks und Ideen sehen.
Wenn Ihnen dieser Artikel gefallen hat, abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Video-Tutorials. Sie finden uns auch auf Twitter und Facebook.
