Comment ajouter des fichiers images SVG dans WordPress (3 solutions simples)

Voulez-vous ajouter des fichiers SVG à votre site WordPress ?

Par défaut, WordPress vous permet de téléverser presque tous les formats de fichiers image, audio et vidéo courants. Cependant, le format SVG n’en fait pas partie. En effet, le format d’image pose des problèmes de sécurité potentiels, mais il existe des moyens sûrs de l’utiliser.

Dans cet article, nous allons vous afficher comment ajouter facilement et en toute sécurité des SVG dans WordPress.

Qu’est-ce que le SVG ?

SVG ou Scalable Vector Graphics est un format de fichier qui définit des graphiques vectoriels à l’aide du langage de balisage XML. Le principal avantage du SVG est qu’il vous permet d’agrandir les images sans perte de qualité ni pixellisation.

Comment fonctionne le SVG ?

Le SVG (Scalable Vector Graphics) est une technologie qui permet d’afficher des dessins en deux dimensions à l’aide de XML. Ils sont différents des formats d’image couramment utilisés tels que PNG, GIF ou JPG.

Si vous prenez un fichier image PNG ou JPG et que vous effectuez un zoom avant, vous remarquerez que l’image commence à se brouiller et à se pixelliser.

Les graphiques vectoriels n’utilisent pas de pixels.

Au lieu de cela, ils utilisent une carte bidimensionnelle qui définit le graphique que vous voyez sous forme de coordonnées. Lorsque vous effectuez un zoom avant, l’image ne se pixellise pas, car c’est tout simplement impossible.

Cela vous permet d’agrandir les graphiques vectoriels sans perdre en qualité. Plus important encore, les images SVG peuvent être beaucoup moins volumineuses qu’un fichier PNG ou JPG.

Les graphiques vectoriels sont couramment utilisés pour les icônes, les polices d’icônes, les logos de sites et les images de marque. Vous pouvez ajouter des fichiers SVG à WordPress pour le logo de votre entreprise, des icônes ou d’autres graphiques.

Aussi sympathiques qu’ils puissent paraître, les fichiers SVG peuvent être peu sûrs. C’est pourquoi WordPress ne supporte pas les outils de téléversement de fichiers SVG par défaut.

Si vous téléversez une image SVG dans WordPress, vous verrez le message d’erreur suivant :

Désolé, ce type de fichier n’est pas autorisé pour des raisons de sécurité.

Problèmes de sécurité concernant les SVG dans WordPress

Les fichiers SVG contiennent du code dans le langage de balisage XML qui est similaire au HTML. Votre navigateur ou votre logiciel de modification SVG analyse le langage de balisage XML pour afficher le résultat à l’écran.

Cependant, cela ouvre votre site à d’éventuelles vulnérabilités XML. Elles peuvent être utilisées pour obtenir un accès non autorisé aux données des comptes, déclencher des attaques par force brute ou des attaques par scripts intersites.

Les méthodes que nous allons partager dans cet article tentent de normaliser les fichiers SVG afin d’améliorer leur sécurité. Cependant, ces extensions ne peuvent pas totalement empêcher le téléversement ou l’injection de codes malveillants.

La meilleure solution consiste à utiliser uniquement des fichiers SVG créés par des sources fiables et à limiter les outils de téléversement de SVG aux seuls utilisateurs/utilisatrices de confiance.

Pour en savoir plus sur la sécurité, consultez notre guide complet de sécurité WordPress pour les débutants.

Ceci étant dit, voyons comment utiliser facilement et en toute sécurité des fichiers SVG dans WordPress en utilisant l’une des 3 méthodes suivantes.

Tutoriel vidéo

Si vous préférez des instructions écrites, continuez à lire.

Méthode 1. Permettre les fichiers SVG dans WordPress en utilisant WPCode (Recommandé)

Le moyen le plus simple et le plus facile de permettre des téléversements SVG en toute sécurité sur WordPress est d’utiliser WPCode, l’extension d’extraits de code la plus puissante qui soit.

WPCode est livré avec une grande bibliothèque d’extraits de code préconfigurés qui peuvent remplacer de nombreuses extensions à usage unique sur votre site, qu’il s’agisse de désactiver les pages de pièces jointes, d’utiliser l’éditeur de posts classique ou de permettre le téléversement de fichiers SVG.

