Comment télécharger des fichiers SVG sur un site Web WordPress en toute sécurité ?

L'ajout d'images SVG aux sites WordPress au lieu des formats d'image traditionnels présente des avantages. Les images apparaissent plus claires et plus nettes sans compression ni perte de résolution.

Mais s’il présente un avantage par rapport aux autres formats d’image traditionnels, quel est le problème avec son utilisation à la place des images JPG ou PNG ?

Eh bien, la raison en est que WordPress ne prend pas en charge l’utilisation directe des fichiers SVG pour des raisons de sécurité.

Mais cela ne veut pas dire que vous ne pouvez pas les utiliser. Dans ce blog, nous vous présenterons les meilleures façons d’ajouter facilement des images SVG à votre site WordPress.

Qu’est-ce que SVG ?

SVG signifie Graphiques vectoriels évolutifs . Il s'agit d'un type de format d'image utilisé pour afficher des graphiques sur des sites Web. Contrairement aux formats d'image courants comme JPEG ou PNG, qui sont constitués de minuscules carrés de couleur (pixels), les SVG sont constitués de lignes, de formes et de texte. Cela les rend évolutifs , ce qui signifie qu'ils peuvent devenir plus grands ou plus petits sans perdre en qualité ni devenir flous.

Par exemple, lorsque vous zoomez sur une image PNG ou JPEG, vous remarquerez peut-être que l'image devient pixelisée (floue ou granuleuse). Mais avec un SVG, l’image reste nette et claire, quel que soit le zoom ou le redimensionnement.

Comment fonctionne le SVG ?

SVG fonctionne en utilisant des instructions textuelles (écrites en XML) pour décrire les formes et les chemins de l'image. Considérez-le comme un ensemble d'instructions de dessin simples pour votre navigateur Web.

Par exemple, si vous dessinez un cercle, un fichier SVG indiquera au navigateur quelque chose comme :

• "Dessinez ici un cercle, de cette taille et de cette couleur."

Comme il s'agit d'un format vectoriel (basé sur les mathématiques et la géométrie, et non sur les pixels), l'image peut être redimensionnée à n'importe quelle taille sans perdre sa qualité.

Principaux avantages du SVG :

• Évolutif : vous pouvez créer une image de n’importe quelle taille et elle sera toujours parfaite.
• Léger : les fichiers SVG sont souvent plus petits en termes de taille de fichier, ce qui accélère le chargement des sites Web.
• Modifiable : Comme il est basé sur du code, vous pouvez facilement modifier les couleurs ou les formes même après avoir créé l'image.
• Interactif : les SVG peuvent être animés ou rendus interactifs, ce qui est utile pour les concepteurs et développeurs Web.

Exemples de cas d'utilisation :

• Des logos et des icônes qui doivent être nets sur tous les appareils (des téléphones mobiles aux grands écrans).
• Des illustrations ou des graphiques simples qui ne nécessitent pas de détails complexes comme des photos.

Remarque : Si vous téléchargez un fichier SVG sur le site WordPress, un message d'erreur s'affichera comme indiqué ci-dessous :

Découvrez les méthodes ci-dessous :

Comment ajouter des images SVG sur le site WordPress ?

Vous trouverez ci-dessous quelques-unes des meilleures méthodes que vous pouvez suivre pour utiliser en toute sécurité les fichiers SVG sur le site WordPress.

Méthode 1 : ajouter des fichiers ou des images SVG dans WordPress à l'aide du plugin WPCode

Étape 1 : Installez le plugin WPCode

• Qu’est-ce que WPCode ? WPCode est un plugin qui vous aide à ajouter différents extraits de code utiles à votre site WordPress sans avoir besoin d'écrire du code vous-même. Ces extraits peuvent exécuter de nombreuses fonctions qui nécessiteraient autrement plusieurs plugins.
• Pour commencer, vous devez installer et activer le plugin WPCode. Si vous ne savez pas comment installer un plugin, vous pouvez suivre un guide de base, mais c'est généralement aussi simple que d'aller dans la section « Plugins » de votre tableau de bord WordPress, de rechercher WPCode et de cliquer sur « Installer » puis sur « Activer ». .»

