So verwenden Sie SVG in WordPress

Obwohl SVG Anfang der 2000er Jahre standardisiert wurde, erblickte das sehr ansprechende Bildformat aufgrund der schlechten Browserunterstützung nicht viel Licht der Welt. All dies hat sich in den letzten Jahren drastisch geändert, da SVG schnell zur De-facto-Bildform im Web wird.

Und es sind nicht nur Grafikdesigner, die sich in SVG verlieben, sondern auch WordPress-Benutzer, die ihre Blogs beschleunigen möchten, indem sie die Gesamtbildgröße reduzieren. In diesem Beitrag wird das Thema der Verwendung von SVG auf einer WordPress-basierten Website untersucht.

Was ist SVG?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Bildformat zur Darstellung von Grafiken im Web und in Apps. Grundsätzlich ist eine SVG-Datei einfach eine Sammlung von XML-Code, der verschiedene Formen und Farben angibt, die in einem SVG-Bild verwendet werden.

Und da Sie SVG-Dateien mit einem Texteditor öffnen können, ist es auch einfach, Anpassungen mit einfachem CSS3- und JS-Code vorzunehmen. Infolgedessen werden SVGs von modernen Webbenutzern aufgrund ihrer vielseitigen Flexibilität sehr bevorzugt.

Am wichtigsten ist, dass das W3C SVG als branchenführenden Standard anerkennt. SVG funktioniert also einwandfrei mit anderen webbasierten Technologien wie DOM, HTML usw.

Warum ist SVG wichtig?

SVG-Bilder sind vektorbasiert, daher kann ein SVG-Bild ohne Qualitätsverlust unendlich über den Bildschirm skaliert werden. Die Kerninteraktion in dieser Hinsicht ist Browser XML; wobei der Browser die XML-Spezifikation bei jeder Erhöhung oder Verringerung darstellt.

Natürlich sind SVG-Dateien viel flexibler als herkömmliche Formate wie PNG oder JPEG. Und durch die direkte Interaktion zwischen CSS und JavaScript können Sie Ihre SVG-Bilder auch unterwegs anpassen. Dies ist entscheidend, wenn Sie an einem neuen Design oder auf andere Weise arbeiten.

In Bezug auf die Leistung sind SVG-Bilder in der Regel deutlich kleiner als alle Gegenstücke. Daher ist es üblich, dass Illustrationen, Logos und Symbole als Vektorgrafiken erstellt werden. Dies hat auch zur Entwicklung vieler Icon Fonts geführt, auf die wir im Artikel später noch kurz eingehen werden.

Kurz gesagt, SVGs bieten Flexibilität, reduzierte Bildgröße und eine starke Grundlage für die Verbesserung der Bildleistung auf Ihrer WordPress-Site.

Wie werden SVG-Bilder erstellt?

Das Erstellen von SVG-Bildern kann auf zwei Arten erfolgen: Schreiben von „Code“ und Verwenden einer modernen Grafikdesign-Software. Die erste Methode, nämlich das Schreiben von XML-Skripten, ist die traditionelle Methode zum Erstellen von SVG-Dateien, kann sich jedoch als langsame und ineffiziente Technik erweisen.

Eine einfache Sammlung von Quadraten könnte im XML-Format etwa so aussehen:

Wie Sie sehen können, ist das wiederholte Schreiben für komplexe Grafiken dasselbe, als würden Sie sich selbst ins Knie schießen.

Die andere Methode ist die Verwendung von Software, und dies ist die schnellste und effizienteste Art, SVG-Grafiken zu erstellen. Mit vektorbasierter Software können Sie sich auf das Erstellen von Grafiken konzentrieren und diese später als fertige SVG-Dateien exportieren.

Affinity Designer ist ein bekanntes professionelles Vektorbearbeitungsprogramm, aber auch Software wie Adobe Illustrator, Sketch, Figma und Inkscape.

Für welche Software Sie sich auch entscheiden, das Einzige, was wirklich zählt, sind Ihre Pläne für die Art von Grafiken, die Sie erstellen möchten. Die Exportfunktion funktioniert in allen modernen Programmen gleich.

Selbstverständlich ist SVG immer dieselbe XML-Struktur. So können Sie SVG-Bilder sowohl als Dokument verwenden als auch Inline einfügen.

Unterstützt WordPress SVG?

So seltsam es klingen mag, eine Plattform mit dem Umfang von WordPress unterstützt das SVG-Dateiformat eigentlich nicht. Aber nur wegen gravierender Sicherheitsbedenken.

Im Gegensatz zu den Dateitypen PNG/JPG/GIF ist SVG kein gerastertes Bild, sondern ein Vektor. Infolgedessen ist SVG den Risiken der JavaScript-Ausnutzung ausgesetzt, und WordPress hat sich entschieden, SVG in WordPress standardmäßig nicht zuzulassen. Es macht von allen Seiten Sinn.

