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

L'ajout de fichiers SVG à votre site WordPress peut rendre vos images nettes et claires.

Cependant, bien que WordPress vous permette de télécharger de nombreux types de fichiers, tels que des images, de l'audio et de la vidéo, il ne prend pas en charge les fichiers SVG nativement.

C'est parce que les fichiers SVG peuvent présenter des risques de sécurité. Mais ne vous inquiétez pas. Il existe des moyens sûrs d'utiliser les SVG.

Dans cet article, nous allons vous montrer comment ajouter des fichiers image SVG à WordPress facilement et en toute sécurité.

Qu'est-ce que le SVG ?

SVG, ou Scalable Vector Graphics (graphiques vectoriels évolutifs), est un format de fichier qui définit des graphiques vectoriels à l'aide du langage de balisage XML. Son principal avantage est qu'il vous permet d'agrandir les images sans perdre en qualité ou sans aucune pixellisation.

Comment fonctionne le SVG ?

Scalable Vector Graphics (SVG) est une technologie qui affiche des dessins bidimensionnels à l'aide de XML. Il est différent des formats d'image couramment utilisés comme PNG, GIF ou JPG.

Si vous prenez un fichier image PNG ou JPG et que vous zoomez, vous remarquerez que l'image devient floue et pixellisée.

Les graphiques vectoriels n'utilisent pas de pixels.

Au lieu de cela, ils utilisent une carte bidimensionnelle qui définit le graphique que vous visualisez comme des coordonnées. L'image ne se pixellise pas lorsque vous zoomez car elle ne le peut tout simplement pas.

Cela vous permet de redimensionner des graphiques vectoriels sans perdre en qualité. Plus important encore, les images SVG peuvent avoir une taille de fichier beaucoup plus petite que les fichiers PNG ou JPG, ce qui en fait un excellent choix pour le format d'image.

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

Cependant, les fichiers SVG peuvent être un peu dangereux. C'est pourquoi WordPress ne prend pas en charge les téléchargements de fichiers SVG par défaut.

Si vous téléchargez 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 d'édition SVG analyse le langage de balisage XML pour afficher le résultat à l'écran.

Cependant, cela expose votre site Web à d'éventuelles vulnérabilités XML. Il peut être utilisé pour obtenir un accès non autorisé aux données des utilisateurs ou déclencher des attaques par force brute ou des attaques par script intersites.

Les méthodes que nous partagerons dans cet article tenteront d'assainir les fichiers SVG pour améliorer leur sécurité. Cependant, ces plugins ne peuvent pas totalement empêcher le code malveillant d'être téléchargé ou injecté.

La meilleure solution est d'utiliser uniquement des fichiers SVG créés par des sources fiables et de restreindre les téléchargements de SVG aux utilisateurs de confiance. Pour en savoir plus sur la sécurité, vous pouvez consulter notre guide complet de la sécurité WordPress pour débutants.

Dans cette optique, nous vous montrerons comment utiliser facilement et en toute sécurité les fichiers SVG dans WordPress en 3 méthodes. Utilisez simplement les liens rapides ci-dessous si vous êtes intéressé par une méthode particulière :

• Méthode 1. Autoriser les fichiers SVG dans WordPress en utilisant WPCode (Recommandé)
• Méthode 2. Télécharger des fichiers SVG dans WordPress en utilisant SVG Support
• Méthode 3. Télécharger des fichiers SVG dans WordPress en utilisant Safe SVG

Prêt ? Commençons par un tutoriel vidéo.

Tutoriel vidéo

S'abonner à WPBeginner

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

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

La façon la plus simple d'autoriser les téléchargements SVG sur WordPress en toute sécurité est d'utiliser WPCode, le plugin d'extraits de code le plus puissant disponible.

WPCode dispose d'une large bibliothèque d'extraits de code préconfigurés qui peuvent remplacer de nombreux plugins à usage unique sur votre site. Il inclut les extraits pour désactiver les pages de pièces jointes, conserver l'éditeur d'articles classique, et autoriser les téléchargements de fichiers SVG, le tout sans les risques de casser votre site Web.

