So laden Sie SVGs in WordPress hoch: 2 Methoden

Möchten Sie lernen, wie man SVGs in WordPress hochlädt? Wir werden in diesem Tutorial die Methoden vorstellen, um dies zu erreichen..

Webadministratoren und Webdesigner müssen bei ihrer Arbeit unterschiedliche Mediendateiformate verwenden. Eines der beliebtesten Formate ist heute SVG, ein XML-basiertes Vektorformat. Leider unterstützen nicht alle Browser und Plattformen SVG, daher müssen Sie die SVG-Unterstützung zuerst manuell aktivieren.

Dieser Artikel behandelt die Schritte zum Hochladen von SVG-Dateien auf eine WordPress-Website mit dem SVG-Support-Plugin. Wir beantworten auch einige Fragen zu den Sicherheitsproblemen im Zusammenhang mit diesem bestimmten Mediendateiformat und warum es sich lohnt, SVG zu verwenden.

Machen wir uns zunächst mit SVG und seiner Funktionsweise vertraut.

Aber bevor wir anfangen, wenn Sie WordPress noch nie installiert haben, finden Sie es heraus Wie man ein Wordpress-Blog 7 Schritte für die Installation et Wie finden, zu installieren und ein Wordpress-Theme auf Ihrem Blog aktivieren 

Dann zurück zu warum wir hier sind.

Was ist SVG?

Scalable Vector Graphics (SVG) ist ein textbasiertes XML-Bildformat für Vektorgrafiken. Obwohl gängige Bildformate wie JPG und PNG aus unzähligen winzigen Quadraten bestehen, die als Pixel bezeichnet werden, stützt sich dieses Format auf die XML-Auszeichnungssprache, um Bildattribute zu beschreiben.

Im Januar 2022, 42 % aller Websites weltweit SVG verwenden. Dieser Prozentsatz ist seit Januar 2021 gestiegen, damals aber erst 29,4 % der Websites habe es benutzt. Ähnlich wie PNG- und JPG-Formate ist SVG bei stark frequentierten Websites wie Google, Wikipedia und YouTube beliebt.

Eine weitere großartige Sache an SVG ist, dass es von allen gängigen Browsern weitgehend unterstützt wird.

Hier ist die Liste der Browser die das SVG-Dateiformat unterstützen:

Navigator	Teilunterstützung	Volle Unterstützung
Restaurant	-	Ausgabe 12-18, 79-96, 97
Feuerfuchs	Version 2	Versionen 3-94, 95, 96-97
Firefox für Android	-	Version 95
Chrome	-	Versionen 4-96, 97, 98-100
Chrome für Android	-	Version 96
Safari	Version 3.1	Version 3.2-15.1, 15.2, TP
Oper	-	Versionen 10-81, 82
Mini-Oper	-	Alle Versionen
Opera mobile	-	Version 12-12.1, 64
Safari auf iOS	-	Version 3.2-15.1, 15.2
Android Browser	Version 3-4.3	Version 4.4-4.4.4, 96
UC-Browser für Android	-	Version 12.12
Samsung Internet	-	Version 4-14.0, 15.0
QQ Browser	-	Version 10.4
Baidu-Browser	-	Version 7.12
KaiOS-Browser	-	Version 2.5

Wie funktioniert SVG?

SVGs verwenden XML, um zweidimensionale Vektorbilder zu erzeugen. Im Gegensatz zu JPG und PNG haben Vektorgrafiken keine Pixel. Stattdessen wird ihr Verhalten in XML-Textdateien beschrieben.

Aus diesem Grund können SVGs wie Code durchsucht, indiziert, geskriptet, modifiziert und komprimiert werden. Daher kann jeder sie mit einem Texteditor oder einer Vektorgrafik-Software erstellen.

Unterstützt WordPress SVG?

Aufgrund der damit verbundenen Sicherheitsrisiken gibt es in WordPress standardmäßig keine SVG-Unterstützung – wir werden später ausführlicher auf Sicherheitsprobleme im Zusammenhang mit SVG eingehen.

