Comment ajouter des icônes SVG sur WordPress proprement ?

Pourquoi le SVG bat la police d’icônes à plate couture ?

Pendant des années, le réflexe a été d’installer une police d’icônes complète (Font Awesome, Dashicons et consorts) pour afficher trois pictos dans un menu. Un peu comme acheter tout un magasin de bricolage pour planter un clou.

Le SVG (Scalable Vector Graphics) règle ce problème à la racine. C’est un format vectoriel, donc net à n’importe quelle taille d’écran, et chaque icône pèse généralement entre 1 et 3 Ko contre plusieurs centaines de Ko pour une police complète chargée en bloc. Sur un site qui vise de bons Core Web Vitals, la différence se sent.

L’autre avantage tient à la précision. Avec une police d’icônes comme Font Awesome ou Dashicons, tu charges l’alphabet entier de pictogrammes pour n’en utiliser que cinq. Avec le SVG, tu charges exactement ce que tu affiches, ni plus ni moins, ce qui allège d’autant la taille du DOM de ta page, moins d’éléments inutiles chargés, plus de marge de manœuvre pour le navigateur.

Le SVG s’anime aussi facilement en CSS ou en JS, change de couleur au survol sans recharger une image, et reste lisible sur un écran Retina comme sur un vieux moniteur de bureau. Bref, l’icône qui s’adapte à tout sans transpirer.

Le seul vrai inconvénient c’est qu’il faut gérer correctement chaque fichier individuellement (nom, poids, structure), alors qu’une police regroupe tout en un seul chargement. C’est un compromis largement gagnant dès que le site dépasse une poignée d’icônes, ce qui est le cas de la quasi-totalité des sites professionnels.

Pourquoi WordPress bloque les SVG par défaut ?

Un fichier JPEG ou PNG est une suite de pixels, inerte. Un fichier SVG est écrit en XML, donc techniquement capable de contenir du code, y compris des balises <script> planquées dans la structure.

C’est exactement le terrain de jeu d’une attaque par cross-site scripting (XSS), un fichier SVG piégé, uploadé via un formulaire mal protégé, peut exécuter du code dans le navigateur du visiteur ou de l’administrateur connecté. Sur un site WordPress, où la médiathèque est souvent accessible à plusieurs contributeurs, le risque grimpe vite.

WordPress a donc tranché depuis longtemps en retirant le type MIME image/svg+xml de la liste des formats autorisés par défaut, un choix conservateur et frustrant au quotidien, mais qui colle avec une stratégie de sécurité WordPress construite sérieusement plutôt qu’avec un confort accordé à tout prix.

Le piège, c’est de croire qu’un SVG provenant d’Illustrator ou de Figma est forcément propre. La plupart le sont, mais un fichier récupéré sur un site tiers, généré automatiquement, ou ouvert puis ré-exporté par un outil douteux peut transporter des éléments indésirables sans que ça se voie à l’œil nu.

Autoriser les SVG sans sanitisation (nettoyage du code XML avant stockage), c’est donc laisser la porte d’entrée grande ouverte en se fiant uniquement à la bonne foi de la personne qui l’upload. D’ailleurs, cet article sur les risques liés aux SVG sous WordPress le rappelle bien, le danger ne vient pas du format en lui-même, mais de l’absence de filtrage à l’entrée. C’est tout l’enjeu de la suite.

La mauvaise solution c’est de débloquer les SVG sans filtrer

Une recherche rapide sur le sujet ressort souvent le même bout de code PHP, censé débloquer le SVG en deux lignes via un filtre sur upload_mimes. Ça fonctionne, dans le sens où le fichier s’upload. Le problème, c’est que ce code autorise tout, sans aucune vérification du contenu du fichier.

C’est l’équivalent d’installer une porte blindée et de laisser la clé sous le paillasson. Le filtrage du type MIME ouvre la porte, mais ne regarde jamais ce qu’il y a dans le fichier qui passe.

Concrètement, ce code ressemble à ceci.

// Autorise les SVG sans aucune vérification (à éviter)
function xtdw_unsafe_svg_upload( $mimes ) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'xtdw_unsafe_svg_upload' );

Si tu utilises déjà ce genre de filtre sur un site en production, la priorité n’est pas de paniquer mais de basculer rapidement vers une extension qui ajoute la couche de nettoyage manquante. Tant que ce filtre reste actif sans contrôle du contenu, n’importe quel utilisateur ayant le droit d’uploader des médias (un client, un stagiaire, un compte compromis) peut techniquement déposer un fichier piégé.

Autre point souvent ignoré : ce filtre, posé seul dans le functions.php du thème, disparaît si le thème change, et reste actif même si la fonctionnalité n’est plus utilisée. Un bon réflexe consiste à isoler ce type de filtre dans un mu-plugin dédié plutôt que dans le thème, justement pour garder la main sur ce réglage indépendamment du thème actif.

SolidWP – la tranquillité d’esprit en quelques clics !

SolidWP, la solution ultime pour renforcer la sécurité de votre site.

Avec SolidWP, vous accédez à des fonctionnalités avancées contre les cyber-menaces.

→ Passer à SOLID WP

La bonne méthode pour ajouter des icônes SVG en sécurité

Voici la marche à suivre concrète, celle que tu peux appliquer sur les sites que tu gères.

Étape 1 : choisir une extension de sanitisation

Deux extensions françaises et anglophones font référence sur ce point précis, Safe SVG et SVG Support. Les deux nettoient automatiquement le code XML du fichier à l’upload, retirent les balises potentiellement dangereuses, et autorisent ensuite le SVG comme un format d’image classique dans la médiathèque.

