Das Hinzufügen von SVG-Dateien zu Ihrer WordPress Website kann Ihre Bilder scharf und klar aussehen lassen.
Mit WordPress können Sie zwar viele Dateitypen wie Bilder, Audio und Videos hochladen, aber SVG-Dateien werden nicht direkt von der Box unterstützt.
Das liegt daran, dass SVG-Dateien Sicherheitsrisiken bergen können. Aber keine Sorge. Es gibt sichere Wege, SVGs zu verwenden.
In diesem Artikel zeigen wir Ihnen, wie Sie SVG-Bilddateien einfach und sicher zu WordPress hinzufügen können.
Was ist SVG?
SVG (Scalable Vector Graphics) ist ein Dateiformat, das Vektorgrafiken mit Hilfe der Auszeichnungssprache XML definiert. Sein Hauptvorteil besteht darin, dass man Bilder vergrößern kann, ohne dass sie an Qualität verlieren oder verpixelt werden.
Wie funktioniert SVG?
Scalable Vector Graphics (SVG) ist eine Technologie, die zweidimensionale Zeichnungen mit Hilfe von XML darstellt. Sie unterscheidet sich von den allgemein verwendeten Bildformaten wie PNG, GIF oder JPG.
Wenn Sie eine PNG- oder JPG-Bilddatei nehmen und heranzoomen, werden Sie feststellen, dass das Bild verschwimmt und pixelig wird.
Vektorgrafiken verwenden keine Pixel.
Stattdessen verwenden sie eine 2-dimensionale Karte, die die angezeigte Grafik als Koordinaten definiert. Das Bild verpixelt nicht, wenn Sie hineinzoomen, weil es das einfach nicht kann.
So können Sie Vektorgrafiken ohne Qualitätsverlust vergrößern. Am wichtigsten ist, dass SVG-Bilder eine viel geringere Dateigröße haben als PNG- oder JPG-Dateien, was sie zu einer guten Wahl für die Bildformatierung macht.
Vektorgrafiken werden häufig für Icons, Icon-Schriften, Website-Logos und Branding-Bilder verwendet. Vielleicht möchten Sie SVG-Dateien für Ihr Firmenlogo, Icons oder andere Grafiken zu WordPress hinzufügen.
SVG-Dateien können jedoch ein wenig unsicher sein. Aus diesem Grund unterstützt WordPress standardmäßig keine Uploads von SVG-Dateien.
Wenn Sie ein SVG-Bild in WordPress hochladen, erhalten Sie die folgende Fehlermeldung: ‚Sorry, dieser Dateityp ist aus Sicherheitsgründen nicht erlaubt.‘
Sicherheitsprobleme im Zusammenhang mit SVG in WordPress
SVG-Dateien enthalten Code in der Auszeichnungssprache XML, die ähnlich wie HTML ist. Ihr Browser oder Ihre SVG-Bearbeitungssoftware parst die XML-Auszeichnungssprache, um die Ausgabe auf der Ansicht anzuzeigen.
Dies öffnet Ihre Website jedoch für mögliche XML-Schwachstellen. Es kann dazu verwendet werden, unbefugten Zugriff auf Benutzerdaten zu erlangen oder Brute-Force-Angriffe oder Cross-Site-Scripting-Angriffe auszulösen.
Die Methoden, die wir in diesem Artikel vorstellen, versuchen, SVG-Dateien zu bereinigen, um ihre Sicherheit zu verbessern. Allerdings können diese Plugins nicht vollständig verhindern, dass bösartiger Code hochgeladen oder eingeschleust wird.
Die beste Lösung ist, nur SVG-Dateien zu verwenden, die von zuverlässigen Quellen erstellt wurden, und SVG Uploads auf vertrauenswürdige Benutzer zu beschränken. Um mehr über Sicherheit zu erfahren, können Sie unseren vollständigen WordPress-Sicherheitsleitfaden für Anfänger lesen.
In diesem Sinne zeigen wir Ihnen, wie Sie SVG-Dateien in WordPress einfach und sicher verwenden können, und zwar mit 3 Methoden. Verwenden Sie einfach die Links unten, wenn Sie an einer bestimmten Methode interessiert sind:
Expertentipp: Bevor Sie sich für die Verwendung von SVG-Bilddateien entscheiden, sollten Sie nicht vergessen, dass Sie auch Werkzeuge zur Bildbearbeitung verwenden können, um die Dateigrößen zu komprimieren und die Geschwindigkeit und Leistung von WordPress zu steigern.
Sind Sie bereit? Beginnen wir mit einem Video-Tutorial.
Video-Anleitung
Wenn Sie eine schriftliche Anleitung bevorzugen, lesen Sie einfach weiter.
Methode 1. SVG-Dateien in WordPress mit WPCode zulassen (empfohlen)
Der einfachste Weg, SVG Uploads in WordPress sicher zu ermöglichen, ist die Verwendung von WPCode, dem leistungsstärksten Plugin für Codeschnipsel auf dem Markt.
WPCode verfügt über eine große Bibliothek mit vorkonfigurierten Codeschnipseln, die viele Plugins für den einmaligen Gebrauch auf Ihrer Website ersetzen können. Es enthält die Snippets zum Deaktivieren von Seiten mit Anhängen, zum Beibehalten des klassischen Editors für Beiträge und zum Zulassen von Uploads von SVG-Dateien – alles ohne das Risiko, dass Ihre Website kaputt geht.
Um loszulegen, müssen Sie das kostenlose WPCode Plugin installieren und aktivieren. Eine detaillierte Anleitung finden Sie in unserer Schritt-für-Schritt-Anleitung zur Installation eines WordPress Plugins.
Nach der Aktivierung müssen Sie in Ihrem WordPress Adminpanel zu Code Snippets “ Snippet hinzufügen navigieren. Suchen Sie einfach nach „svg“ und fahren Sie mit dem Mauszeigerkontakt über „Allow SVG Files Upload“.
Klicken Sie auf „Snippet verwenden“, wenn es erscheint.
Als Nächstes landen Sie auf der Seite „Snippet bearbeiten“, auf der WPCode bereits alle Einstellungen konfiguriert hat, die der Code zur Ausführung benötigt.
Sie müssen nur auf den Schalter „Aktiv“ klicken und dann auf die Schaltfläche „Aktualisieren“.
Jetzt können Sie SVG-Dateien hochladen, ohne dass WordPress Ihnen einen Fehler oder eine Warnmeldung anzeigt.
Sie können es dann wie jedes andere Bild auf Ihrer WordPress-Website behandeln.
Standardmäßig erlaubt das WPCode-Snippet nur Benutzern mit der Rolle „Administrator“, SVGs zu WordPress hinzuzufügen.
Sie können auch allen anderen Rollen des Benutzers die Berechtigung erteilen, indem Sie die Zeilen 14-16 des Codeschnipsels löschen. Dann können Sie sie „auskommentieren“, indem Sie zwei Schrägstriche, „//“, an den Anfang der Zeilen 11-13 anfügen, wodurch sie eine hellbraune Farbe erhalten.
WPCode führt keinen Teil des Snippets aus, den es als Kommentar und nicht als Code erkennt. Sie können dieses Beispiel im folgenden Bild sehen.
In jedem Fall können alle Benutzer nach dem Entfernen des Codes SVG-Dateien auf Ihre Website hochladen. Klicken Sie einfach auf „Aktualisieren“, um die Änderungen zu speichern, die Sie vorgenommen haben.
Methode 2. Hochladen von SVG-Dateien in WordPress mit SVG-Unterstützung
Diese zweite Methode verwendet das SVG Support Plugin. Damit können Sie SVGs in WordPress-Beiträgen und -Seiten anzeigen und kontrollieren, wer sie hochladen darf.
Zunächst müssen Sie das SVG Support Plugin installieren und aktivieren. Weitere Details finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins.
Nach der Aktivierung gehen Sie zu Einstellungen “ SVG-Unterstützung, um die Plugin-Einstellungen zu konfigurieren.
Aktivieren Sie auf der Seite mit den Einstellungen einfach die Box neben der Option „Auf Administratoren beschränken?“. Dadurch kann nur ein Administrator der Website SVG-Dateien in WordPress hochladen.
Der nächste Schritt besteht darin, den erweiterten Modus zu aktivieren. Sie müssen diese Option nur aktivieren, wenn Sie erweiterte Funktionen wie CSS-Animationen und Inline-SVG-Rendering nutzen möchten.
Vergessen Sie nicht, auf die Schaltfläche „Änderungen speichern“ zu klicken, um Ihre Einstellungen zu speichern.
Sie können nun einen neuen Beitrag erstellen oder einen bestehenden Beitrag bearbeiten. Im Editor für Beiträge können Sie Ihre SVG-Datei hochladen, wie Sie es mit jeder anderen Bilddatei tun würden.
Fügen Sie einfach einen Bildblock in den Editor ein und laden Sie dann die SVG-Datei hoch.
Methode 3. Hochladen von SVG-Dateien in WordPress mit Safe SVG
Diese Methode verwendet ebenfalls ein Plugin und ermöglicht es Ihnen, SVG-Dateien, die in WordPress hochgeladen werden, zu bereinigen.
Als erstes müssen Sie das Safe SVG Plugin installieren und aktivieren. Weitere Einzelheiten finden Sie in unserer Schritt-für-Schritt-Anleitung für die Installation eines WordPress Plugins.
Das Plugin ist sofort einsatzbereit und es gibt keine Einstellungen, die Sie konfigurieren müssen. Sie können einfach loslegen und mit dem Hochladen von SVG-Dateien beginnen.
Der Nachteil ist, dass dieses Plugin SVG Uploads von allen Benutzern zulässt, die Beiträge auf Ihrer WordPress Website veröffentlichen können. Um zu kontrollieren, wer Dateien hochladen kann, müssen Sie die Premium-Version des Plugins erwerben.
Wir hoffen, dass dieser Artikel Ihnen geholfen hat zu lernen, wie man SVG-Dateien sicher in WordPress einfügt. Vielleicht interessieren Sie sich auch für unsere Anleitung zum Hinzufügen eines Widgets in den Header Ihrer Website und unsere Expertenauswahl an nützlichen Codeschnipseln für Anfänger.
Wenn Ihnen dieser Artikel gefallen hat, dann abonnieren Sie bitte unseren YouTube-Kanal für WordPress-Videotutorials. Sie können uns auch auf Twitter und Facebook finden.
Eugene Velasquez
I have added all the SVG plugins but still am being blocked from adding SVGs, which I have created on my own so there is no risk or malicious code. Is there another way to add the SVG files to wordpress?
WPBeginner Support
If even the plugins do not allow you to add SVGs to your site, we would recommend reaching out to your hosting provider to ensure they do not have a security setting that may be overriding your WordPress.
Admin
Felix Krusch
Since the inception of Blocks you can just add SVG code in a „Custom HTML Block“. No snippet plugin necessary anymore.
WPBeginner Support
If the image is hosted elsewhere that would work but to upload we would recommend using the snippet at this time. You would also not want to add the PHP code using the HTML snippet if that is what you mean
Admin
sn
Hi,
Thanks for your articles.
Usually I refer to you website and I learn many things from it.
Here you wrote using svg files in websites is not safe.
My question is that if I create the svg file myself from adobe illustrator or similar software,
is it again unsafe to put it in my website?
and should I use safe svg plugin?
Thanks!
WPBeginner Support
If you are the person who created the SVG and there are no other users uploading files to your site, you are fine to not use the safe SVG plugin.
Admin
sn
Do you mean there will be no vulnerabilities in such case?
WPBeginner Support
The vulnerabilities to worry about would be if you add an SVG from an unknown source that could have added malicious code.
sn
Thank you very much for your answer.
mr waghela
thank you sir for share best info
WPBeginner Support
Glad our guide was helpful
Admin
Alan Smith
Thanks a lot
WPBeginner Support
You’re welcome
Admin
Amandine
Hi, I have successfully uploaded the SVG plugin and can upload my SVG file but at the point of cropping the logo, I cannot crop it and therefore it does not appear on my website. It appears nice and crisp on the side customising panel on the left but not on the website. Whereas if I upload a PNG file, the cropping works and it appears on the customising panel as well as the website. Please could you let me know if there’s anything I need to do for my SVG logo to appear on the website? Thank you
WPBeginner Support
You would need to edit your SVG using something other than your WordPress site to crop it to the size you’re wanting
Admin
pushkraj
I want to upload a svgz (svg compressed) but I get an error of security reasons. Although I can upload SVG. format without any problem but I need svgz in order to reduce the file size. Please help me with my query.
Thank you.
WPBeginner Support
To allow that file type, you would want to take a look at our guide here: https://www.wpbeginner.com/wp-tutorials/how-to-add-additional-file-types-to-be-uploaded-in-wordpress/
Admin
Brian
Hello WPBeginner,
I added the plugin Safe SVG to my website but it seems my SVG files get broken uploaded. I cannot use them. How is this possible?
WPBeginner Support
You would want to reach out to the plugin’s support and let them know about the issue and they should be able to assist
Admin
Huu Tai
Thank for a fully covered info,
I wonder if I could use SVG Support to upload the web logo?
WPBeginner Support
So long as your theme does not specifically override this, you should be able to.
Admin
Scott
I understand the complexity of converting pixel images to mathematical.
Has there come along a fairly simple or automated method or program to convert jpegs and .png images to SVG?
Editorial Staff
Hey Scott,
Not that we are aware of yet.
Admin
Cactoos
As far as I tried, inkscape can do exactly that. It’s free and it works in windows, Mac, and Linux.
Gimp, illustrator, and I’m not that sure, but maybe krita can do this also.
Gimp and krita are also free and multi OS.
Indeed I converted a pretty heavy and high quality photo to svg (previous jpg image direct from the photo camera) and it worked flawlessly, it took his time, but it works. It might be because I’m in a pretty weak system.
Salman Ravoof
Almost all vector editing software have that functionality. Both Inkscape and Illustrator can do it. However, the results won’t be as good if you have complex shapes and a lot of colours (all real life images come under this) . This functionality is best used for images which have less than 4 colours, the lesser the better.