SVG Dateien hochladen und anzeigen

Um SVG-Dateien in WordPress nutzen zu können, musst du folgende Schritte durchführen:

Methode 1 – Plugin verwenden (einfachste Lösung):

1. Installiere ein Plugin wie „SVG Support“ oder „Safe SVG“
2. Aktiviere das Plugin
3. Lade deine SVG-Dateien wie gewohnt über die Mediathek hoch

Methode 2 – Manuell im functions.php der Theme-Datei: Füge folgenden Code in die functions.php deines Themes ein:

function add_svg_support($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_svg_support');

// Zusätzlich für die korrekte Thumbnail-Generierung
function fix_svg_thumbnail_display($response) {
    if ($response['mime'] === 'image/svg+xml') {
        $response['sizes'] = array(
            'thumbnail' => array(
                'url' => $response['url'],
                'width' => 150,
                'height' => 150
            )
        );
    }
    return $response;
}
add_filter('wp_prepare_attachment_for_js', 'fix_svg_thumbnail_display');

Sicherheitshinweise:

1. SVG-Dateien können JavaScript enthalten. Stelle sicher, dass du nur vertrauenswürdige SVGs hochlädst
2. Bei der manuellen Methode fehlt die Sicherheitsprüfung der Dateien
3. Plugins wie „Safe SVG“ bieten zusätzliche Sicherheitsfunktionen

Verwendung nach dem Upload:

• In Beiträgen/Seiten wie normale Bilder einfügen
• Im Theme über wp_get_attachment_image() oder <img src="...">
• Als Hintergrundbild in CSS: background-image: url('pfad/zur/datei.svg');

Best Practices:

1. Optimiere SVGs vor dem Upload (z.B. mit SVGO)
2. Stelle sicher, dass wichtige Schriften in Pfade konvertiert sind
3. Entferne unnötige Metadaten
4. Teste die SVGs in verschiedenen Browsern