Comment télécharger du SVG sur WordPress ?

Les webmasters et les concepteurs utilisent une variété de formats de fichiers multimédias. Un des formats les plus utilisés aujourd’hui est le SVG, un format vectoriel basé sur XML. Malheureusement, toutes les plateformes et tous les navigateurs ne sont tous pas compatibles avec le format SVG. Vous devez donc activer manuellement le format SVG.

Objectif

Cet article décrit les étapes à suivre pour télécharger des fichiers SVG sur WordPress à l’aide du plugin SVG Support. Il répond également aux questions relatives aux problèmes de sécurité associés à ce format de fichier multimédia particulier et explique pourquoi vous devriez utiliser SVG.

Prérequis

Pour télécharger du SVG sur WordPress, il vous faut :

• avoir accès au tableau de bord WordPress du site (méthode 1) ;
• avoir accès au compte FTP du site (méthode 2).

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Qu’est-ce que le SVG ?

Le SVG ou Scalable Vector Graphics est un format d’image graphique vectoriel basé sur du texte XML. Les formats d’image courants tels que JPG et PNG consistent en une collection de petits rectangles appelés pixels. Le format SVG s’appuie sur le langage de balisage XML pour décrire les attributs.

En janvier 2022, 42 % des sites web mondiaux utilisaient le SVG. En janvier 2021, seuls 29,4 % des sites web utilisaient le SVG, ce pourcentage est donc en augmentation comme pour le PNG et le JPG. Le SVG a été utilisé par Google, Wikipédia, YouTube et d’autres. Il est populaire sur les sites web à fort trafic.

Un autre avantage est que SVG est largement compatible avec tous les principaux navigateurs. 😎

Comment fonctionne le format SVG ?

Les graphiques vectoriels évolutifs utilisent XML pour générer des images vectorielles bidimensionnelles. Contrairement aux JPG et aux PNG, les graphiques vectoriels ne comportent pas de pixels. Au lieu de cela, leur comportement est décrit dans un fichier texte XML.

Les graphiques vectoriels évolutifs peuvent en conséquence être recherchés, indexés, scripts, édités et compressés comme du code. Par conséquent, ils peuvent être facilement créés par quiconque utilise un éditeur de texte ou un logiciel de graphisme vectoriel. 😎

Peut-on intégrer du SVG sur WordPress ?

WordPress n’affiche pas le format SVG par défaut en raison des risques de sécurité. Nous reviendrons plus tard sur les problèmes de sécurité liés au format SVG.

Voici le message d’erreur que vous recevrez lors du téléchargement de graphiques SVG sur WordPress.

L’intégration de SVG dans les fonctionnalités de base de WordPress fait l’objet d’un débat permanent. En revanche, il faut faire preuve d’un peu d’ingéniosité pour télécharger des images SVG sur WordPress, par exemple en utilisant d’autres moyens.

Pourquoi utiliser SVG sur WordPress ?

Malgré les problèmes de sécurité, de nombreux utilisateurs continuent à utiliser ce format d’image en raison de ses divers avantages. Cette section décrit les avantages de l’utilisation des fichiers SVG.

Évolutivité

Le format SVG sur WordPress étant un format d’image vectoriel, il conserve la même qualité quelle que soit la résolution de l’écran. Cet avantage se manifeste également en cas de zoom, c’est pourquoi de nombreuses personnes utilisent ce format d’image évolutif pour les icônes et les logos. 🤗

Taille de fichier réduite

Les fichiers SVG occupent moins d’espace de stockage sur votre site et se chargent plus rapidement que les images matricielles, ce qui permet d’améliorer les performances de votre site Web. 🚀

Référencement

Google indexe les fichiers SVG afin qu’ils apparaissent dans les recherches d’images de Google, ce qui améliore le référencement. Pour les images matricielles, l’optimisation est limitée aux attributs alt.

Basé sur le code

SVG peut être édité dans des éditeurs de texte et des logiciels d’édition de graphiques vectoriels ; les fichiers d’images SVG peuvent être optimisés pour les sites web et des animations peuvent être ajoutées pour rendre les graphiques interactifs.

SVG et sécurité dans WordPress

Comme SVG est essentiellement un fichier texte XML, il est plus vulnérable que les autres formats d’image. En tant que tel, il peut facilement être détourné avec du code malveillant pour mener des attaques Cross Site Scripting (XSS) et XML External Entity (XXE) sur votre système. 😩