Étape 2 : Accédez à la bibliothèque d'extraits de code WPCode

• Une fois le plugin activé, accédez à votre tableau de bord WordPress, puis accédez à Extraits de code » Ajouter un extrait .

• Dans la barre de recherche, tapez « svg » pour trouver l'extrait qui permet le téléchargement de fichiers SVG.
• Passez la souris sur l'option qui dit « Autoriser le téléchargement de fichiers SVG » et cliquez sur « Utiliser l'extrait » lorsque vous le voyez.

Étape 3 : activer l'extrait de code

• Après avoir sélectionné l'extrait, vous serez redirigé vers la page « Modifier l'extrait » . WPCode a déjà tout configuré pour vous, vous n'avez donc pas à vous soucier de changer quoi que ce soit.
• Tout ce que vous avez à faire est de basculer sur « Actif » , puis de cliquer sur le bouton « Mettre à jour » pour enregistrer les modifications.

Étape 4 : Téléchargez des fichiers SVG sur votre site WordPress

• Maintenant que l'extrait de code est actif, vous pouvez télécharger des fichiers SVG comme n'importe quel autre format d'image (comme JPG ou PNG) sans recevoir de message d'erreur de WordPress.

• Vous pouvez accéder à votre médiathèque et télécharger un fichier SVG, et cela fonctionnera sans problème sur votre site.

Étape 5 (Facultatif) : Autoriser d'autres utilisateurs à télécharger des fichiers SVG

• Par défaut, seuls les administrateurs (les utilisateurs de plus haut niveau) de votre site WordPress peuvent télécharger des fichiers SVG. Si vous souhaitez autoriser d'autres utilisateurs à télécharger des SVG, vous pouvez modifier l'extrait.
• Comment faire : Vous devez supprimer les lignes 14 à 16 dans l'extrait de code. Ces lignes limitent les téléchargements SVG aux administrateurs uniquement. Ou bien, vous pouvez « commenter » la restriction en ajoutant deux barres obliques (//) au début des lignes 11 à 13, ce qui obligera WordPress à ignorer ces lignes.

• Une fois que vous avez fait cela, cliquez à nouveau sur « Mettre à jour » pour enregistrer vos modifications.

Méthode 2 : Téléchargez des fichiers ou des images SVG à l'aide du plug-in de support SVG

Étape 1 : Installez le plugin de support SVG

• Qu'est-ce que la prise en charge SVG ? SVG Support est un plugin qui vous permet de télécharger et d'afficher des fichiers SVG sur votre site WordPress. Il vous permet également de contrôler qui peut télécharger des SVG et vous permet même d'utiliser certaines fonctionnalités avancées.
• Pour commencer, vous devez installer et activer le plugin SVG Support . Si vous ne savez pas comment procéder, suivez un guide simple, mais généralement, vous accédez à la section « Plugins » de votre tableau de bord WordPress, recherchez « Support SVG », cliquez sur « Installer » , puis sur « Activer » .

Étape 2 : configurer les paramètres du plugin

• Après avoir activé le plugin, accédez à votre tableau de bord WordPress et accédez à Paramètres »Support SVG .

• Ici, vous verrez quelques options pour configurer la façon dont les fichiers SVG sont gérés.

Étape 3 : restreindre les téléchargements SVG aux administrateurs

• Pour rendre votre site Web plus sécurisé, vous souhaiterez peut-être restreindre les téléchargements SVG afin que seuls les administrateurs (les utilisateurs de plus haut niveau) puissent télécharger des SVG. Pour ce faire, cochez simplement la case à côté de « Restreindre aux administrateurs ? option.
• Cela empêchera les autres utilisateurs (tels que les éditeurs ou les auteurs) de télécharger des fichiers SVG.

Étape 4 (Facultatif) : Activer le mode avancé pour des fonctionnalités supplémentaires

