Autoriser l’envoi de fichiers SVG sur WordPress

Le format SVG n’est toujours pas accepté nativement par la médiathèque de WordPress, y compris dans WordPress 7.1. Si vous tentez d’envoyer un tel fichier, WordPress affiche le message « Désolé, vous n’avez pas l’autorisation de téléverser ce type de fichier. », et ce refus a une bonne raison : la sécurité.

Voyons comment activer la prise en charge des SVG.

Selon Wikipédia, le Scalable Vector Graphics ou en français graphique vectoriel adaptable, est un format de données conçu pour décrire des ensembles de graphiques vectoriels et basé sur XML.

Autrement dit, vous pouvez agrandir l’élément à l’infini sans perte de qualité à la manière d’un fichier Adobe Illustrator.

Ce format sert surtout pour les logos, les icônes et les illustrations. Très léger et net à toutes les tailles d’écran, il est idéal pour le responsive design.

Pourquoi WordPress refuse-t-il les SVG ?

Contrairement à un JPEG ou un PNG, un SVG est un fichier texte au format XML. Il peut donc contenir des balises <script>, des attributs comme onload ou des liens vers des ressources externes. Un SVG piégé, ouvert directement dans le navigateur, peut exécuter du JavaScript avec les droits de votre nom de domaine (faille XSS). C’est pourquoi l’ajout des SVG aux types de fichiers autorisés est discuté depuis plus de dix ans sans être intégré au cœur de WordPress.

Deux approches existent :

1. utiliser une extension qui nettoie chaque SVG à l’envoi (méthode recommandée, surtout si plusieurs personnes publient sur le site) ;
2. autoriser les SVG par code, en réservant cette possibilité aux administrateurs et en nettoyant chaque fichier envoyé.

Méthode n°1 : avec l’extension Safe SVG

Safe SVG, maintenue par l’agence 10up, est l’extension de référence pour ce besoin. Elle :

• nettoie chaque SVG envoyé avec la bibliothèque svg-sanitizer, qui supprime scripts et attributs dangereux ;
• affiche un aperçu des SVG dans la médiathèque ;
• permet de choisir quels rôles peuvent envoyer des SVG.

Installez-la depuis Extensions > Ajouter une extension et activez-la : les SVG sont aussitôt acceptés et nettoyés. Par défaut, tous les comptes autorisés à téléverser des fichiers, auteurs compris, peuvent en envoyer ; vous pouvez réserver cette possibilité à certains rôles dans Réglages > Médias. L’extension SVG Support est une alternative également très répandue.

Méthode n°2 : autoriser les SVG sans extension

Si vous êtes seul à administrer le site et que vous n’envoyez que des SVG de confiance (exportés depuis votre logiciel de dessin ou fournis par votre graphiste), vous pouvez vous passer d’extension. Ajoutez le code ci-dessous dans un mu-plugin, par exemple wp-content/mu-plugins/wpc-svg-uploads.php, plutôt que dans le fichier functions.php de votre thème : l’autorisation reste ainsi active si vous changez de thème.

<?php
/**
 * Plugin Name: WPC SVG Uploads
 * Description: Allows administrators only to upload SVG files, and sanitizes every uploaded SVG.
 * Requires PHP: 8.1
 * Text Domain: wpchannel
 */

defined( 'ABSPATH' ) || exit;

/**
 * Adds the SVG MIME type to the allowed upload types, for administrators only.
 */
function wpc_svg_upload_mimes( $mimes ) {
	if ( current_user_can( 'manage_options' ) ) {
		$mimes['svg'] = 'image/svg+xml';
	}

	return $mimes;
}
add_filter( 'upload_mimes', 'wpc_svg_upload_mimes' );

/**
 * Accepts .svg files even when PHP detects them as "text/plain" or "text/xml"
 * instead of "image/svg+xml". Their content has already been checked by wpc_svg_sanitize_upload().
 */