Tout d’abord, vous devrez installer et activer l’extension gratuite WPCode. Pour des instructions détaillées, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

Une fois activé, vous devez naviguer vers  » Code Snippets  » Add Snippet dans votre panneau d’administration WordPress. Recherchez simplement  » svg  » et survolez votre souris sur  » Permettre l’outil de téléversement des fichiers SVG « .

Vous pouvez ensuite cliquer sur « Utiliser l’extrait ».

Vous accédez ensuite à la page « Modifier l’extrait », où WPCode a déjà configuré tous les réglages dont le code a besoin pour s’exécuter.

Il vous suffit de cliquer sur le bouton « Actif » et d’appuyer sur le bouton « Mise à jour ».

Désormais, vous pourrez téléverser des fichiers SVG sans que WordPress ne vous envoie un message d’erreur ou d’avertissement.

Vous pouvez ensuite la traiter comme n’importe quelle autre image sur votre site WordPress.

Par défaut, l’extrait WPCode permet uniquement aux utilisateurs/utilisatrices ayant le rôle d’administrateur/administratrice d’ajouter des SVG à WordPress.

Vous pouvez également accorder le droit à tous les autres rôles d’utilisateur en supprimant simplement les lignes 14 à 16 de l’extrait de code que vous voyez dans l’image ci-dessous.

Vous pouvez également les « commenter » en ajoutant deux barres obliques « // » au début de chacune de ces lignes, ce qui leur donne une couleur havane claire. WPCode n’exécutera aucune partie de l’extrait qu’il considère comme un commentaire plutôt que comme du code.

Vous pouvez en voir un exemple dans les lignes 11 à 13 de l’image ci-dessous.

Quoi qu’il en soit, une fois le code retiré, tous les utilisateurs/utilisatrices pourront téléverser des fichiers SVG sur votre site WordPress. Confirmez simplement que vous avez cliqué sur « Mettre à jour » pour enregistrer toutes les modifications que vous avez apportées.

Méthode 2. Téléverser des fichiers SVG dans WordPress en utilisant le support SVG

Cette méthode utilise l’extension SVG Support et vous permet d’afficher des SVG en ligne dans les publications et les pages de WordPress, ainsi que de contrôler qui a le droit de les téléverser.

Tout d’abord, vous devez installer et activer l’extension SVG Support. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Une fois activé, vous devez visiter la page Réglages  » SVG Support pour définir les paramètres de l’extension.

Sur la page des Réglages, vous devez cocher la case à côté de l’option « Restreindre aux administrateurs/administratrices ». Cela permettra uniquement à un administrateur/administratrice du site de téléverser des fichiers SVG dans WordPress.

L’option suivante consiste à activer le mode avancé. Vous devez uniquement cocher cette option si vous souhaitez utiliser des fonctionnalités avant comme les animations CSS et le rendu SVG en ligne.

N’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.

Vous pouvez maintenant créer une nouvelle publication ou modifier une publication existante. Dans l’éditeur de publication, vous téléverserez votre fichier SVG comme vous le feriez pour n’importe quel autre fichier image. Il suffit d’ajouter un bloc d’images dans l’éditeur et de téléverser le fichier SVG.

Vous pourrez désormais téléverser et intégrer des fichiers SVG dans WordPress.

Méthode 3. Téléverser des fichiers SVG dans WordPress en utilisant Safe SVG

Cette méthode utilise également une extension et vous permet de nettoyer les fichiers SVG téléversés sur WordPress.

La première chose à faire est d’installer et d’activer l’extension Safe SVG. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.

L’extension est prête à l’emploi et il n’y a aucun réglage à effectuer. Vous pouvez simplement commencer à téléverser des fichiers SVG.

L’inconvénient est que cette extension permet le téléversement de SVG par tous les utilisateurs qui peuvent écrire des publications sur votre site WordPress. Afin de commander qui peut téléverser des fichiers, vous devrez acheter la version premium du plugin.

Nous espérons que cet article vous a aidé à apprendre comment ajouter des fichiers SVG en toute sécurité sur WordPress. Vous pouvez également consulter notre article sur la façon de corriger les problèmes d’image les plus courants sur WordPress et les meilleurs plugins et outils SEO.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.