Hier ist eine Fehlermeldung, die beim Hochladen einer SVG-Grafik auf eine WordPress-Website erscheint:

Es gibt eine aktuelle Diskussion darüber, SVG zu einem Teil der WordPress-Kernfunktionalität zu machen. Bis dahin müssen wir kreativ werden und andere Lösungen verwenden, um SVG-Bilder in WordPress hochzuladen.

Warum WordPress SVG verwenden?

Trotz seiner Sicherheitsprobleme verwenden viele Benutzer dieses Bildformat immer noch, da es verschiedene Vorteile hat. Hier sind einige der Vorteile der Verwendung von SVG-Dateien:

• Skalierbarkeit: Da SVG ein Vektorbildformat ist, behalten SVG-Dateien bei allen Bildschirmauflösungen die gleiche Qualität bei. Dieser Vorteil ist auch nach dem Vergrößern vorhanden, weshalb viele Menschen dieses skalierbare Bildformat für Icons und Logos verwenden.
• Kleinere Dateigröße : SVG-Dateien erleichtern die Verbesserung der Website-Leistung, da sie weniger Webspeicherplatz beanspruchen und viel schneller geladen werden als andere Bilder.
• SEO Friendly : Google indiziert SVG-Dateien, sodass sie in der Google-Bildersuche angezeigt werden und Ihre Suchbemühungen verbessert werden. SEO. Bei anderen Bildtypen sind Sie auf die Optimierung ihrer Alt-Attribute beschränkt.
• Codebasierte SVGs können mit einem Texteditor oder einer Software zur Bearbeitung von Vektorgrafiken bearbeitet werden. Sie können SVG-Dateien für Websites optimieren oder sogar Animationen hinzufügen, um Grafiken interaktiv zu gestalten.

SVG auf WordPress und Sicherheit

Da SVG im Wesentlichen eine XML-Textdatei ist, weist sie ausnutzbare Schwachstellen auf, die andere Bildformate nicht betreffen. Daher können Benutzer es leicht mit bösartigem Code kapern, um Cross-Site Scripting (XSS)- und XML External Entity (XXE)-Angriffe auf Ihr System zu starten.

Aus diesem Grund solltest du vorsichtig sein, wenn du mit SVG-Dateien umgehst und sie zu WordPress hinzufügst.

Um Sicherheitsrisiken zu minimieren, sollten Sie SVG-Dateien bereinigen, bevor Sie sie in die WordPress-Medienbibliothek hochladen. Dieser Prozess entfernt verdächtigen Code und Fehler und macht die Bilder sicher für Ihre Website.

Sie können hochgeladene SVG-Dateien mit einem SVG-Plugin bereinigen – wir werden die Schritte später behandeln. Wir empfehlen jedoch, es zweimal mit dem zu desinfizieren SVG-Desinfektionstest -

Eine weitere Möglichkeit, Ihre WordPress-Website zu sichern, besteht darin, SVG-Uploads nur auf vertrauenswürdige Benutzer zu beschränken. Ausgewählte Benutzer sollten sich der Sicherheitsprobleme im Zusammenhang mit dem SVG-Format bewusst sein – dies wird sie davon abhalten, SVG-Dateien aus zweifelhaften Quellen zu beziehen.

So laden Sie SVG-Dateien mit 2 sicheren Methoden in WordPress hoch

Technisch gesehen gibt es zwei Möglichkeiten, SVG-Unterstützung zu WordPress hinzuzufügen: mit a WordPress Plugin oder durch manuelle Aktivierung. Wofür Sie sich auch entscheiden, wir empfehlen Ihnen dringend, Download-Privilegien auf Administratoren und vertrauenswürdige Benutzer zu beschränken, um böswillige Downloads zu minimieren.

Verwenden Sie ein WordPress-Plugin