function wpc_svg_check_filetype( $data, $file, $filename, $mimes ) {
	if ( ! current_user_can( 'manage_options' ) ) {
		return $data;
	}

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

	if ( 'svg' === $filetype['ext'] ) {
		$data['ext']  = 'svg';
		$data['type'] = 'image/svg+xml';
	}

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

/**
 * Sanitizes SVG files sent from the media library, the block editor or the REST API,
 * before WordPress checks and saves them. Files that cannot be sanitized are rejected.
 */
function wpc_svg_sanitize_upload( $file ) {
	if ( empty( $file['tmp_name'] ) || ! empty( $file['error'] ) || ! preg_match( '/\.svg$/i', (string) $file['name'] ) ) {
		return $file;
	}

	$svg = wpc_svg_sanitize( (string) file_get_contents( $file['tmp_name'] ) );

	if ( null === $svg || false === file_put_contents( $file['tmp_name'], $svg ) ) {
		$file['error'] = __( 'This file is not a valid SVG image or could not be sanitized.', 'wpchannel' );
		return $file;
	}

	$file['size'] = strlen( $svg );

	return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'wpc_svg_sanitize_upload' );
add_filter( 'wp_handle_sideload_prefilter', 'wpc_svg_sanitize_upload' );

/**
 * Refuses SVG files sent through wp_upload_bits() (XML-RPC), which cannot be sanitized.
 */
function wpc_svg_block_upload_bits( $upload ) {
	if ( is_array( $upload ) && preg_match( '/\.svg$/i', (string) $upload['name'] ) ) {
		return __( 'SVG files must be uploaded from the media library.', 'wpchannel' );
	}

	return $upload;
}
add_filter( 'wp_upload_bits', 'wpc_svg_block_upload_bits' );

/**
 * Returns a sanitized copy of an SVG document, or null if it is not a valid SVG.
 * Only drawing elements are kept: scripts, foreignObject, animations, event handlers (on*),
 * javascript: links and external files (use, image, @import) are removed.
 */
function wpc_svg_sanitize( $svg ) {
	$svg_ns  = 'http://www.w3.org/2000/svg';
	$allowed = array(
		'svg', 'g', 'defs', 'symbol', 'use', 'title', 'desc', 'style', 'a', 'switch', 'image',
		'path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'text', 'tspan', 'textPath',
		'linearGradient', 'radialGradient', 'stop', 'clipPath', 'mask', 'pattern', 'marker', 'filter',
		'feBlend', 'feColorMatrix', 'feComponentTransfer', 'feComposite', 'feConvolveMatrix',
		'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feDropShadow', 'feFlood',
		'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feMerge', 'feMergeNode',
		'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence',
	);

	if ( '' === trim( $svg ) || ! class_exists( 'DOMDocument' ) ) {
		return null;
	}

	// LIBXML_NONET: no network access. Entities are never substituted (no LIBXML_NOENT).
	$dom             = new DOMDocument();
	$internal_errors = libxml_use_internal_errors( true );
	$loaded          = $dom->loadXML( $svg, LIBXML_NONET );
	libxml_clear_errors();
	libxml_use_internal_errors( $internal_errors );

	$root = $dom->documentElement;

	// Not an SVG document, or a DOCTYPE declaring entities (XXE, "billion laughs"): reject.
	if ( ! $loaded || null === $root || 'svg' !== $root->localName || $svg_ns !== $root->namespaceURI
		|| ( null !== $dom->doctype && '' !== trim( (string) $dom->doctype->internalSubset ) ) ) {
		return null;
	}

	$xpath = new DOMXPath( $dom );

	foreach ( iterator_to_array( $xpath->query( '//*' ), false ) as $element ) {
		// Unknown elements (script, foreignObject, animate, set, HTML...) are removed with their content.
		if ( $svg_ns !== $element->namespaceURI || ! in_array( $element->localName, $allowed, true ) ) {
			$element->parentNode->removeChild( $element );
			continue;
		}

		foreach ( iterator_to_array( $element->attributes, false ) as $attribute ) {
			$name  = strtolower( $attribute->localName );
			$value = (string) preg_replace( '/[\x00-\x20]+/', '', $attribute->value );

			// Links: internal references (#id) only, plus web links on <a> and embedded bitmaps on <image>.
			$safe_link = str_starts_with( $value, '#' )
				|| ( 'a' === $element->localName && preg_match( '#^(https?:|mailto:)#i', $value ) )
				|| ( 'image' === $element->localName && preg_match( '#^data:image/(png|jpe?g|gif|webp);#i', $value ) );

			if ( str_starts_with( $name, 'on' ) || 'base' === $name
				|| ( 'href' === $name && ! $safe_link )
				|| ( 'style' === $name && preg_match( '/@import|javascript:|expression\(/i', $value ) ) ) {
				$element->removeAttributeNode( $attribute );
			}
		}

		if ( 'style' === $element->localName && preg_match( '/@import|javascript:|expression\s*\(/i', $element->textContent ) ) {
			$element->parentNode->removeChild( $element );
		}
	}

	return '<?xml version="1.0" encoding="UTF-8"?>' . "\n" . $dom->saveXML( $root );
}

Ce code agit à quatre niveaux :

• le filtre upload_mimes ajoute le SVG aux types de fichiers autorisés, uniquement pour les comptes qui peuvent gérer les réglages du site (les administrateurs). Les autres rôles, auteurs compris, reçoivent toujours le message d’erreur de WordPress ;
• le filtre wp_check_filetype_and_ext règle le cas où PHP identifie le fichier comme text/plain au lieu de image/svg+xml, par exemple quand le SVG commence par un commentaire. Sans lui, WordPress refuse l’envoi, puisqu’il compare le type réel du fichier à celui attendu ;
• les filtres wp_handle_upload_prefilter et wp_handle_sideload_prefilter nettoient chaque SVG avant son enregistrement, qu’il soit envoyé depuis la médiathèque, l’éditeur de blocs ou l’API REST. Seuls les éléments de dessin sont conservés : les balises <script> et <foreignObject>, les animations, les attributs commençant par on (onload, onclick…), les liens javascript: et les appels à des fichiers externes (<use>, <image>, @import) disparaissent. Un fichier qui n’est pas un SVG valide, ou qui déclare des entités XML, est refusé ;
• le filtre wp_upload_bits refuse les SVG envoyés par XML-RPC, qui échapperaient au nettoyage.

Ce nettoyage écarte les pièges les plus courants, mais il reste plus sommaire que celui de Safe SVG. Avant d’envoyer un SVG d’origine inconnue, ouvrez-le dans un éditeur de texte et vérifiez l’absence de balise <script> ou d’attributs commençant par on. Au moindre doute, préférez Safe SVG.

Avec le filtre wp_check_filetype_and_ext, inutile d’ajouter une déclaration <?xml version="1.0" encoding="utf-8"?> en tête de vos fichiers, une astuce qui servait uniquement à influencer la détection du type MIME par PHP.

Avec la méthode par code, WordPress n’enregistre ni miniature ni dimensions pour vos SVG. La vue grille de la médiathèque les affiche correctement, mais là où WordPress génère lui-même la balise d’image, par exemple dans la vue liste de la médiathèque, le SVG reçoit une largeur et une hauteur de 1 pixel. Safe SVG gère les aperçus dans la médiathèque ; sinon, voici comment corriger les erreurs d’affichage des SVG.

Et pour de simples icônes ?

Si vous cherchez seulement à afficher des pictogrammes (flèche, enveloppe, téléphone mobile, partage…), pas besoin d’autoriser les SVG. Depuis WordPress 7.0, le bloc Icône insère des icônes SVG issues d’une bibliothèque intégrée au cœur. Depuis WordPress 7.1, les développeurs peuvent y ajouter leurs propres collections d’icônes via une API dédiée (fonction wp_register_icon_collection()).

Questions fréquentes

WordPress accepte-t-il les SVG nativement ?

Non. WordPress 7.1 n’autorise toujours pas l’envoi de SVG dans la médiathèque. La demande est suivie dans le ticket n°24251 du Trac de WordPress, toujours ouvert. Le bloc Icône, lui, s’appuie sur une bibliothèque de SVG intégrée au cœur.

Autoriser les SVG est-il dangereux ?

Cela dépend de qui les envoie. Un SVG peut contenir du code JavaScript : réservez l’envoi aux administrateurs et faites nettoyer les fichiers, par une extension comme Safe SVG ou par le code de la méthode n°2.

Pourquoi WordPress refuse-t-il mon SVG malgré le code ?

Vérifiez d’abord que vous êtes connecté avec un compte administrateur. Si c’est le cas, PHP ne détecte peut-être pas le fichier comme image/svg+xml : le filtre wp_check_filetype_and_ext de la méthode n°2 corrige ce cas. Enfin, le code refuse les fichiers qui ne sont pas des SVG valides ou qui déclarent des entités XML (<!ENTITY) : réenregistrez-les sans ces déclarations depuis votre logiciel de dessin.