Obwohl WordPress-Mitwirkende seit vielen Jahren über SVG sprechen, gibt es zu viele Aspekte, die angegangen werden müssen, um Sicherheitsprobleme in großem Maßstab zu verhindern.

Die einzige Möglichkeit, dies zu umgehen, besteht darin, Plugins zu verwenden oder SVG als Dateiformat mithilfe der Designfunktionen zu aktivieren.

Wie aktiviere ich SVG-Bilder auf einer WordPress-Website?

Bevor wir zum Plugin-Teil kommen, kannst du SVG tatsächlich in WordPress über die Datei functions.php in deinem Theme-Verzeichnis aktivieren. Dies ist definitiv der schnellste Weg, aber auch der unsicherste, da Sie SVG im Rohformat aktivieren.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$neue_Dateitypen = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

$file_types zurückgeben;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Und Ihre andere – sicherere – Option ist die Verwendung von Plugins. Hier sind drei der bekanntesten Plugins zum Aktivieren von SVG in WordPress.

SVG-Unterstützung

Das Hinzufügen von SVG-Unterstützung ist die halbe Miete. Möglicherweise möchten Sie auch benutzerdefinierte Stile und Animationseffekte hinzufügen und Einschränkungen aktivieren. Aber um all dies zu tun, brauchen Sie etwas Unterstützung.

Mit SVG-Unterstützung – Sie können damit beginnen, SVG-Dateien zu Ihren Posts und Seiten hinzuzufügen, indem Sie das herkömmliche Image-Tag verwenden. Beispielsweise können Sie Ihren Bildern eine neue CSS-Klasse hinzufügen: „style-SVG“, die Ihr hochgeladenes SVG-Bild abruft und seinen Inhalt in einer Inline-Anzeige darstellt.

Die Hauptfunktionen dieses Plugins sind:

• Aktivieren Sie die Verwaltung von SVG-Dateien in der WordPress-Medienbibliothek.
• Konvertieren Sie hochgeladene SVG-Bilder in Inline-Code.
• Unterstützt das Bild-Widget zum Hinzufügen von Alt- und Caption-Tags zu allen SVG-Bildern.
• Gestalten Sie einzelne SVG-Bilder mit benutzerdefiniertem CSS.
• Implementieren Sie Animationseffekte mit CSS3 und JavaScript.
• Detaillierte Einstellungsseiten im Dashboard des Plugins.
• Berechtigungsbasierten Zugriff erzwingen. Beschränken Sie zB das Hochladen nur auf Konten mit Administratorrechten.

Ein Wort der Vorsicht, dass trotz dessen, was dieses Plugin bietet, die Risiken der SVG-Ausnutzung ziemlich real sind. Aktivieren Sie die SVG-Dateiverwaltung nicht für Benutzer, denen Sie nicht vertrauen. Idealerweise würden Sie diese Funktion also nur für Benutzer auf der Administratorebene aktivieren.

Um es noch einmal zu wiederholen: Jeder mit Upload-Berechtigungen kann neue SVG-Dateien hochladen, aber da SVG-Dateien auf XML basieren, können sie durch böswillige Injektionen und auf andere Weise ausgenutzt werden.

Sicheres SVG

Safe SVG ist ein Plug-in, mit dem Sie sich keine Gedanken über potenzielle Sicherheitsrisiken machen müssen. Das Plugin wurde speziell entwickelt, um alle neuen SVG-Uploads zu bereinigen und böswillige Absichten zu verhindern. Darüber hinaus fügt Safe SVG die Möglichkeit hinzu, zu sehen, welche Art von SVG-Dateien Sie über Ihre Medienbibliothek hochgeladen haben.

Mit 50.000 aktiven Benutzern können Sie sich darauf verlassen, dass Safe SVG eine herausragende Erfolgsbilanz in Bezug auf sichere Leistung bietet. Bemerkenswert ist, dass es zwei verschiedene Versionen für dieses Plugin gibt; kostenlos und bezahlt.

Die kostenlose Version enthält Funktionen zum Bereinigen neuer Uploads und fügt außerdem Unterstützung für die SVG-Anzeige in der Medienbibliothek hinzu.

Wenn Sie sich für die Pro-Version entscheiden, erhalten Sie zusätzliche Funktionen wie die SVGO-Optimierung. Diese Optimierungstechnik wird die Dateigröße Ihrer SVG-Uploads weiter reduzieren.

Außerdem können Sie mit Pro auswählen, wer neue SVG-Dateien hochladen kann oder nicht. Dadurch können Sie den Zugriff auf bestimmte Benutzer beschränken. Und schließlich erhalten Sie durch den Kauf des Plugins Zugriff auf Premium-Support – erhalten Sie Antworten auf Ihre Fragen, wann immer Sie sie am dringendsten benötigen.

