Aller au contenu principal
Comment ajouter des images svg à wordpress

Comment ajouter des images SVG à WordPress ?

Retour au blog
WordPress
Nicolas
4 min de lecture
Comment ajouter des images svg à wordpress

Pourquoi WordPress bloque les fichiers SVG ?

En 2026, WordPress ne supporte toujours pas nativement l’upload de fichiers SVG. La raison est simple : les fichiers SVG sont basés sur le format XML et peuvent contenir du code JavaScript malveillant, des entités externes XML (XXE), et d’autres vecteurs d’attaque potentiels. Un SVG non sanitisé uploadé par un utilisateur pourrait théoriquement compromettre votre site. C’est pourquoi WordPress maintient cette restriction par défaut, même si le format SVG est devenu incontournable pour le web moderne.

Cela dit, les SVG offrent des avantages considérables : résolution parfaite à toute taille d’écran, taille de fichier très légère, possibilité d’animation CSS/JS, et accessibilité améliorée. Pour les logos, icônes, illustrations et éléments d’interface, le SVG est souvent le meilleur choix. Voici comment les utiliser en toute sécurité dans WordPress.

Safe svg

Méthode 1 : Le plugin Safe SVG (recommandé)

Safe SVG, développé par 10up, est la solution la plus populaire et la plus sûre pour ajouter le support SVG à WordPress. Le plugin sanitise automatiquement chaque fichier SVG à l’upload, supprimant tout code potentiellement dangereux (scripts, entités externes, événements inline) tout en préservant le contenu graphique.

Safe SVG offre plusieurs fonctionnalités clés : optimisation SVGO automatique à l’upload pour réduire la taille des fichiers, prévisualisation des SVG dans la bibliothèque de médias (en vue grille et liste), et restriction des uploads SVG par rôle utilisateur — vous pouvez limiter l’accès aux administrateurs uniquement, ce qui est fortement recommandé pour la sécurité.

Méthode 2 : Le plugin SVG Support

SVG Support va plus loin que le simple upload en proposant le rendu inline des SVG. Quand un SVG est inséré dans une page, il peut être rendu directement dans le HTML (inline) plutôt que comme une balise <img>, ce qui permet de le styliser avec CSS et de l’animer. Le plugin inclut aussi la sanitisation automatique, la minification, et la restriction par rôle utilisateur.

Le rendu inline est particulièrement utile pour les icônes et éléments d’interface que vous souhaitez colorer dynamiquement avec CSS (par exemple, changer la couleur d’une icône au survol), ou pour les animations SVG complexes nécessitant un accès direct aux éléments du DOM.

Svg support

Méthode 3 : Ajouter le support SVG manuellement (code)

Si vous préférez éviter un plugin supplémentaire, vous pouvez autoriser les SVG via un snippet dans le fichier functions.php de votre thème enfant. Ajoutez le type MIME SVG aux uploads autorisés avec le filtre upload_mimes. Attention : cette méthode ne sanitise pas les fichiers — elle se contente de lever la restriction. Elle n’est recommandée que si vous êtes le seul à uploader des fichiers et que vous maîtrisez la source de vos SVG.

Pour une sécurité maximale avec cette approche, combinez l’autorisation MIME avec une sanitisation manuelle : utilisez un outil comme SVGO ou SVG Sanitizer avant chaque upload pour nettoyer les fichiers, et limitez les uploads SVG aux administrateurs uniquement via un check de rôle dans le filtre.

Bonnes pratiques de sécurité SVG

Quelle que soit la méthode choisie, suivez ces recommandations : limitez les uploads SVG aux administrateurs et éditeurs de confiance, utilisez toujours un plugin ou un outil de sanitisation, ne téléchargez jamais de SVG depuis des sources non vérifiées, et testez vos SVG dans un environnement de staging avant de les mettre en production. Optimisez aussi vos SVG avec SVGO pour réduire la taille des fichiers — un SVG non optimisé peut contenir des métadonnées inutiles qui alourdissent la page.

Avec ces précautions, le SVG est un format sûr et performant qui améliore significativement la qualité visuelle et les performances de votre site WordPress en 2026.

Pour aller plus loin, consultez 5 fonctions WordPress indispensables et les nouveautés de WordPress 6.5.

Prêt à créer votre système IA ?

Anthem Creation vous accompagne dans votre transformation IA

Disponibilité : 1 nouveau projet pour Avril/Mai
Échanger sur mon besoin
Une question ?
✉️

Encore quelques questions ?

Laissez-moi votre email pour qu'on puisse continuer cette conversation. Promis, je garde ça précieusement (et je ne vous bombarderai pas de newsletters).

  • 💬 Accès illimité au chatbot
  • 🚀 Des réponses plus poussées
  • 🔐 Vos données restent entre nous
Cette réponse vous a-t-elle aidé ? Merci !