Comment utiliser des fichiers au format SVG sur WordPress (méthodes + sécurité)

Vous cherchez à afficher votre logo ou vos icônes en ultra-haute qualité, mais WordPress refuse vos fichiers SVG ?

C’est frustrant, mais rassurez-vous : vous n’êtes pas seul. Le sujet du SVG sur WordPress intrigue autant qu’il frustre.

Ce format léger, net à toutes les tailles et idéal pour la performance est pourtant bloqué par défaut.

Pourquoi ? Comment l’activer en toute sécurité ? Et surtout, comment éviter les pièges qui peuvent mettre votre site en danger ?

Dans cet article, vous découvrirez les bonnes pratiques, les risques à connaître et les méthodes fiables pour intégrer vos SVG sans compromettre votre site.

Suivez-nous, on vous explique tout sur le sujet… tout de suite !

Hébergez votre site chez o2switch

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

ESSAYEZ O2SWITCH

Qu’est-ce que le format SVG ?

Vous croisez souvent cet acronyme, mais que signifie-t-il ? SVG signifie Scalable Vector Graphics (en français « graphique vectoriel adaptable»).

C’est un format ouvert basé sur XML (Extensible Markup Language) et créé en 1998 par le W3C (un consortium qui élabore des normes et des lignes directrices pour le web).

Retenez bien ce mot : « Scalable », ou « adaptable » en français. Contrairement aux formats classiques comme le JPEG, le PNG ou le GIF, qui sont basés sur des pixels (on parle d’images matricielles), le SVG est une image vectorielle.

Qu’est-ce que ça change ? Beaucoup de choses. Une image en pixels a une taille fixe. Agrandissez-la, et vous verrez apparaître des carrés flous. C’est la pixellisation.

Un SVG, lui, n’est pas un ensemble de points. C’est un ensemble d’instructions mathématiques, du code XML qui dit au navigateur : « Dessine un cercle ici, une ligne là, avec telle couleur. »

Le résultat est bluffant. Vous pouvez étirer un SVG à l’infini, il restera toujours parfaitement net.

C’est idéal pour les logos, les icônes, les illustrations simples… Bref, tous ces éléments graphiques qui doivent être impeccables sur un petit écran de smartphone comme sur un immense écran 4K.

Pour vos logos, icônes et graphiques simples, le SVG s’impose comme un format de choix pour un web moderne et performant.

Comment fonctionne un fichier SVG ?

Pour faire simple, un fichier SVG est un fichier texte. Oui, vous avez bien lu. Si vous ouvrez un fichier .svg avec un simple éditeur de texte, vous ne verrez pas une image, mais des lignes de code qui ressemblent à du HTML. C’est du XML.

Pensez au HTML. Le XML fonctionne sur un principe similaire, utilisant des balises pour structurer des données. C’est cette structure textuelle qui ordonne au navigateur de « dessiner » le visuel.

Cette nature textuelle lui confère aussi des super-pouvoirs :

• légèreté : un logo simple en SVG pèse souvent quelques kilo-octets à peine, bien moins que son équivalent PNG. Un atout majeur pour la vitesse de chargement de vos pages et le SEO ; 
• manipulation : puisque c’est du code, on peut le modifier directement avec du CSS ou du JavaScript. Changer une couleur, animer une forme : tout devient possible ;
• accessibilité : le texte contenu dans un SVG peut être lu par les moteurs de recherche et les lecteurs d’écran, ce qui est un plus pour l’accessibilité.

Cette structure à base de code qui est à la fois sa plus grande force… et sa plus grande faiblesse, surtout dans l’écosystème WordPress.

Pourquoi ? Eh bien parce que le cœur du problème, c’est que WordPress a été conçu pour les images matricielles comme les JPEG ou PNG.

Le CMS le plus populaire au monde n’est pas nativement préparé à interpréter et, surtout, à sécuriser un fichier qui peut en réalité constituer un script potentiel. 

WordPress prend-il en charge nativement les fichiers SVG ?

La réponse est simple et directe : non. Si vous avez déjà tenté de téléverser un fichier SVG dans votre Médiathèque WordPress, vous connaissez sans doute ce message frustrant : « Ce fichier ne peut pas être traité par le serveur web » :

C’est rageant, n’est-ce pas ? Alors, pourquoi ce blocage ? La raison fondamentale tient en un seul mot : la sécurité. WordPress bloque par défaut le téléversement des SVG pour une bonne raison. Il s’agit de protéger votre site contre des risques de sécurité importants.

Contrairement aux images JPG ou PNG, un fichier SVG est basé sur du code XML. Cette nature le rend vulnérable à des attaques.

Pour éviter le pire, WordPress préfère donc fermer la porte. Mais pas de panique, on va voir juste après de quels risques il s’agit précisément.

Quels sont les problèmes de sécurité concernant les SVG dans WordPress ?

Voilà le cœur du problème. Comme on l’a vu, un SVG est un fichier XML. Et qui dit XML, dit possibilité d’y cacher du code. Pas seulement des instructions de dessin, mais aussi des scripts potentiellement malveillants, comme du JavaScript.