Fügen Sie volle SVG-Unterstützung hinzu

Mit den ersten beiden Plugins, die wir aufgelistet haben, sollten Sie vernünftige Ergebnisse erzielen. Aber wenn dir die Idee gefällt, SVG mithilfe von Shortcodes zu deiner Website hinzuzufügen, dann schau dir dieses Plugin an.

Dieses Plugin fügt Ihrem WordPress einige SVG-Funktionen hinzu und verwendet eine SVG-Technik, die auf einer Idee von Alexey Ten basiert. Diese Art, SVG-Bilder in HTML einzufügen, scheint derzeit die beste Kombination aus Leistung und Kompatibilität zu sein.

Volle SVG-Unterstützung hinzufügen ermöglicht das Hochladen von SVG und das Generieren von Shortcodes. Darüber hinaus können Sie den Stil jedes SVG-Elements mit benutzerdefiniertem CSS anpassen. Zu guter Letzt können Sie für einzelne oder alle von Ihnen hochgeladenen SVGs ein Fallback-Foto angeben.

Was sind einige andere nützliche SVG-Plugins für WordPress?

Abgesehen vom Hinzufügen von SVG-Unterstützung zu einer WordPress-Site, welche anderen Plugins gibt es, die Ihrer Site zugute kommen könnten? Jeder und seine Oma wissen, dass es erhebliche Leistungsvorteile gibt. Sowohl in Bezug auf die Dateigröße als auch auf die Fähigkeit des Browsers, Vektorgrafiken inline zu rendern.

WP-SVG-Symbole

Icons sind ein visuelles Element, und solche Elemente verleihen Designs neues Leben. Interessanterweise ist dieses Plugin aus persönlicher Notwendigkeit heraus entstanden. Der Autor wollte damit beginnen, mehr SVG-Dateien in seine Designs zu implementieren, konnte aber keine Lösung dafür finden. Also nahm er sich Zeit und Mühe und erstellte WP SVG Icons.

Dieses Plugin ist super einfach zu bedienen und Sie können vorhandene Symbole auf Ihrer Website mit nur wenigen Klicks ersetzen. Das Beste daran ist, dass Sie auch für Retina-Displays nicht jedes Bild neu erstellen müssen, solange Sie die maximale Breite festlegen, wird das Symbol automatisch skaliert.

Genau wie im Fall der Autoren ist dieses Plugin hervorragend für alle Arten von Entwicklungs-, Multisite- und Client-Arbeiten geeignet. Ohne Einschränkungen müssen Sie sich keine Gedanken über die Themenkompatibilität oder ähnliches machen.

Es scheint auch eine Premium-Version im Angebot zu geben, die das Hochladen benutzerdefinierter Symbole ermöglicht. Sie sind also nicht auf die integrierten Symbole beschränkt.

SVG-Social-Menü

Dies ist ein Plugin, das als Widget zum Anzeigen von Symbolen für soziale Medien über SVG-Bilder fungiert. Damit dieses Plugin funktioniert, müssen Sie lediglich ein neues WordPress-Menü mit Links zu Ihren Social-Media-Profilen erstellen.

Wählen Sie anschließend den Speicherort des benutzerdefinierten SVG-Social-Menüs aus und speichern Sie das neue Menü. Danach können Sie das SVG Social Menu-Widget entweder in Ihrer Seitenleiste oder in anderen Widget-fähigen Bereichen Ihres Blogs verwenden.

Die aktuell verfügbaren Icons sind für folgende Seiten und Plattformen: plus.google, WordPress, facebook, twitter, dribbble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

SVG-Logo und Texteffekte

SLATE ist ein Plugin, das Shortcode-Unterstützung zum Hinzufügen benutzerdefinierter SVG-Effekte ermöglicht. Sie können dieses Plugin verwenden, um ein starkes Markenimage zu fördern, CTA-Widgets hervorzuheben oder Elemente auf ihre eigene Weise hervorzuheben. Durch die intelligente Nutzung der Shortcode-Unterstützung können Sie Ihre Effekte jederzeit bearbeiten und anpassen.

Sie können beispielsweise verschiedene Farben, Schriftarten und Filter miteinander mischen und zahlreiche Füllmuster verwenden, die sich als aufmerksamkeitsstarke Designeffekte manifestieren. SLATE bietet so viel kreative Freiheit wie eine Vektorbearbeitungssoftware, aber nur ohne dass Sie eine Software verwenden müssen!

Also, was sind einige der wichtigsten Funktionen?

