Aktivieren Sie die SVG-Unterstützung in WordPress

WordPress ermöglicht es Benutzern, eine ganze Reihe verschiedener Arten von Bilddateien hochzuladen. Sie werden wahrscheinlich die üblichen Verdächtigen wie PNG und JPG wiedererkennen. Die Anzeige anderer Dateitypen, wie z. B. Vektorgrafiken, kann problematischer sein.

Glücklicherweise gibt es einige Möglichkeiten, Vektordateien in Ihre Website einzubinden. Obwohl es sich nicht um eine native Funktion handelt, können Scalable Vector Graphics (SVG)-Dateien verwendet werden, um zweidimensionale Bilder auf WordPress-Sites anzuzeigen. Mit ein wenig Neukonfiguration können Sie einige Ihrer Logos und andere Grafiken mit diesem Dateityp optimieren.

Hinweis: Wenn Sie mit WP Engine hosten, unterstützen wir nativ die GZIP-Komprimierung für SVG-Dateien.

In diesem Artikel erfahren wir mehr darüber, was SVG-Dateien sind und warum Sie sie vielleicht verwenden möchten. Dann gehen wir zwei Möglichkeiten durch, um ihre Verwendung auf Ihrer Website zu ermöglichen. Wir werden auch einige wichtige Sicherheitsvorkehrungen behandeln, die Sie treffen sollten. Lass uns anfangen!

Was ist ein SVG?

Eine SVG-Datei ist eine Art Vektorbild. Vektordateien sind anders zusammengesetzt als gängigere Bilddateitypen. Beispielsweise besteht ein JPG aus Tausenden von Pixeln. Bei einer SVG-Datei ist das hingegen nicht der Fall.

Vektorgrafiken sind eher wie eine Reihe von schriftlichen Anweisungen. Sie enthalten keine Pixel, die ein größeres Bild bilden. Stattdessen enthalten sie einen schemaähnlichen Datensatz, der ein zweidimensionales Bild erstellt. Dies bedeutet, dass die Verwendung von SVG-Dateien einige einzigartige Vorteile bietet.

Warum SVG verwenden?

SVGs haben eine Reihe von Vorteilen. Da sie hochgradig skalierbar sind, können Sie die Größe nach Bedarf manipulieren, ohne die Bildqualität zu beeinträchtigen. Wie Sie vielleicht nur allzu gut wissen, verschlechtert sich die Qualität sehr schnell auf ein unbrauchbares Niveau, wenn Sie versuchen, ein JPG zu vergrößern.

Hier können SVGs nützlich sein. Obwohl sie nicht für die Anzeige herkömmlicher Fotos gedacht sind, sind sie eine gute Wahl für Firmenlogos, Symbole und andere einfache Grafiken auf Ihrer Website.

Außerdem sind SVG-Dateien in der Regel deutlich kleiner als andere Bildtypen. Das bedeutet, dass Ihre Website nicht durch Grafiken blockiert wird. Darüber hinaus werden SVG-Dateien von Google indiziert, und das schon seit geraumer Zeit. Dies kann ein echter Segen für die Suchmaschinenoptimierung (SEO) Ihrer Website sein.

So laden Sie ein SVG in WordPress hoch

Da WordPress standardmäßig keine Unterstützung für SVGs bietet, müssen Sie etwas härter arbeiten, um sie auf Ihrer Website einzubinden. In den nächsten Abschnitten gehen wir darauf ein, wie Sie SVG-Dateien mit einem Plugin und über einen manuellen Prozess zu Ihrer Website hinzufügen.

Methode 1: Verwenden Sie ein Plugin

Wie bei vielen WordPress-Aufgaben können Plugins die Aktivierung der SVG-Unterstützung vereinfachen. Alles, was Sie tun müssen, ist das richtige Tool auszuwählen und ein paar Einstellungen zu konfigurieren.

Schritt 1: Laden Sie das Plugin herunter

Zuerst müssen Sie ein SVG-Plugin herunterladen und installieren. Wir empfehlen SVG-Unterstützung:

Sobald Sie das Plugin installiert und aktiviert haben, steht Ihnen in Ihrem WordPress-Dashboard unter Einstellungen > SVG-Unterstützung eine neue Menüoption zur Verfügung. Dort erhalten Sie eine Anleitung zum Stylen von SVG-Dateien für Ihre Website:

Darüber hinaus können Sie einige wichtige Verwaltungseinstellungen konfigurieren. Dies beinhaltet die Einschränkung der Berechtigungen zum Hochladen von SVG nur auf Administratoren:

Danach können Sie SVG-Dateien direkt in Ihre Medienbibliothek hochladen. Es gibt jedoch noch ein paar andere wichtige Dinge, um die Sie sich zuerst kümmern müssen.

Schritt 2: Aktivieren Sie die GZip-Unterstützung von SVG-Dateien auf Ihrem Server

Wie Sie diesen Schritt angehen, hängt von Ihrem Webhost und der Serverkonfiguration ab. Hier bei WP Engine ist GZip beispielsweise bereits für eine bestimmte Liste von Dateitypen aktiviert. Davon abgesehen gehört „image/svg+xml“ nicht dazu.

Das Hinzufügen dieses Typs zur Liste für Ihre Website stellt sicher, dass Ihre SVG-Dateien angemessen und schnell optimiert werden. Sie müssen diesen Dateityp in Ihre .htaccess- Datei aufnehmen, damit alles reibungslos funktioniert.