• Le mode avancé vous offre des options supplémentaires, telles que l'autorisation des animations CSS ou du rendu SVG en ligne , qui peuvent rendre vos SVG interactifs ou animés.
• Si vous souhaitez utiliser ces fonctionnalités avancées, cochez simplement l'option « Mode avancé » .
• Ne vous inquiétez pas si vous n'êtes pas sûr de ce que sont ces fonctionnalités avancées : si vous n'en avez pas besoin, vous pouvez ignorer cette étape.

Étape 5 : Enregistrez vos paramètres

• Une fois que vous avez configuré les paramètres à votre guise, cliquez sur le bouton « Enregistrer les modifications » pour les appliquer.

Étape 6 : Télécharger des fichiers SVG dans une publication ou une page

• Maintenant que le plugin SVG Support est configuré, vous pouvez télécharger des fichiers SVG sur vos publications ou pages comme n'importe quel autre fichier image.
• Pour ce faire, créez une nouvelle publication ou modifiez une publication existante. Dans l'éditeur de publication, ajoutez un bloc d'image (comme vous le feriez pour un JPG ou un PNG) et téléchargez votre fichier SVG.

Méthode 3 : Téléchargez des images ou des fichiers SVG à l’aide du plug-in Safe SVG

Étape 1 : Installez le plugin Safe SVG

• Qu’est-ce que le SVG sécurisé ? Safe SVG est un plugin qui vous permet de télécharger des fichiers SVG sur WordPress tout en les nettoyant automatiquement. La désinfection signifie nettoyer le fichier SVG pour supprimer tout code potentiellement dangereux, le rendant ainsi plus sûr pour votre site Web.
• Pour commencer, vous devez installer et activer le plugin Safe SVG . Si vous ne savez pas comment procéder, suivez un guide simple, mais généralement, vous accédez à la section « Plugins » de votre tableau de bord WordPress, recherchez « Safe SVG », puis cliquez sur « Installer » et « Activer » .

Étape 2 : Commencez à télécharger des fichiers SVG

• Bonne nouvelle : Une fois activé, le plugin fonctionne automatiquement ! Il n'y a aucun paramètre que vous devez configurer.
• Vous pouvez immédiatement commencer à télécharger des fichiers SVG sur votre bibliothèque multimédia WordPress, tout comme vous le feriez pour n’importe quel autre format d’image (tel que PNG ou JPG).

Étape 3 : Soyez conscient des autorisations des utilisateurs

• Par défaut, la version gratuite de Safe SVG permet à tout utilisateur capable d'écrire des articles (comme les auteurs ou les éditeurs) de télécharger des fichiers SVG. Cela peut être un problème si vous souhaitez plus de contrôle sur qui peut télécharger des SVG, car cela augmente le risque de téléchargements nuisibles.

Étape 4 (Facultatif) : Mise à niveau vers la version Premium

• Si vous souhaitez contrôler qui peut télécharger des fichiers SVG (par exemple, en le limitant aux seuls administrateurs), vous devrez acheter la version premium du plugin Safe SVG. La version premium vous permet de gérer qui peut télécharger des SVG, vous donnant ainsi plus de contrôle sur la sécurité.

Conclusion

L’utilisation de fichiers SVG présente des avantages et peut constituer un outil puissant pour améliorer la qualité visuelle et l’évolutivité des images sur votre site WordPress.

Cependant, en raison des risques de sécurité potentiels, il est important de gérer les téléchargements SVG en toute sécurité. Heureusement, avec les bons plugins, vous pouvez utiliser SVG sans compromettre la sécurité de votre site.

Nous espérons que cet article de blog vous a aidé à apprendre comment ajouter des images SVG à votre site WordPress. Si vous avez des questions ou des suggestions, veuillez les écrire dans la section commentaires ci-dessous.

Rahul

Rahul Kumar est un passionné du Web et un stratège de contenu spécialisé dans WordPress et l'hébergement Web. Fort de plusieurs années d'expérience et d'un engagement à rester au courant des tendances du secteur, il crée des stratégies en ligne efficaces qui génèrent du trafic, stimulent l'engagement et augmentent les conversions. L'attention portée aux détails et la capacité de Rahul à créer un contenu convaincant font de lui un atout précieux pour toute marque cherchant à améliorer sa présence en ligne.