• Text. Generieren Sie Shortcodes, die die Wirkung von aufmerksamkeitsstarken und dennoch SEO-freundlichen Texteffekten replizieren können. Ähnlich wie das, was Sie im Schnappschuss oben sehen.
• Schriftarten. Sie sind sich nicht sicher, wo Sie benutzerdefinierte Schriftarten erhalten? Keine Sorge, da SLATE mit der umfangreichen Bibliothek von Google Fonts vorinstalliert ist.
• Muster füllen. Buchstaben werden mit einem Füllmuster Ihrer Wahl gefüllt. Füllmuster haben Parameter. Steuern Sie verschiedene Größen, Abstände und Farben, um einzigartige Variationen zu erstellen, oder lassen Sie die Standardeinstellungen für sich arbeiten.

Und noch viel mehr! Dieses Plugin ist ein Kraftpaket, um Ihre Texte und Logos mit außergewöhnlicher Präzision zu gestalten. Und durch SVG nicht weniger.

Wo finden Sie SVG-Grafiken?

Was können Sie tun, wenn Sie keine Vorkenntnisse im Bereich Vektorgrafikdesign haben? Glücklicherweise ist es heutzutage einfach und unkompliziert, SVGs zu finden. Sie müssen höchstens auf den ursprünglichen Autor zurückverlinken, der die Grafik erstellt hat. Und viele Plattformen stellen kostenlose Bilder zur Verfügung, ohne dass eine Namensnennung erforderlich ist.

Hier sind einige erstaunliche Websites, die kostenlose SVG-Inhalte anbieten:

• FontAwesome – Font Awesome, die großartigste Font-Icon-Bibliothek der Welt. Das Projekt ist seit einigen Jahren erfolgreich und bietet umfassende Unterstützung nicht nur für Browser, sondern auch für spezifische Frameworks und Designsoftware. Dieses barrierefreie Schriftpaket ist ein absoluter Killer und so einfach zu bedienen! Tatsächlich bin ich mir sicher, dass es ein Dutzend WordPress-Plugins gibt, die Font Awesome unterstützen!
• Vecteezy – Vecteezy ist wohl die größte Vektorgrafik-Plattform der Welt. Angetrieben von benutzerdefinierten Designs, Community-Beiträgen und webbasierten Daten: Vecteezy bietet Vektoren in jeder Art von Kategorie, Form oder Form an. Und es ist auch super einfach, Dateien herunterzuladen. Alles, was Sie tun müssen, ist, auf die Autorenseite zurückzuverlinken, von der Sie die Datei erhalten haben. Dies ist eine Seite, die ich häufig benutze.
• SVG-Hintergründe — Halten Sie sich mit den neuesten Webdesign-Trends auf dem Laufenden? Es gibt so viele kreative Bereiche, in denen Designs jetzt erforscht werden. Und einer dieser Bereiche sind SVG-Hintergründe. Sie haben sie auch gesehen. Wellenmuster, geschwungene Linien und so weiter. Verwenden Sie diese Seite, um leicht zugängliche SVG-Hintergründe zu erstellen!
• SVG Grabber – Diese Chrome-Erweiterung ist ein absoluter Glücksfall, um SVG-Bilder von verschiedenen Webseiten zu erhalten. Klicken Sie einfach auf das Symbol und die Erweiterung kann jede einzelne SVG-Datei auf einer Seite abrufen. Natürlich müssen Sie die Urheberrechtsregeln befolgen, wo immer Sie können, aber insgesamt fühlt sich dies wie eine solide Erweiterung an, die Sie häufig verwenden können.
• Vektor-Logo-Zone – Je nach Nische, in der Sie arbeiten, finden Sie es möglicherweise nützlich, eine Sammlung von vektorbasierten Logos der weltweit führenden Marken zu haben. Sie können diese Dateien auch verwenden, wenn Sie bestimmte Ankündigungen oder Werbeaktionen machen. Und die meisten Bildbearbeitungsprogramme können heutzutage SVG-Dateien in PNGs und sonst sowieso konvertieren.

Und damit berühren wir wirklich die Oberfläche dessen, was da draußen ist. Für mich persönlich hat SVG einen großen Unterschied in der Art und Weise gemacht, wie ich beim Website-Design und sogar bei der Erstellung von Beitragsbildern arbeite. Mit einem SVG können Sie das Farbspektrum, verschiedene Ausrichtungen von Formen usw. wirklich ausreizen.

Sicher, es ist nicht dasselbe wie die Verwendung schöner Fotografien aus dem wirklichen Leben, aber auf jeder Website finden Sie viele Stellen, an denen ein JPG durch eine Vektorgrafik ersetzt werden könnte. Und genau das ist das Ziel dieses Beitrags, Ihnen einen breiten Überblick über die Verwendung von SVG mit WordPress zu geben.

Ob wir dieses Ziel erreicht haben, lassen wir Sie beurteilen. Wenn Sie diesem Beitrag etwas hinzufügen möchten oder zusätzliche Ressourcen teilen möchten, beachten Sie bitte, dass unser Kommentarbereich immer geöffnet ist.