Cet article qui compare les deux solutions détaille bien leurs différences : Safe SVG mise sur la simplicité (zéro réglage, ça fonctionne dès l’activation), SVG Support propose davantage d’options de configuration pour les cas avancés.

Si tu gères déjà plusieurs sites avec une boîte à outils tout-en-un, le module SVG de WPMasterToolKit couvre exactement le même besoin de sanitisation, et vient avec une centaine d’autres modules (SMTP, duplication d’articles, désactivation de Gutenberg) qui évitent d’empiler les extensions une par une.

Étape 2 : installer et activer le plugin

Direction le menu Extensions puis Ajouter, recherche du nom du plugin choisi, installation puis activation, sans réglage supplémentaire à toucher derrière. Le principe reste exactement celui décrit sur la fiche officielle de Safe SVG, une extension qui filtre dès l’activation, sans configuration à prévoir pour commencer à uploader des SVG en toute sécurité.

Étape 3 : uploader et vérifier

Direction la médiathèque puis Ajouter, le fichier SVG qui s’uploade désormais normalement. Petit réflexe utile, ouvrir le fichier dans un éditeur de texte avant l’upload pour vérifier visuellement qu’il ne contient aucune balise <script> suspecte, histoire de ne pas se fier uniquement au plugin.

Étape 4 : afficher l’icône

Une fois uploadée, l’icône SVG se manipule comme n’importe quelle image dans Elementor ou Gutenberg, glissée dans un widget Image, posée en fond, ou intégrée en ligne dans le code pour profiter de la coloration au survol en CSS.

Quand tu l’upload, pense à renseigner l’attribut alt, sauf si l’icône reste purement décorative et n’apporte aucune information utile au visiteur. Sur le widget Image d’Elementor, ce champ se trouve directement dans l’onglet Contenu, sous l’image sélectionnée. Pour une icône intégrée en ligne dans le code HTML (la balise <svg> collée directement dans le contenu plutôt qu’appelée comme image), l’attribut doit être ajouté à la main, par exemple via aria-label ou un élément <title> interne au SVG, sinon le rendu final reste muet pour un lecteur d’écran comme pour Google.

Comment activer le SVG proprement dans Elementor ?

Côté Elementor, l’éditeur propose son propre réglage pour autoriser l’upload de fichiers non filtrés (SVG, JSON pour Lottie). Ce réglage se trouve dans Elementor > Éditeur > Réglage > Avancé > Permettre les téléversements de fichier non filtré.

Activer cette option seule revient au même problème que le filtre PHP brut vu plus haut : ça débloque l’upload, sans nettoyer le contenu. La bonne pratique consiste à laisser ce réglage Elementor désactivé et à passer exclusivement par Safe SVG ou SVG Support, qui filtrent le fichier avant même qu’Elementor n’y touche.

Une fois l’extension de sanitisation active, les icônes SVG s’utilisent normalement dans le widget Icône d’Elementor, en sélectionnant l’onglet SVG plutôt que la bibliothèque d’icônes intégrée. C’est exactement le même réflexe que pour l’icône burger du menu mobile, traitée comme un widget à part entière dans le guide sur la personnalisation du header et du footer avec Elementor, où l’icône burger est décrite comme l’équivalent numérique d’un couteau suisse, petit mais indispensable.

Pour les icônes utilisées en grand nombre sur une page (grille de services, liste de fonctionnalités), Elementor permet aussi d’appliquer une couleur unique directement depuis l’éditeur, à condition que le SVG source soit construit avec un seul tracé path plutôt que des couleurs codées en dur. Un détail qui évite bien des allers-retours avec le fichier source.

Bien nommer et optimiser tes fichiers SVG

Une icône SVG mal nommée reste un fichier invisible pour le référencement, exactement comme n’importe quelle autre image. Le nommage et l’attribut ALT méritent donc le même soin que sur tes images classiques, un nom de fichier descriptif plutôt qu’un numéro généré automatiquement par ton logiciel d’export.

Côté poids, un export brut depuis Illustrator ou Figma embarque souvent des métadonnées inutiles (commentaires, identifiants d’éditeur, espaces superflus). Un passage par un outil comme SVGO (disponible en ligne ou en extension) réduit le poids du fichier de 30 à 50 % sans toucher au rendu visuel, ce qui n’est pas neutre quand l’icône se répète des dizaines de fois sur une page.

Un dernier réflexe est de vérifier que chaque SVG ne contient qu’un seul jeu de couleurs cohérent avec la charte graphique du site, plutôt que des couleurs héritées du logiciel d’export. Un fichier propre à la source évite des heures de retouche CSS plus tard.

En conclusion

Le SVG n’est pas un format dangereux en soi, c’est l’absence de filtrage qui pose problème. Une fois Safe SVG ou SVG Support en place, le réflexe d’uploader une icône vectorielle devient aussi simple que pour une image classique, avec un gain de légèreté et de netteté que la police d’icônes ne peut pas offrir.

La méthode tient en trois temps : choisir l’extension qui sanitise le fichier, laisser le réglage natif d’Elementor désactivé, et soigner le nommage de chaque fichier pour qu’il serve aussi le référencement. Trois habitudes simples, qui évitent à la fois la faille de sécurité et l’image floue sur petit écran.

Si tu veux qu’on regarde ensemble comment sécuriser proprement l’upload de médias sur ton site, ou qu’on fasse le point sur tes extensions actuelles, j’en discute volontiers.