SVG Upload in WordPress sicher aktivieren – So geht’s!

Lesezeit: ca. 2 Minuten

WordPress SVG Upload aktivieren – Sicher und einfach erklärt

Das Hochladen von SVG-Dateien ist in WordPress standardmäßig deaktiviert, da SVGs Schadcode enthalten können. Doch mit einer sicheren Anpassung kannst du das SVG-Format freischalten und gleichzeitig potenzielle Sicherheitsrisiken minimieren. In diesem Beitrag zeigen wir dir, wie du SVG-Uploads aktivierst und absicherst.

Warum sind SVGs in WordPress standardmäßig blockiert?

SVG-Dateien sind skalierbare Vektorgrafiken, die besonders für Logos, Icons und Illustrationen ideal sind. Sie haben jedoch eine besondere Dateistruktur, die schädlichen Code enthalten kann. Daher deaktiviert WordPress standardmäßig den Upload.

Mit einer durchdachten Anpassung kannst du SVG-Dateien sicher hochladen und verwenden.

SVG-Upload in WordPress aktivieren (sicher & optimiert)

Um den SVG-Upload zu aktivieren und gleichzeitig Sicherheitsmaßnahmen zu treffen, kannst du den folgenden Code in die functions.php deines WordPress-Block-Themes einfügen:

1️⃣ Erlauben von SVG Uploads

function enable_svg_upload( $mime_types ) {
    $mime_types['svg'] = 'image/svg+xml'; // SVG-Mime-Typ hinzufügen
    return $mime_types;
}
add_filter( 'upload_mimes', 'enable_svg_upload' );

➡ Erklärung: Dieser Code ermöglicht das Hochladen von SVG-Dateien, indem der MIME-Typ für SVGs zu den erlaubten Dateitypen hinzugefügt wird.

2️⃣ SVG-Dateien validieren – Sicherheit erhöhen

function validate_svg_file( $data, $file, $filename, $mimes ) {
    $filetype = wp_check_filetype( $filename, $mimes );

    if ( $filetype['ext'] === 'svg' ) {
        $xml = @simplexml_load_file( $file );
        if ( !$xml ) {
            $data['error'] = 'Das SVG-File ist ungültig oder beschädigt.';
        }
    }

    return $data;
}
add_filter( 'wp_check_filetype_and_ext', 'validate_svg_file', 10, 4 );

3️⃣ SVGs korrekt anzeigen im Frontend & Backend

function fix_svg_display() {
    echo '<style type="text/css">
        img[src$=".svg"] { width: auto; height: auto; }
    </style>';
}
add_action( 'admin_head', 'fix_svg_display' );
add_action( 'wp_head', 'fix_svg_display' );

➡ Erklärung: WordPress stellt SVG-Dateien manchmal nicht korrekt dar. Diese Funktion fügt ein CSS-Stylesheet hinzu, um das Rendering der SVGs zu optimieren.

Wie integrierst du den Code in dein FSE-Block-Theme?

1️⃣ Öffne dein WordPress-Theme-Verzeichnis.

2️⃣ Gehe zu functions.php und füge den Code ein.

3️⃣ Speichere die Datei und teste den SVG-Upload in der WordPress-Medienbibliothek.

Fazit

Mit dieser Methode kannst du sicher SVGs in WordPress hochladen, ohne deine Website unnötigen Sicherheitsrisiken auszusetzen. Durch die Kombination aus MIME-Typ-Erweiterung, Validierung und optimierter Anzeige bleibt deine WordPress-Seite geschützt und performant.