Il convient de faire preuve de prudence lors de la manipulation des fichiers SVG et de leur ajout à WordPress. Heureusement, il existe de nombreuses façons de protéger votre site WordPress. 😀 Toutefois, vous devez être conscient des risques liés à l’utilisation de fichiers image SVG dans WordPress.

Pour minimiser les risques de sécurité, il faut toujours nettoyer les fichiers SVG avant de les télécharger dans la bibliothèque multimédia de WordPress. Ce processus supprime tout code douteux ou toute erreur et rend les images sûres pour votre site.

Les plugins SVG sur WordPress peuvent être utilisés pour assainir les téléchargements de fichiers SVG. Toutefois, il est recommandé de les désinfecter deux fois en utilisant le SVG Sanitizer Test, un outil en ligne créé par le développeur WordPress Darryll Doyle.

Une autre mesure de sécurité pour les sites WordPress consiste à limiter les téléchargements de SVG aux seuls utilisateurs de confiance. En étant conscient des problèmes de sécurité liés au format SVG, on évitera que des personnes obtiennent des fichiers SVG de sources douteuses.

Técharger des fichiers SVG en toute sécurité sur WordPress

Techniquement, il y a deux façons d’ajouter le support SVG à WordPress : en utilisant un plugin ou en l’activant manuellement. Peu importe la méthode choisie, il est fortement recommandé de limiter les privilèges de téléchargement aux administrateurs et aux utilisateurs de confiance afin de réduire le nombre de téléchargements malveillants.

Télécharger du SVG sur WordPress à l’aide d’un plugin

Le plugin SVG Support utilise une bibliothèque qui est automatiquement activée lorsqu’un fichier SVG est téléchargé dans la médiathèque. Il est également facile à mettre en place et gratuit à utiliser.

Voici les étapes à suivre pour configurer le SVG support :

Commencez par installer et activer le plugin.

Depuis le tableau de bord de WordPress, naviguez vers « Réglages->SVG Support ».

Cochez la case à côté de l’option Restreindre à l’administrateur pour restreindre les autorisations de téléchargement. Si vous souhaitez utiliser des fonctions avancées telles que le rendu SVG en ligne ou le style CSS, activez également l’option « Activer le mode avancé ».

Après avoir enregistré vos modifications, vous pouvez commencer à télécharger les fichiers SVG dans la médiathèque en toute sécurité.

Télécharger du SVG sur WordPress manuellement

Cette méthode consiste à modifier le fichier functions.php de votre site Web WordPress. Il est donc fortement recommandé qu’une personne familière avec PHP et ayant une bonne compréhension de la sécurité des fichiers SVG effectue cette procédure.

Connectez-vous à votre compte FTP via le gestionnaire de fichiers cPanel, le File Manager LWS Panel ou un logiciel client FTP de type FileZilla.

Rendez-vous dans le dossier « public_html -> wp-includes ». Faites défiler la page et trouvez le fichier « functions.php ».

Double-cliquez sur le fichier pour l’ouvrir et collez le code suivant.

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

Enregistrez les changements et essayez de télécharger le fichier SVG. Si le processus est réussi, la médiathèque devrait accepter le fichier à télécharger.

Conclusion

Les fichiers SVG présentent de nombreux avantages et sont de plus en plus populaires. Malheureusement, les fichiers texte XML sont sujets à l’injection de code, ce qui est la principale raison pour laquelle WordPress ne prend pas en charge le format SVG par défaut.

Il y a deux façons de procéder : utiliser un plugin WordPress ou modifier le fichier functions.php de votre site. En plus de restreindre les autorisations de téléchargement, vous pouvez sans crainte mettre en ligne des fichiers SVG dans la médiathèque de votre site WordPress.

Les SVG sont un excellent moyen d’optimiser l’apparence et les performances de votre site. Toutefois, il ne faut pas omettre les images PNG et JPG. Elles jouent un rôle essentiel dans les performances et le référencement de votre site.

Nous espérons que cet article vous a aidé à comprendre comment télécharger en toute sécurité des fichiers SVG sur WordPress. Qu’en pensez-vous ? Avez-vous déjà utilisé le format SVG sur un site WordPress ? Faites-le nous savoir dans les commentaires et partagez d’autres conseils et tutoriels gratuits ! 😀