{"id":26279,"date":"2023-09-03T19:37:44","date_gmt":"2023-09-03T19:37:44","guid":{"rendered":"\/tutoriels\/?p=26279"},"modified":"2025-03-03T23:18:47","modified_gmt":"2025-03-03T23:18:47","slug":"televerser-fichier-svg-wordpress","status":"publish","type":"post","link":"\/fr\/tutoriels\/televerser-fichier-svg-wordpress\/","title":{"rendered":"Comment t\u00e9l\u00e9verser un fichier SVG dans WordPress : 2 m\u00e9thodes s\u00fbres"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Les administrateurs et les <strong>concepteurs de sites web<\/strong> sont amen&eacute;s &agrave; utiliser diff&eacute;rents formats de fichiers multim&eacute;dias dans leur travail. Aujourd&rsquo;hui, l&rsquo;un des formats les plus populaires est le SVG, une image vectorielle bas&eacute;e sur XML. Malheureusement, tous les navigateurs et toutes les plateformes ne supportent pas le SVG, et vous devrez donc l&rsquo;activer manuellement au pr&eacute;alable.<\/p><p class=\"wp-block-paragraph\">Cet article couvre les &eacute;tapes du t&eacute;l&eacute;chargement de fichiers SVG sur un site WordPress &agrave; l&rsquo;aide du plugin <strong>SVG Support<\/strong>. Nous r&eacute;pondrons &eacute;galement &agrave; certaines questions concernant les probl&egrave;mes de s&eacute;curit&eacute; li&eacute;s &agrave; ce format de fichier m&eacute;dia particulier et les raisons pour lesquelles le SVG vaut la peine d&rsquo;&ecirc;tre utilis&eacute;.<\/p><p class=\"wp-block-paragraph\">Pour commencer, familiarisons-nous avec le SVG et son fonctionnement.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-Website-in-9-Easy-Steps-FR.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41463\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Build-website-FR-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-qu-est-ce-que-le-svg\">Qu&rsquo;est-ce que le SVG ?<\/h2><p class=\"wp-block-paragraph\">Le &laquo; Scalable Vector Graphics &raquo; (SVG) est un format d&rsquo;image vectorielle bas&eacute; sur du texte XML. Alors que les formats d&rsquo;image courants tels que JPG et PNG sont constitu&eacute;s de tonnes de petits carr&eacute;s appel&eacute;s pixels, ce format s&rsquo;appuie sur le langage de balisage XML pour d&eacute;crire les attributs de l&rsquo;image.<\/p><p class=\"wp-block-paragraph\">En janvier 2022, <a href=\"https:\/\/w3techs.com\/technologies\/details\/im-svg\" target=\"_blank\" rel=\"noopener\"><strong>42 % des sites web du monde entier<\/strong><\/a> utilisaient des fichiers SVG. Ce pourcentage a augment&eacute; depuis janvier 2021, date &agrave; laquelle seuls <a href=\"https:\/\/w3techs.com\/technologies\/history_overview\/image_format\/all\" target=\"_blank\" rel=\"noopener\"><strong>29,4 % des sites web<\/strong><\/a> les utilisaient. &Agrave; l&rsquo;instar des formats PNG et JPG, le SVG est populaire parmi les sites internet &agrave; fort trafic tels que Google, Wikipedia et YouTube.<\/p><p class=\"wp-block-paragraph\">Un autre avantage du format SVG est qu&rsquo;il est largement pris en charge par les principaux navigateurs. Vous trouverez ci-dessous une <a href=\"https:\/\/caniuse.com\/svg\" target=\"_blank\" rel=\"noopener\"><strong>liste des navigateurs<\/strong><\/a> qui prennent en charge le format de fichier SVG :<\/p><figure tabindex=\"0\" class=\"wp-block-table\"><table><tbody><tr><td><strong>Navigateur<\/strong><\/td><td><strong>Prise en charge partielle<\/strong><\/td><td><strong>Prise en charge compl&egrave;te<\/strong><\/td><\/tr><tr><td>Edge<\/td><td>&ndash;<\/td><td>Version 12-18, 79-96, 97<\/td><\/tr><tr><td>Firefox<\/td><td>Version 2<\/td><td>Version 3-94, 95, 96-97<\/td><\/tr><tr><td>Firefox for Android<\/td><td>&ndash;<\/td><td>Version 95<\/td><\/tr><tr><td>Chrome<\/td><td>&ndash;<\/td><td>Version 4-96, 97, 98-100<\/td><\/tr><tr><td>Chrome for Android<\/td><td>&ndash;<\/td><td>Version 96<\/td><\/tr><tr><td>Safari<\/td><td>Version 3.1<\/td><td>Version 3.2-15.1, 15.2, TP<\/td><\/tr><tr><td>Opera<\/td><td>&ndash;<\/td><td>Version 10-81, 82<\/td><\/tr><tr><td>Opera Mini<\/td><td>&ndash;<\/td><td>All versions<\/td><\/tr><tr><td>Opera Mobile<\/td><td>&ndash;<\/td><td>Version 12-12.1, 64<\/td><\/tr><tr><td>Safari on iOS<\/td><td>&ndash;<\/td><td>Version 3.2-15.1, 15.2<\/td><\/tr><tr><td>Android Browser<\/td><td>Version 3-4.3<\/td><td>Version 4.4-4.4.4, 96<\/td><\/tr><tr><td>UC Browser for Android<\/td><td>&ndash;<\/td><td>Version 12.12<\/td><\/tr><tr><td>Samsung Internet<\/td><td>&ndash;<\/td><td>Version 4-14.0, 15.0<\/td><\/tr><tr><td>QQ Browser<\/td><td>&ndash;<\/td><td>Version 10.4<\/td><\/tr><tr><td>Baidu Browser<\/td><td>&ndash;<\/td><td>Version 7.12<\/td><\/tr><tr><td>KaiOS Browser<\/td><td>&ndash;<\/td><td>Version 2.5<\/td><\/tr><\/tbody><\/table><\/figure><h2 class=\"wp-block-heading\" id=\"h-comment-fonctionne-un-fichier-svg\">Comment fonctionne un fichier SVG ?<\/h2><p class=\"wp-block-paragraph\">Les &laquo; graphiques vectoriels &eacute;volutifs &raquo; (Scalable Vector Graphics, SVG) utilisent le langage XML pour produire des images vectorielles bidimensionnelles. Contrairement aux formats JPG et PNG, les images vectorielles ne comportent pas de pixels. Leur comportement est d&eacute;crit dans des fichiers texte XML.<\/p><p class=\"wp-block-paragraph\">C&rsquo;est pourquoi les graphiques vectoriels &eacute;volutifs peuvent &ecirc;tre recherch&eacute;s, index&eacute;s, script&eacute;s, &eacute;dit&eacute;s et compress&eacute;s comme du code. Tout le monde peut donc les cr&eacute;er &agrave; l&rsquo;aide d&rsquo;un &eacute;diteur de texte ou d&rsquo;un logiciel de graphisme vectoriel.<\/p><h2 class=\"wp-block-heading\" id=\"h-wordpress-supporte-t-il-les-svg\">WordPress supporte-t-il les SVG ?<\/h2><p class=\"wp-block-paragraph\">WordPress ne supporte pas le SVG par d&eacute;faut en raison des risques de s&eacute;curit&eacute; qu&rsquo;il impose &ndash; nous couvrirons les probl&egrave;mes de s&eacute;curit&eacute; entourant le SVG plus en profondeur plus tard.<\/p><p class=\"wp-block-paragraph\">Voici le message d&rsquo;erreur qui s&rsquo;affiche lorsque vous t&eacute;l&eacute;chargez un fichier SVG sur un site web WordPress :<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"147\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/Capture-decran-2023-09-06-150703.png\/w=1024,h=1024,fit=scale-down\" alt=\"Le message d'erreur qui appara&icirc;t lorsqu'un utilisateur tente de t&eacute;l&eacute;verser un fichier SVG sur un site WordPress\" class=\"wp-image-26339\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/Capture-decran-2023-09-06-150703.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/Capture-decran-2023-09-06-150703.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/Capture-decran-2023-09-06-150703.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/Capture-decran-2023-09-06-150703.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">La question d&rsquo;int&eacute;grer le svg dans les fonctionnalit&eacute;s de base de WordPress est en cours de d&eacute;bat. En attendant, nous devons donc faire preuve de cr&eacute;ativit&eacute; et utiliser d&rsquo;autres solutions pour t&eacute;l&eacute;charger des images SVG sur WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-pourquoi-utiliser-un-svg-sur-wordpress\">Pourquoi utiliser un SVG sur WordPress ?<\/h2><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"768\" height=\"274\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/svg-comparaison.png\/public\" alt=\"Comparaison de SVG simples et complexes\" class=\"wp-image-37055\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/svg-comparaison.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/svg-comparaison.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/svg-comparaison.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Malgr&eacute; les probl&egrave;mes de s&eacute;curit&eacute;, de nombreux utilisateurs continuent d&rsquo;utiliser ce format d&rsquo;image car il pr&eacute;sente de nombreux avantages. Voici quelques-uns des avantages de l&rsquo;utilisation des fichiers SVG :<\/p><ul class=\"wp-block-list\">\n<li><strong>L&rsquo;&eacute;volutivit&eacute; <\/strong>&#8210; SVG &eacute;tant un format d&rsquo;image vectorielle, les fichiers SVG conservent la m&ecirc;me qualit&eacute; quelle que soit la r&eacute;solution de l&rsquo;&eacute;cran. Cet avantage est &eacute;galement pr&eacute;sent apr&egrave;s l&rsquo;agrandissement, ce qui explique pourquoi de nombreuses personnes utilisent ce format d&rsquo;image &eacute;volutif pour les ic&ocirc;nes et les logos.<\/li>\n\n\n\n<li><strong>Taille de fichier r&eacute;duite<\/strong> : l&rsquo;utilisation de fichiers SVG permet d&rsquo;<strong>am&eacute;liorer plus facilement les performances des sites web<\/strong> avec des images mises &agrave; l&rsquo;&eacute;chelle, car ils occupent moins d&rsquo;espace de stockage sur le web et se chargent beaucoup plus rapidement que les images matricielles.<\/li>\n\n\n\n<li><strong>Adapt&eacute; au r&eacute;f&eacute;rencemen<\/strong>t &rlm;: Google indexe les fichiers SVG, ce qui leur permet d&rsquo;appara&icirc;tre dans Google Image Search et d&rsquo;am&eacute;liorer vos efforts de r&eacute;f&eacute;rencement ; alors qu&rsquo;avec les images matricielles, vous &ecirc;tes limit&eacute; &agrave; l&rsquo;optimisation de leurs attributs alt.<\/li>\n\n\n\n<li><strong>Bas&eacute; sur le code<\/strong> : les SVG sont modifiables &agrave; l&rsquo;aide d&rsquo;un &eacute;diteur de texte ou d&rsquo;un logiciel d&rsquo;&eacute;dition de graphiques vectoriels. Vous pouvez optimiser les fichiers images SVG pour les sites web ou m&ecirc;me ajouter des animations pour rendre les graphiques interactifs.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-les-svg-wordpress-et-la-securite\">Les SVG WordPress et la s&eacute;curit&eacute;<\/h2><p class=\"wp-block-paragraph\">Le SVG &eacute;tant essentiellement un fichier texte XML, il pr&eacute;sente des vuln&eacute;rabilit&eacute;s exploitables qui n&rsquo;affectent pas les autres formats d&rsquo;image. Par cons&eacute;quent, des personnes peuvent facilement le d&eacute;tourner avec un code malveillant pour lancer des attaques de type &laquo; cross-site scripting &raquo; (XSS) et &laquo; XML external entity &raquo; (XXE) sur votre syst&egrave;me.<\/p><p class=\"wp-block-paragraph\">C&rsquo;est pourquoi vous devez &ecirc;tre prudent lorsque vous manipulez des fichiers SVG et que vous les ajoutez &agrave; WordPress.<\/p><p class=\"wp-block-paragraph\">Pour minimiser les risques de s&eacute;curit&eacute;, veillez &agrave; assainir les fichiers SVG avant de les t&eacute;l&eacute;charger dans la biblioth&egrave;que de m&eacute;dias de WordPress. Ce processus supprime le code suspect et les erreurs, ce qui rend les images s&ucirc;res pour votre site.<\/p><p class=\"wp-block-paragraph\">Vous pouvez assainir les fichiers SVG &agrave; l&rsquo;aide d&rsquo;un plugin SVG &ndash; nous verrons les &eacute;tapes &agrave; suivre plus loin. Toutefois, nous vous recommandons de proc&eacute;der &agrave; une double v&eacute;rification &agrave; l&rsquo;aide du <a href=\"https:\/\/svg.enshrined.co.uk\/\" target=\"_blank\" rel=\"noopener\"><strong>SVG Sanitizer Test<\/strong><\/a> &#8210; il s&rsquo;agit d&rsquo;un outil en ligne con&ccedil;u par Darryll Doyle, un d&eacute;veloppeur WordPress.<\/p><p class=\"wp-block-paragraph\">Une autre fa&ccedil;on de <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/securiser-wordpress\/\"><strong>s&eacute;curiser votre site WordPress<\/strong><\/a> est de limiter les t&eacute;l&eacute;chargements de SVG aux seuls utilisateurs de confiance. Les utilisateurs s&eacute;lectionn&eacute;s doivent &ecirc;tre conscients des probl&egrave;mes de s&eacute;curit&eacute; li&eacute;s au format SVG, ce qui les dissuadera d&rsquo;obtenir des fichiers SVG aupr&egrave;s de sources douteuses.<\/p><h2 class=\"wp-block-heading\" id=\"h-comment-telecharger-des-fichiers-svg-sur-wordpress-en-2-methodes-securisees\">Comment t&eacute;l&eacute;charger des fichiers SVG sur WordPress en 2 m&eacute;thodes s&eacute;curis&eacute;es<\/h2><p class=\"wp-block-paragraph\">Techniquement, il y a deux fa&ccedil;ons d&rsquo;ajouter le support SVG &agrave; WordPress &ndash; en utilisant un plugin ou en l&rsquo;activant manuellement. Quel que soit votre choix, nous vous sugg&eacute;rons fortement de limiter les privil&egrave;ges de t&eacute;l&eacute;chargement aux administrateurs et aux utilisateurs de confiance afin de minimiser les t&eacute;l&eacute;chargements malveillants.<\/p><h3 class=\"wp-block-heading\" id=\"h-en-utilisant-un-plugin\">En utilisant un plugin<\/h3><p class=\"wp-block-paragraph\">Dans ce tutoriel, nous utiliserons <a href=\"https:\/\/wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noopener\"><strong>SVG Support<\/strong><\/a>. Ce plugin utilise une biblioth&egrave;que d&rsquo;assainissement SVG qui s&rsquo;activera automatiquement lors du t&eacute;l&eacute;chargement de fichiers SVG dans la m&eacute;diath&egrave;que. Il est &eacute;galement facile &agrave; configurer et gratuit.<\/p><p class=\"wp-block-paragraph\">Voici les &eacute;tapes pour configurer SVG Support :<\/p><ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/ajouter-plugin-wordpress\/\"><strong>Installez le plugin<\/strong><\/a> et activez-le.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"494\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-plugins-svgsupport-install-highlighted-fr.png\/w=1024,h=1024,fit=scale-down\" alt=\"Le plugin SVG Support dans le r&eacute;pertoire officiel de WordPress\" class=\"wp-image-26341\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-plugins-svgsupport-install-highlighted-fr.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-plugins-svgsupport-install-highlighted-fr.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-plugins-svgsupport-install-highlighted-fr.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-plugins-svgsupport-install-highlighted-fr.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Naviguez vers <strong>Param&egrave;tres <\/strong>-&gt; <strong>SVG Support <\/strong>depuis votre tableau de bord WordPress.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"676\" height=\"594\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-highlighted-fr.png\/public\" alt=\"SVG Support accessible depuis le tableau de bord de WordPress\" class=\"wp-image-26342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-highlighted-fr.png\/w=676,fit=scale-down 676w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-highlighted-fr.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-highlighted-fr.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Cochez la case &agrave; c&ocirc;t&eacute; de l&rsquo;option <strong>Restreindre &agrave; l&rsquo;administrateur<\/strong> pour limiter les privil&egrave;ges de t&eacute;l&eacute;chargement. Faites de m&ecirc;me pour l&rsquo;option <strong>Activer le mode avanc&eacute; <\/strong>si vous souhaitez acc&eacute;der &agrave; des fonctionnalit&eacute;s avanc&eacute;es, telles que le rendu SVG en ligne et le style CSS.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"694\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-settings-fr.png\/w=1024,h=1024,fit=scale-down\" alt=\"Param&egrave;tres du plugin SVG Support\" class=\"wp-image-26343\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-settings-fr.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-settings-fr.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-settings-fr.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/wpadmin-settings-svgsupport-settings-fr.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Apr&egrave;s avoir enregistr&eacute; les modifications, vous pouvez commencer &agrave; t&eacute;l&eacute;charger des fichiers SVG en toute s&eacute;curit&eacute; dans la m&eacute;diath&egrave;que.<\/li>\n<\/ul><p>\n\n\n        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Conseil de pro                <\/p>\n            <\/div>\n            <p class=\"protip__content\">L'option pour mettre les images en vedette en ligne appara&icirc;tra sur les articles WordPress qui utilisent des fichiers SVG comme images en vedette si vous activez le mode avanc&eacute;.<\/p>\n                    <\/div>\n        \n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-en-ajoutant-manuellement-le-support-svg-a-wordpress\">En ajoutant manuellement le support SVG &agrave; WordPress<\/h3><p class=\"wp-block-paragraph\">Cette m&eacute;thode implique de modifier le fichier <strong>functions.php<\/strong> de votre site WordPress. Par cons&eacute;quent, nous vous recommandons de ne suivre ces &eacute;tapes que si vous &ecirc;tes familier avec PHP et que vous comprenez parfaitement le probl&egrave;me de la s&eacute;curit&eacute; des SVG.<\/p><p>\n\n\n<div class=\"announcement-block announcement-block--important\">\n            <span class=\"announcement-block__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n                          d=\"M12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12C1.5 17.799 6.20101 22.5 12 22.5ZM13.637 7.65198C13.637 6.74791 12.9041 6.01501 12 6.01501C11.0959 6.01501 10.363 6.74791 10.363 7.65198C10.5335 9.53749 10.875 13.383 10.875 13.383C10.875 14.0043 11.3787 14.508 12 14.508C12.6213 14.508 13.125 14.0043 13.125 13.383V13.38L13.637 7.65198ZM11.9927 15.714C11.3714 15.714 10.8677 16.2177 10.8677 16.839C10.8677 17.4603 11.3714 17.964 11.9927 17.964H12.0073C12.6286 17.964 13.1323 17.4603 13.1323 16.839C13.1323 16.2177 12.6286 15.714 12.0073 15.714H11.9927Z\"\n                          fill=\"#FEA419\"\/>\n                <\/svg>\n                Important\n            <\/span>\n            <p class=\"announcement-block__content\">\n                <strong>Important!<\/strong> Important ! Veillez &agrave; <a href=\"\">faire une sauvegarde de votre site WordPress<\/a> avant d&rsquo;effectuer toute modification afin d&rsquo;&eacute;viter toute perte de donn&eacute;es en cas de mauvaise configuration.\n            <\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Les &eacute;tapes suivantes expliquent comment activer manuellement le SVG dans WordPress via le <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/gestionnaire-fichiers-hostinger\/\"><strong>gestionnaire de fichiers Hostinger<\/strong><\/a>. Cela dit, vous pouvez &eacute;galement utiliser un <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/utiliser-filezilla\/\">client FTP comme <strong>FileZilla<\/strong><\/a>.<\/p><ul class=\"wp-block-list\">\n<li>Acc&eacute;dez au hPanel et allez dans <strong>Fichiers <\/strong>-&gt; <strong>Gestionnaire de fichiers<\/strong>.<\/li>\n\n\n\n<li>Naviguez jusqu&rsquo;&agrave; <strong>public_html<\/strong> -&gt; <strong>wp-includes<\/strong>. Faites d&eacute;filer vers le bas jusqu&rsquo;&agrave; ce que vous trouviez <strong>functions.php<\/strong>.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1024\" height=\"260\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/fichier-functions-php.png\/w=1024,h=1024,fit=scale-down\" alt=\"Acc&egrave;s &agrave; Functions.php via le gestionnaire de fichiers de hPanel\" class=\"wp-image-26344\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/fichier-functions-php.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/fichier-functions-php.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/fichier-functions-php.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2023\/09\/fichier-functions-php.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li>Double-cliquez sur le fichier pour l&rsquo;ouvrir et collez-y l&rsquo;extrait de code suivant :<\/li>\n<\/ul><p class=\"wp-block-paragraph\"><strong>function<\/strong> add_file_types_to_uploads(<strong>$file_types<\/strong>){<\/p><p class=\"wp-block-paragraph\"><strong>$new_filetypes<\/strong> = <strong>array<\/strong>();<\/p><p class=\"wp-block-paragraph\"><strong>$new_filetypes[&lsquo;svg&rsquo;]<\/strong> = &lsquo;image\/svg+xml&rsquo;;<\/p><p class=\"wp-block-paragraph\"><strong>$file_types<\/strong> = array_merge(<strong>$file_types,<\/strong> <strong>$new_filetypes<\/strong> );<\/p><p class=\"wp-block-paragraph\"><strong>return<\/strong> <strong>$file_types<\/strong>;<\/p><p class=\"wp-block-paragraph\">}<\/p><p class=\"wp-block-paragraph\">add_filter(&lsquo;upload_mimes&rsquo;, &lsquo;add_file_types_to_uploads&rsquo;);<\/p><ul class=\"wp-block-list\">\n<li>Enregistrez les modifications et essayez de t&eacute;l&eacute;charger un fichier de type SVG. Si le processus a fonctionn&eacute;, votre m&eacute;diath&egrave;que devrait maintenant accepter le t&eacute;l&eacute;chargement du fichier.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\/hebergement-wordpress\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/public\" alt=\"\" class=\"wp-image-41453\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-New-WP_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p class=\"wp-block-paragraph\">Les nombreux avantages des fichiers SVG contribuent &agrave; la popularit&eacute; croissante de ce type de fichier. Malheureusement, les fichiers texte XML sont sujets &agrave; l&rsquo;injection de code, ce qui est la principale raison pour laquelle WordPress n&rsquo;inclut pas le support SVG par d&eacute;faut.<\/p><p class=\"wp-block-paragraph\">Cela dit, il existe deux fa&ccedil;ons de faire en sorte que votre site WordPress accepte les fichiers SVG : en utilisant un plugin WordPress ou en modifiant le <strong>fichier functions.php<\/strong> du site. En plus de limiter les privil&egrave;ges de t&eacute;l&eacute;chargement, vous pourrez ainsi t&eacute;l&eacute;charger en toute s&eacute;curit&eacute; des fichiers SVG dans la biblioth&egrave;que de m&eacute;dias du site.<\/p><p class=\"wp-block-paragraph\">Nous esp&eacute;rons que ce <strong>tutoriel WordPress<\/strong> vous a donn&eacute; un bon aper&ccedil;u des avantages et des risques li&eacute;s au t&eacute;l&eacute;chargement de fichiers SVG sur un site WordPress. Nous vous souhaitons bonne chance.<\/p><h2 class=\"wp-block-heading\" id=\"h-faq-telecharger-des-svg-sur-wordpress\">FAQ : T&eacute;l&eacute;charger des SVG sur WordPress<\/h2><p class=\"wp-block-paragraph\">Vous trouverez ci-dessous quelques r&eacute;ponses aux questions les plus couramment pos&eacute;es concernant l&rsquo;utilisation de SVG dans WordPress.<\/p><div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1693769759548\"><h3 class=\"schema-faq-question\">Est-ce que les SVG sont mieux que les PNG pour un site web ?<\/h3> <p class=\"schema-faq-answer\">Les fichiers SVG sont meilleurs pour les images extensibles, les fichiers de petite taille et les graphiques anim&eacute;s, tandis que les fichiers PNG sont meilleurs pour les images avec beaucoup de d&eacute;tails et de transparence. Le choix d&eacute;pend de vos besoins sp&eacute;cifiques.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1693769775494\"><h3 class=\"schema-faq-question\">Dois-je utiliser un logo SVG sur mon site WordPress ?<\/h3> <p class=\"schema-faq-answer\">Oui, l&rsquo;utilisation d&rsquo;un logo SVG sur votre site WordPress peut am&eacute;liorer l&rsquo;&eacute;volutivit&eacute;, r&eacute;duire la taille du fichier, permettre la personnalisation et assurer la compatibilit&eacute; avec tous les appareils et navigateurs modernes.<\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1693769823693\"><h3 class=\"schema-faq-question\">Pourquoi ne puis-je pas t&eacute;l&eacute;verser mes fichiers SVG sur WordPress ?<\/h3> <p class=\"schema-faq-answer\">WordPress n&rsquo;autorise pas le t&eacute;l&eacute;chargement de fichiers SVG pour des raisons de s&eacute;curit&eacute;. Les fichiers SVG peuvent contenir des codes malveillants qui pourraient nuire &agrave; votre site web. Pour r&eacute;soudre ce probl&egrave;me, vous pouvez utiliser un plugin ou convertir le SVG en PNG ou JPG avant de le t&eacute;l&eacute;charger sur WordPress.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Les administrateurs et les concepteurs de sites web sont amen&eacute;s &agrave; utiliser diff&eacute;rents formats de fichiers multim&eacute;dias dans leur travail. Aujourd&rsquo;hui, l&rsquo;un des formats les plus populaires est le SVG, une image vectorielle bas&eacute;e sur XML. Malheureusement, tous les navigateurs et toutes les plateformes ne supportent pas le SVG, et vous devrez donc l&rsquo;activer manuellement [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/televerser-fichier-svg-wordpress\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":335,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Comment T\u00e9l\u00e9verser un Fichier SVG Dans WordPress","rank_math_description":"T\u00e9l\u00e9verser un fichier SVG sur WordPress peut \u00eatre dangereux. D\u00e9couvrez comment le faire en toute s\u00e9curit\u00e9 en lisant cet article","rank_math_focus_keyword":"svg wordpress","footnotes":""},"categories":[5863,5848],"tags":[],"class_list":["post-26279","post","type-post","status-publish","format-standard","hentry","category-creation-de-contenu","category-wordpress"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/upload-svg-to-wordpress\/","default":1},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/televerser-fichier-svg-wordpress\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-upload-svg-wordpress\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/upload-svg-to-wordpress\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/cargar-en-wordpress-svg\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/cargar-en-wordpress-svg\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26279","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/335"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=26279"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26279\/revisions"}],"predecessor-version":[{"id":38695,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/26279\/revisions\/38695"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=26279"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=26279"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=26279"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}