Comment téléverser un SVG dans WordPress ?

Vous souhaitez téléverser une image au format SVG dans WordPress et un message d'erreur s'affiche : "Désolé, vous n’avez pas l’autorisation de téléverser ce type de fichier".

Cela est tout à fait normal, car nativement, WordPress ne permet pas le téléversement de fichiers SVG dans la médiathèque.

Pourtant, le format SVG est disponible depuis 1999. Celui-ci permet de générer des images vectorielles nettes et redimensionnables sans perte de qualité. En bref, le SVG est idéal pour les logos et les icônes. Avouez que ce serait idiot de ne pas pouvoir utiliser des images au format SVG sur un site créé avec WordPress.

La bonne nouvelle est qu'il existe des extensions qui permettent de remédier à ce problème.

Alors, voyons comment contourner cette interdiction pour pouvoir enfin téléverser un logo ou des icônes au format SVG dans WordPress, en toute sécurité.

(Article publié en mai 2021 et mis à jour en mai 2025)

Pourquoi WordPress ne permet pas d’intégrer les SVG ?

WordPress n'autorise pas le téléchargement des fichiers SVG pour des raisons de sécurité.

C'est pourquoi le message "Désolé, vous n’avez pas l’autorisation de téléverser ce type de fichier" s'affiche lorsque vous essayez d'importer un média au format SVG.

Vous vous demandez sûrement en quoi les fichiers SVG peuvent constituer un risque de sécurité.

Eh bien, sachez que les fichiers SVG, même s'ils représentent visuellement une image, sont en fait des fichiers en langage XML, une version améliorée du langage HTML. Et surtout que ceux-ci peuvent contenir du JavaScript pour rendre l'image interactive.

Le souci est donc que si vous autorisez les utilisateurs à téléverser un SVG (par exemple, une photo de profil) ou bien si vous importez un SVG issu d'une source peu fiable, vous courrez le risque qu'il contienne un script malveillant. Autrement dit, un fichier SVG peut causer une faille de sécurité et exposer votre site à des attaques Cross-site Scripting (XSS).

Par ailleurs, le problème vient aussi du fait que le type MIME du SVG correspond à celui d'une image classique : image/svg+xml.

Le type MIME permet d'indiquer au navigateur la façon d'afficher une ressource. Le navigateur affichera donc le SVG considérant qu'il s'agit d'une image, qu'il contienne un code malicieux ou pas.

Toutefois, il est à noter que si "l'image" SVG est servie via une balise d'image, le code malveillant ne s'exécute pas. Ce n'est en fait que lorsqu'elle est accessible en cliquant dessus (ouvrir dans un nouvel onglet, téléchargement et ouverture dans le navigateur), que le code malicieux s'exécute.

Voyons à présent comment autoriser le téléchargement des SVG dans WordPress...

Autoriser le téléchargement des SVG dans WordPress via du code

Effectivement, vous pouvez autoriser l'importation des SVG dans WordPress via du code, mais c'est une très mauvaise solution.

Voici le code à injecter dans le functions.php de votre thème enfant que vous trouverez facilement sur le web :

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

Le problème est que ce code ne sert qu'à permettre l'utilisation du type MIME image/svg+xml.

Alors, bien sûr, votre problème sera réglé. Mais, n'importe quel utilisateur WordPress pourra téléverser des SVG dans les médias, et ce, sans aucune sécurité, ni filtrage du code contenu.

Permettre l'import du SVG dans WordPress avec une extension

La meilleure solution pour permettre l'import d'un SVG dans WordPress est donc de recourir à une extension dédiée.

Mais attention, toutes ne se valent pas. En effet, certaines se contentent bien souvent d'ajouter le code mentionné au paragraphe précédent. Ce qu'il vous faut, c'est une extension qui "désinfecte" votre fichier SVG, c'est-à-dire qui supprime le code javascript malveillant.

Voici les trois extensions que je vous recommande : Safe SVG, SVG Support et le module dédié de WPMasterToolKit.