Pour commencer, vous devrez installer et activer le plugin gratuit WPCode. Pour des instructions détaillées, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Une fois activé, vous voudrez naviguer vers Extraits de code » Ajouter un extrait dans votre panneau d'administration WordPress. Recherchez simplement « svg » et survolez « Autoriser le téléchargement de fichiers SVG » avec votre souris.

Cliquez sur « Utiliser l'extrait » lorsqu'il apparaît.

Ensuite, vous arriverez sur la page « Modifier l'extrait », où WPCode a déjà configuré tous les paramètres nécessaires à l'exécution du code.

Tout ce que vous avez à faire est de cliquer sur le commutateur sur « Actif », puis d'appuyer sur le bouton « Mettre à jour ».

Désormais, vous pouvez télécharger des fichiers SVG sans que WordPress ne vous affiche d'erreur ou de message d'avertissement.

Vous pouvez ensuite le traiter comme n'importe quelle autre image sur votre site Web WordPress.

Par défaut, l'extrait WPCode n'autorise que les utilisateurs ayant le rôle « Administrateur » à ajouter des SVG à WordPress.

Vous pouvez également accorder la permission à tous les autres rôles d'utilisateur en supprimant les lignes 14 à 16 de l'extrait de code. Ensuite, vous pouvez les « commenter » en ajoutant deux barres obliques, « // », au début des lignes 11 à 13, ce qui les rendra d'une couleur beige clair.

WPCode n'exécutera aucune partie de l'extrait qu'il considère comme un commentaire plutôt que comme du code. Vous pouvez voir cet exemple dans l'image ci-dessous.

Dans tous les cas, une fois le code supprimé, tous les utilisateurs pourront télécharger des fichiers SVG sur votre site. Assurez-vous simplement de cliquer sur « Mettre à jour » pour enregistrer toutes les modifications que vous apportez.

Méthode 2. Télécharger des fichiers SVG dans WordPress en utilisant SVG Support

Cette deuxième méthode utilise le plugin SVG Support. Il vous permet d'afficher des SVG dans les articles et les pages WordPress et de contrôler qui peut les télécharger.

Tout d'abord, vous devez installer et activer le plugin SVG Support. Pour plus de détails, vous pouvez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Lors de l'activation, vous voudrez vous rendre dans Paramètres » Support SVG pour configurer les paramètres du plugin.

Sur la page des paramètres, cochez simplement la case à côté de l'option « Restreindre aux administrateurs ? ». Cela permettra uniquement à un administrateur du site de télécharger des fichiers SVG dans WordPress.

L'étape suivante consiste à activer le mode avancé. Vous n'avez besoin de cocher cette option que si vous souhaitez utiliser des fonctionnalités avancées telles que les animations CSS et le rendu SVG en ligne.

N'oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour sauvegarder vos paramètres.

Vous pouvez maintenant créer un nouveau message ou modifier un message existant. Dans l'éditeur de message, vous pourrez télécharger votre fichier SVG comme vous le feriez pour tout autre fichier image.

Ajoutez simplement un bloc d'image à l'éditeur, puis téléchargez le fichier SVG.

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

Cette méthode utilise également un plugin et vous permet de nettoyer les fichiers SVG téléchargés sur WordPress.

La première chose à faire est d'installer et d'activer le plugin Safe SVG. Pour plus de détails, veuillez consulter notre guide étape par étape sur comment installer un plugin WordPress.

Le plugin fonctionne dès l'installation, et il n'y a aucun réglage à configurer. Vous pouvez simplement commencer à téléverser des fichiers SVG.

L'inconvénient est que ce plugin autorise le téléversement de SVG par tous les utilisateurs qui peuvent écrire des articles sur votre site WordPress. Pour contrôler qui peut téléverser des fichiers, vous devez 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é dans WordPress. Vous pourriez également consulter notre guide sur comment ajouter un widget à l'en-tête de votre site web et notre sélection d'experts de fragments de code utiles pour les débutants.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.