Un attaquant pourrait créer un fichier SVG qui a l’air d’un simple logo, mais qui contient un script capable de voler des informations de session, de rediriger vos utilisateurs vers un site frauduleux, ou d’exploiter d’autres failles de votre site. 

Le simple fait de téléverser un fichier SVG sur votre serveur WordPress pourrait ouvrir une brèche de sécurité béante.

C’est pour cette raison que WordPress bloque tout par défaut. Il ne fait pas la distinction entre un SVG propre et un SVG dangereux. Il applique le principe de précaution.

La solution ? Ne jamais autoriser les SVG sans un filet de sécurité. Vous devez impérativement « nettoyer » ou « désinfecter » (en anglais, on dit « sanitize ») chaque fichier SVG avant de l’accepter.

Ce processus consiste à analyser le code du fichier et à en retirer toutes les balises et tous les attributs potentiellement dangereux, ne laissant que les instructions de dessin légitimes.

On vous explique comment faire ça simplement dans la partie suivante. Mais avant de mettre les mains dans le cambouis, faisons le point sur les menaces les plus courantes si vous utilisez un SVG contenant un script prêt à causer des dégâts sans le savoir : 

• attaques XSS (Cross-Site Scripting) : un script JavaScript dissimulé dans le SVG peut s’exécuter dans le navigateur de vos visiteurs. Il peut alors voler des données sensibles, comme les cookies de session, ou les rediriger vers un site de phishing ;
• attaques par Entité Externe XML (XXE) : pour faire simple, un SVG piégé peut ordonner à votre serveur de lui donner accès à des fichiers confidentiels, comme le crucial fichier wp-config.php ; 
• attaques par Déni de Service (DoS) : un SVG conçu pour être très complexe peut épuiser les ressources de votre serveur lors de son affichage. Votre site devient alors lent, voire totalement inaccessible.

Le danger vient surtout des SVG issus de sources non fiables. Pourtant, même un fichier que vous avez créé peut être compromis. Une faille dans votre logiciel de création suffit.

La solution n’est pas d’abandonner le SVG. Non. La seule méthode viable est la « sanitisation » (ou l’assainissement). Il s’agit de nettoyer le code du SVG pour ne garder que le nécessaire et supprimer tout script dangereux. C’est une étape non négociable.

Restez bien par ici. Dans la partie suivante, on vous montre pas à pas comment réaliser cette opération très simplement, avec et sans extension.

Comment activer la prise en charge des fichiers SVG sur WordPress avec ou sans plugin

Alors, prêt à intégrer des SVG sur votre site WordPress ? Mais comment faire, puisque WordPress les bloque par défaut ?

Il existe principalement deux voies. L’une est simple, sécurisée et recommandée pour 99% des utilisateurs. L’autre est plus technique et, soyons clairs, potentiellement risquée si elle est mal maîtrisée.

Mon conseil d’expert ? Ne jouez pas avec le feu. On va voir ensemble pourquoi la méthode du plugin est la voie royale pour allier simplicité et sécurité.

Méthode 1 : ajouter un fichier SVG sur WordPress avec le plugin SVG Support

Parlons de la solution la plus simple et sûre pour téléverser un fichier SVG sur WordPress : l’utilisation d’une extension dédiée.

Dans ce domaine, SVG Support s’impose comme une référence (en alternative, il existe aussi Safe SVG).

C’est une extension très populaire (1M+ installations actives), bien notée (4,8 étoiles sur 5) et surtout, activement maintenue, un gage de sécurité.

L’atout majeur de ce plugin ? Il ne se contente pas d’ouvrir la porte aux SVG. Il fait bien plus : il les assainit automatiquement à chaque téléversement.

Pour en profiter, direction le menu Extensions > Ajouter une extension de votre interface d’administration WordPress.

Dans la barre de recherche, tapez « SVG Support », puis installez et activez l’extension :

Vous pouvez à présent téléverser le fichier SVG de votre choix dans votre Médiathèque : plus aucun message bloquant ne s’affichera. 

Grâce à une bibliothèque de nettoyage intégrée, SVG Support neutralise tout code malveillant qui pourrait se cacher dans le fichier. Elle est pas belle, la vie ? 

Si vous le souhaitez, vous pouvez procéder à une configuration un peu plus avancée via le menu Réglages > SVG Support.

Par défaut, seul l’administrateur du site a la possibilité de téléverser des fichiers SVG sur WordPress (menu « Restreindre les téléversements SVG à ? »).

Je vous conseille de ne pas ajouter d’autres rôles utilisateurs (Éditeur, Auteur, Contributeur, Abonné) pour garder la main, c’est très important.

Si jamais, pour une raison bien précise, vous devez ajouter un autre utilisateur, c’est par ici que ça se fait : 

Pour le reste, vous pouvez vous contenter des réglages par défaut. Avec ça, vous devriez être tranquille.

En principe, il n’y a plus aucune raison que vous rencontriez le message ci-dessous au moment de glisser-déposer un fichier au format SVG sur l’éditeur de contenu de WordPress :