In diesem Tutorial werden wir verwenden SVG-Unterstützungdaherkommt. Dieser WordPress Plugin verwendet eine SVG-Bereinigungsbibliothek, die automatisch aktiviert wird, wenn SVG-Dateien in die Medienbibliothek hochgeladen werden. Es ist auch einfach einzurichten und kostenlos zu verwenden.

Hier sind die Schritte zum Konfigurieren der SVG-Unterstützung:

1. IInstallieren Sie das Plugin und aktivieren Sie es.

2. Zugang zu Einstellungen -> Support SVG aus Ihrem WordPress-Dashboard.

3. Aktivieren Sie das Kontrollkästchen neben der Option Auf Administratoren beschränken um Upload-Privilegien einzuschränken. Machen Sie dasselbe für die Option Erweiterten Modus aktivieren wenn Sie auf erweiterte Funktionen wie Inline-SVG-Rendering und CSS-Styling zugreifen möchten.

4. Nachdem Sie die Änderungen gespeichert haben, können Sie bedenkenlos mit dem Hochladen von SVG-Dateien in die Medienbibliothek beginnen.

Fügen Sie WordPress SVG-Unterstützung manuell hinzu

Diese Methode beinhaltet das Bearbeiten von Dateien functions.php Ihrer WordPress-Website. Daher empfehlen wir Ihnen dringend, diese Schritte auszuführen, wenn Sie mit PHP vertraut sind und das SVG-Sicherheitsproblem vollständig verstehen.

Stellen Sie sicher, dass Sichern Sie Ihre WordPress-Website bevor Sie Änderungen vornehmen, um Datenverluste im Falle einer Fehlkonfiguration zu vermeiden.

Die folgenden Schritte erklären, wie man SVG in WordPress manuell mit Hilfe eines FTP-Clients wie z FileZilla.

1. Wechseln Sie in das Dateiverzeichnis Ihrer Website auf Ihrem Host
2. Zugang zu public_html -> wp-includes. Scrollen Sie nach unten, bis Sie Funktionen.php finden.

3. Klicken Sie mit der rechten Maustaste auf diese Datei und wählen Sie Anzeigen/Bearbeiten aus, um sie zu öffnen, und fügen Sie das folgende Code-Snippet ein:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Speichern Sie die Änderungen und versuchen Sie, eine neue SVG-Datei hochzuladen. Wenn der Vorgang erfolgreich ist, sollte Ihre Mediathek den Dateiupload akzeptieren.

Die vielen Vorteile von SVG-Dateien tragen zur wachsenden Popularität dieses Dateityps bei. Leider sind XML-Textdateien anfällig für Code-Injection, was der Hauptgrund dafür ist, dass WordPress standardmäßig keine SVG-Unterstützung enthält.

Allerdings gibt es zwei Möglichkeiten, Ihre WordPress-Website dazu zu bringen, SVG-Dateien zu akzeptieren: mit a WordPress Plugin oder bearbeiten Sie die Datei functions.php. Zusätzlich zur Einschränkung der Upload-Privilegien können Sie SVG-Dateien sicher in die Medienbibliothek der Website hochladen.

Andere empfohlene Ressourcen

Wir laden Sie auch ein, die zu konsultieren Ressourcen unten, um mehr Eigenverantwortung und Kontrolle über Ihre Website und Ihren Blog zu übernehmen.

• So erstellen Sie ein einfaches WordPress-Plugin
• So erstellen Sie ein einfaches Gutenberg-Block-WordPress-Plugin
• So richten Sie Ihre Homepage in WordPress ein
• So verstehen Sie das WordPress-Dashboard
• So erstellen Sie ein einfaches WordPress-Plugin

Zusammenfassung

Das war es für diese Anleitung, die Ihnen zeigt, wie Sie SVGs in WordPress hochladen. Wir hoffen, dass dieser Artikel Ihnen einen Einblick in die Vorteile und Risiken des Hochladens von SVG-Dateien auf eine WordPress-Website gegeben hat. Wenn Sie Bedenken oder Vorschläge haben, teilen Sie uns dies bitte innerhalb mit commentaires.

Sie können jedoch auch unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

In der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.   

...