SVG-Unterstützung in WordPress aktivieren

Anleitung: SVG-Unterstützung in WordPress aktivieren

SVG-Dateien sind für Webentwickler ein Muss. Sie ermöglichen scharfe Grafiken unabhängig von der Auflösung und sind oft wesentlich kleiner als andere Bilddateiformate wie PNG oder JPG. Trotz ihrer vielen Vorteile unterstützt WordPress SVG-Uploads nicht standardmäßig.

In dieser Anleitung zeigen wir dir Schritt für Schritt, wie du SVG-Dateien sicher in WordPress einbinden kannst.

1. Was sind SVG-Dateien und warum sind sie wichtig?

SVG steht für „Scalable Vector Graphics“ und ist ein XML-basiertes Vektorbildformat. Der Hauptvorteil von SVG-Dateien liegt in ihrer Skalierbarkeit: Sie bleiben scharf und detailgetreu, egal wie stark man sie vergrößert. Das macht sie ideal für Logos, Icons und andere Grafiken auf Websites. Zudem sind sie oft viel kleiner als herkömmliche Bildformate, was die Ladezeit deiner Website positiv beeinflusst.

Vorteile von SVG-Dateien:

• Unbegrenzte Skalierbarkeit ohne Qualitätsverlust
• Geringe Dateigröße
• Ideal für Logos, Icons und andere Grafiken
• Nahezu alle modernen Browser unterstützen SVGs

2. Warum unterstützt WordPress SVG-Dateien nicht standardmäßig?

Die Nicht-Unterstützung von SVGs durch WordPress hat vor allem mit Sicherheitsbedenken zu tun. Da SVG-Dateien auf XML basieren, können sie potenziell gefährlichen Code (z. B. JavaScript) enthalten. Um die Sicherheit der Websites zu gewährleisten, ist der Upload von SVG-Dateien standardmäßig blockiert.

3. Sicherheitsbedenken bei SVG-Dateien

Beim Umgang mit SVG-Dateien ist Vorsicht geboten. Unkontrollierte SVG-Uploads können deine Website für verschiedene Angriffe anfällig machen. Daher solltest du sicherstellen, dass du SVG-Dateien nur von vertrauenswürdigen Quellen verwendest und die richtigen Sicherheitsmaßnahmen implementierst.

Sicherheits-Tipps:

• Nur SVG-Dateien von vertrauenswürdigen Quellen verwenden
• Upload-Berechtigungen einschränken (z. B. nur für Administratoren)
• SVG-Dateien vor dem Hochladen bereinigen

4. SVG-Upload mit WPCode (Empfohlen)

Es gibt verschiedene Möglichkeiten, den SVG-Upload in WordPress zu ermöglichen. Im Folgenden gehen wir auf gängige Methoden ein.

Der einfachste und sicherste Weg, SVG-Dateien in WordPress zu aktivieren, ist die Verwendung des Plugins WPCode. WPCode bietet eine große Bibliothek vorgefertigter Codeschnipsel, einschließlich eines Snippets, das SVG-Uploads in WordPress erlaubt.

Schritt-für-Schritt-Anleitung:

1. Installiere und aktiviere das kostenlose WPCode Plugin.
2. Navigiere zu „Code Snippets > Snippet hinzufügen“ im Adminpanel.
3. Suche nach „svg“ und wähle „Allow SVG Files Upload“ aus.
4. Klicke auf „Snippet verwenden“ und aktiviere das Snippet.
5. Standardmäßig ist das Snippet nur für Administratoren freigegeben. Um es für andere Benutzerrollen freizuschalten, ändere die Codezeilen 14-16 entsprechend.
6. Speichere die Einstellungen.

Das ist der passende Code:

/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
	'upload_mimes',
	function ( $upload_mimes ) {
		// By default, only administrator users are allowed to add SVGs.
		// To enable more user types edit or comment the lines below but beware of
		// the security risks if you allow any user to upload SVG files.
		if ( ! current_user_can( 'administrator' ) ) {
			return $upload_mimes;
		}

		$upload_mimes['svg']  = 'image/svg+xml';
		$upload_mimes['svgz'] = 'image/svg+xml';

		return $upload_mimes;
	}
);

/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
	'wp_check_filetype_and_ext',
	function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {

		if ( ! $wp_check_filetype_and_ext['type'] ) {

			$check_filetype  = wp_check_filetype( $filename, $mimes );
			$ext             = $check_filetype['ext'];
			$type            = $check_filetype['type'];
			$proper_filename = $filename;

			if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
				$ext  = false;
				$type = false;
			}

			$wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
		}

		return $wp_check_filetype_and_ext;

	},
	10,
	5
);

Vorteile dieser Methode:

• Einfache und sichere Einrichtung
• Beschränkt den Upload auf bestimmte Benutzerrollen
• Kein direkter Codezugriff erforderlich

Diese empfohlene Methode macht es am leichtesten, SVG Dateien in WordPress benutzen zu können.