Méthode 2 : ajouter un fichier SVG avec un morceau de code dans le fichier functions.php

Si vous avez déjà de solides bases techniques et un profil développeur, la méthode n°2 consiste à ajouter un morceau de code (snippet) dans le fichier functions.php de votre thème WordPress.

Pour cela, vous avez besoin : 

• d’un éditeur de code comme Notepad++, Visual Studio Code, Brackets ou Sublime Text ; 
• d’un accès à votre client FTP (Filezilla, Cyberduck, Transmit, etc.) pour envoyer le fichier sur votre site en ligne. 

Important : il ne faut pas modifier directement le fichier functions.php. Il est nécessaire d’utiliser un thème enfant. En alternative, une extension comme Code Snippets permet d’ajouter des fonctionnalités à partir de l’administration de WordPress. Dans tous les cas, cela s’adresse à des utilisateurs avertis.

Avant de vous livrer le code à utiliser, deux précisions de taille à garder à l’esprit : 

1. Utilisez ce morceau de code uniquement si vous êtes sûr de vous et que vous avez de solides connaissances en PHP. Sinon, évitez cette méthode et optez pour la tranquillité d’esprit qu’offre un plugin de confiance comme SVG Support.
2. Avant tout ajout de code, sauvegardez votre site (fichiers + base de données) avec une extension dédiée comme UpdraftPlus ou un outil spécialisé dans la maintenance de vos sites WP comme WP Umbrella.

C’est bon pour vous ? Allez, c’est parti pour l’affichage du morceau de code en question :

<?php
/**
 * Autoriser l'import de fichiers SVG dans WordPress
 */

// 1. Autoriser le MIME type SVG
function wpmarmite_allow_svg_uploads( $mimes ) {
    $mimes['svg']  = 'image/svg+xml';
    $mimes['svgz'] = 'image/svg+xml';
    return $mimes;
}
add_filter( 'upload_mimes', 'wpmarmite_allow_svg_uploads' );

// 2. Sécuriser l'affichage dans la médiathèque
function wpmarmite_fix_svg_display() {
    echo '<style>
        .attachment-266x266, .thumbnail img {
            width: 100% !important;
            height: auto !important;
        }
        .media-icon img[src$=".svg"] {
            width: 100% !important;
            height: auto !important;
        }
    </style>';
}
add_action( 'admin_head', 'wpmarmite_fix_svg_display' );

// 3. Nettoyage & sécurisation de base des SVG uploadés
function wpmarmite_sanitize_svg( $file ) {
    if ( isset($file['type']) && $file['type'] === 'image/svg+xml' ) {

        // Lecture du fichier
        $svg = file_get_contents( $file['tmp_name'] );

        // Vérification simple (une vraie sécurité nécessite un sanitizer complet)
        if ( stripos( $svg, '<script' ) !== false ) {
            $file['error'] = 'Le SVG contient des scripts et a été bloqué pour raisons de sécurité.';
        }
    }
    return $file;
}
add_filter( 'wp_handle_upload_prefilter', 'wpmarmite_sanitize_svg' );

SVG sur WordPress : les bonnes pratiques à ne jamais oublier

Vous avez maintenant une vision claire des enjeux liés à l’utilisation des fichiers SVG sur WordPress.

Ce n’est pas si sorcier, n’est-ce pas ? Il s’agit simplement de prendre les bonnes précautions pour profiter de leur légèreté et de leur flexibilité sans ouvrir la porte aux problèmes de sécurité.

Pour être certain de ne rien oublier, terminons par une checkliste des points essentiels à garder en tête. Considérez-la comme votre garde-fou avant chaque téléversement : 

1. Assainissez toujours vos SVG : que ce soit via un plugin ou manuellement, ne téléversez jamais un SVG sans qu’il soit nettoyé. C’est non négociable.
2. Limitez les permissions : seuls les administrateurs du site devraient avoir le droit de téléverser des fichiers SVG. Configurez vos extensions en ce sens.
3. Utilisez des sources fiables : privilégiez les SVG que vous avez créés vous-même ou téléchargés depuis des sources réputées. Méfiez-vous des fichiers SVG trouvés au hasard sur internet.
4. Pensez à l’affichage : si vos vignettes SVG ne s’affichent pas correctement dans la médiathèque, certains plugins ou bouts de code peuvent corriger ce problème d’affichage en forçant la détection des dimensions.

Vous avez désormais toutes les cartes en main pour maîtriser l’utilisation des fichiers SVG sur WordPress.

En privilégiant une méthode sécurisée comme le plugin SVG Support et en respectant les bonnes pratiques, vous combinerez le meilleur des deux mondes : des visuels d’une netteté impeccable et un site web rapide, sans compromettre sa sécurité.

Recevez gratuitement les prochains articles et accédez à des ressources exclusives. Plus de 20000 personnes l'ont fait, pourquoi pas vous ?

Je m'inscris

À propos de l'auteur

Équipe WPMarmite