Safe SVG

Safe SVG est un plugin communautaire qui compte plus d'un million d'installations actives. Il obtient une note de 4,9 sur 5 étoiles.

Safe SVG permet d'autoriser les téléversements SVG dans la médiathèque de WordPress et d'en afficher un aperçu. Mais, il fait plus que cela. En effet, il nettoie et élimine les éventuelles vulnérabilités SVG / XML des fichiers.

Installez le plugin, activez-le et tout se fait automatiquement.

Il est à noter qu'il offre aussi la possibilité de choisir les rôles utilisateurs habilités à télécharger des fichiers SVG. Pour accéder à ce réglage, allez dans Réglages/Médias et faites défiler la page. Puis, cochez les rôles utilisateurs que vous approuvez.

Vous constaterez que vous pouvez également autoriser le téléchargement de fichiers SVG de plus de 10 Mo. Mais, je ne vous recommande pas d'activer cette option, car cela peut affecter les performances de votre site.

SVG Support

SVG Support est un autre plugin possédant la même note et le même nombre d'installations que Safe SVG. Il fait le même travail, mais offre quelques fonctionnalités supplémentaires.

Avec cette extension, il est possible de limiter les privilèges de téléversement SVG aux administrateurs. Il suffit, pour cela, d'aller dans Réglages/SVG Support et de cocher la case "Restreindre aux administrateurs".

Vous pouvez aussi activer le mode avancé si vous souhaitez utiliser d'autres fonctionnalités telles que :

• l'insertion du JavaScript dans le pied de page
• modifier la class CSS ou en insérer une automatiquement
• forcer le SVG en ligne

Le module dédié dans WPMasterToolKit

Enfin, vous pouvez utiliser le module dédié dans l'extension tout-en-un WPMasterToolKit.

Cette extension est récente, mais elle est vraiment top. En effet, WPMasterToolKit est le plugin indispensable à tout site WordPress. 🚀

Pour autoriser instantanément le téléversement des SVG dans les médias, installez et activez le plugin. Puis activez le module "Téléchargement SVG" qui se trouve dans la catégorie "Contenus et médias".

WPMasterToolKit se chargera de nettoyer et sécuriser tous les fichiers SVG de votre site au moyen de la bibliothèque enshrined/svg-sanitize.

Ici, vous n'aurez pas de paramétrages supplémentaires.

Activer la prise en charge SVG dans Elementor

Si vous travaillez avec Elementor pour créer votre site WordPress, vous n'avez pas besoin d'installer un plugin. En effet, Elementor possède déjà une fonctionnalité native permettant d'autoriser le téléversement des SVG dans les pages conçues via Elementor.

Il vous suffit d'aller dans Elementor/réglages/avancés et d'activer "Permettre les téléversements de fichier non filtré".

Dès que vous activez cette fonction, vous pouvez téléverser, non seulement, des SVG, mais aussi des fichiers Json, par exemple, des animations Lottie Files.

Elementor se charge de nettoyer automatiquement le fichier SVG et de supprimer tout code malveillant. Il est à noter qu'Elementor intègre le fichier SVG dans la page en tant que code en ligne.

Bien entendu, comme avec les extensions citées précédemment, vous pouvez ensuite prévisualiser l'image SVG dans les médias de WordPress.

Que faut-il retenir sur les SVG dans WordPress ?

Il faut de retenir que, même si les fichiers SVG ont pas mal d'avantages, comme leur capacité à s'adapter sans perte de qualité. Ils ont aussi un inconvénient majeur : les SVG peuvent constituer une menace potentielle pour la sécurité de votre site.

Alors, pensez à utiliser des extensions qui suppriment les codes malicieux avant d'utiliser ces fichiers sur votre site.

Enfin, un dernier conseil : ne téléchargez des SVG qu'à partir de sources connues et fiables pour limiter les risques.

Utilisez-vous des SVG sur votre site ? Si oui, quelle extension avez-vous choisie pour activer la prise en charge des fichiers SVG dans WordPress ?