Schritt 3: Stellen Sie sicher, dass das Plugin Dateien korrekt sichert

Einer der Nachteile bei der Verwendung von SVG-Dateien und der Hauptgrund, warum dieser Dateityp noch nicht in den WordPress-Kern integriert wurde, sind Sicherheitsprobleme. Da SVG-Dateien XML-basiert sind, sind sie neben anderen Risiken anfällig für Angriffe externer Entitäten.

Wenn Sie Ihr SVG-Plug-in konfigurieren, wird empfohlen, den SVG-Upload-Zugriff nur auf Administratoren zu beschränken. Ein noch sichererer Ansatz besteht jedoch darin, Ihre SVG-Dateien zu „bereinigen“, bevor Sie sie hochladen. Dadurch wird unnötiger XML-Code eliminiert, der Ihre Website für Angriffe anfällig machen könnte.

Das SVG-Support-Plugin enthält keine automatische Bereinigung, aber es gibt andere Plugins, die dies tun. Sicheres SVG ist eines davon:

Alternativ können Sie auch Ihr eigenes Desinfektionsmittel installieren und dieses eigenständig verwenden. Der Ersteller von Safe SVG hat den Desinfektionscode des Plugins auf GitHub zur Verfügung gestellt, damit jeder ihn verwenden kann.

Ein eigenes Desinfektionsmittel ist auch eine gute Option, wenn Sie die nächste Methode zum Aktivieren von SVGs auf Ihrer WordPress-Website verwenden möchten.

Methode 2: Manuelles Hochladen von SVG-Dateien aktivieren

Wenn Sie es vorziehen, sich die Hände schmutzig zu machen, anstatt ein Plugin zu verwenden, können Sie Ihre WordPress-Site manuell aktivieren, um SVG-Dateien zu akzeptieren. Als nächstes werfen wir einen Blick darauf, wie dieser Prozess funktioniert.

Schritt 1: Bearbeiten Sie die Functions.php-Datei Ihrer Website

Um zu beginnen, müssen Sie die Datei functions.php Ihrer Website bearbeiten. Gehen Sie dazu in Ihrem Dashboard zu Darstellung > Themen bearbeiten und wählen Sie die Datei functions.php aus:

Alternativ können Sie mit einer FTP-Anwendung (File Transfer Protocol) wie FileZilla auf die Dateien Ihrer Website zugreifen.

In jedem Fall ist es am besten, ein untergeordnetes Thema zu erstellen oder zu einer Entwicklungsumgebung zu wechseln, bevor Sie größere Arbeiten an Ihrer Website durchführen. Dadurch wird Ihre Live-Website vor Schäden geschützt, während Sie Änderungen vornehmen.

Schritt 2: Fügen Sie ein Code-Snippet hinzu

Als Nächstes müssen Sie das folgende Code-Snippet zu Ihrer Datei functions.php hinzufügen:

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

global $wp_version;
if ( $wp_version !== '4.7.1' ) {
return $data;
}

$filetype = wp_check_filetype( $filename, $mimes );

return [
'ext' => $filetype['ext'],
'type' => $filetype['type'],
'proper_filename' => $data['proper_filename']
];

}, 10, 4 );

function cc_mime_types( $mimes ){
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );

function fix_svg() {
echo '<style type="text/css">
.attachment-266x266, .thumbnail img {
width: 100% !important;
height: auto !important;
}
</style>';
}
add_action( 'admin_head', 'fix_svg' );

Danach können Sie SVG-Bilder in Ihre Medienbibliothek hochladen. Dort können Sie sie genau wie andere Bilddateitypen anzeigen und mit ihnen interagieren.

Schritt 3: Sichern Sie den Zugriff und beschränken Sie die SVG-Upload-Berechtigungen

Wie bereits erwähnt, birgt die Aktivierung von SVG-Dateien gewisse Risiken. Um Ihre Website sicher zu halten, können Sie Upload-Berechtigungen für SVGs festlegen, indem Sie benutzerdefinierte Benutzerrollen erstellen. Sie können ein Plugin wie den User Role Editor oder den WPFront User Role Editor verwenden, um dies zu erreichen.

Mit diesen Plugins können Sie die Zugriffs- und Berechtigungsebenen für Ihre vorhandenen Benutzerrollen anpassen. Mit anderen Worten, Sie können festlegen, welche Benutzer die Berechtigung zum Hochladen von SVGs haben. Dies hilft Ihnen, die Sicherheit dieser Dateien im Auge zu behalten.

Bleiben Sie sicher mit WP Engine

WordPress ermöglicht nativ die Verwendung von SVG-Dateien nicht. Das ist bedauerlich, da diese Dateien in der Regel die beste Option zum Anzeigen von Logos und anderen Grafiken sind. Die gute Nachricht ist, dass Sie mithilfe einiger unserer bevorzugten Entwicklerressourcen die Verwendung von SVG-Dateien auf Ihrer Website aktivieren und sichern können.

Denken Sie außerdem daran, dass Sie bei unseren WordPress-Hosting-Plänen Zugang zu professionellem Support und gut entwickelten Website-Sicherheitslösungen erhalten. Sichern Sie sich noch heute Ihre Website bei uns!