{"id":70813,"date":"2024-09-23T07:00:00","date_gmt":"2024-09-23T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=70813"},"modified":"2025-10-07T13:46:11","modified_gmt":"2025-10-07T20:46:11","slug":"tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/","title":{"rendered":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web"},"content":{"rendered":"\n<p>Certaines personnes disent qu&#8217;Elvis Presley \u00e9tait le plus grand interpr\u00e8te de tous les temps.<\/p>\n\n\n\n<p>Nous disons que le format de fichier SVG est un concurrent s\u00e9rieux.<\/p>\n\n\n\n<p>Tu vois, Elvis assurait toujours. Son mantra personnel \u00e9tait, &#8220;Prendre soin des affaires,&#8221; abr\u00e9g\u00e9 en TCB sur ses bijoux.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1181\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp\" alt=\"Photo d'Elvis au mariage de George Klein portant son collier TCB\" class=\"wp-image-49627 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-300x221.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1024x756.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-768x567.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1536x1134.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-600x443.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1200x886.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-730x539.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1460x1078.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-784x579.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-1568x1157.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/01_elvis_tcb-877x647.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1181;\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/www.instagram.com\/p\/BwM33HqHAlW\/\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Et tu pourrais dire la m\u00eame chose pour les fichiers SVG.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>SVG<\/h3>\n    <p>Un fichier SVG, ou fichier Scalable Vector Graphic, est un format de fichier qui rend les images bidimensionnelles. Il d\u00e9crit comment l&#8217;image doit appara\u00eetre en utilisant un format de texte XML.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/svg\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n\n<p>Peu importe le projet sur lequel tu travailles, ce format d&#8217;image fera l&#8217;affaire. Ces fichiers sont l\u00e9gers, \u00e9volutifs et excellents pour l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/make-your-website-accessible\/\" target=\"_blank\" rel=\"noreferrer noopener\">accessibilit\u00e9<\/a>. Tu peux m\u00eame les modifier en utilisant du code.<\/p>\n\n\n\n<p>Tu as encore besoin d&#8217;\u00eatre convaincu ? Dans ce guide tr\u00e8s lisible, nous examinons de plus pr\u00e8s le format SVG et expliquons comment utiliser ces fichiers dans tes propres projets.<\/p>\n\n\n\n<p>Pr\u00eat \u00e0 commencer ? Moins de conversation, plus d&#8217;action !<\/p>\n\n\n\n<h2 id=\"h-les-abc-des-svgs-comprendre-les-fichiers-d-image\" class=\"wp-block-heading\">Les ABC des SVGs : Comprendre les Fichiers d&#8217;Image<\/h2>\n\n\n\n<p>Disons que tu construis un site web. Tu vas probablement vouloir quelques images.<\/p>\n\n\n\n<p>Quel type de fichier devrais-tu utiliser ?<\/p>\n\n\n\n<p>Ton instinct pourrait \u00eatre JPEG ou PNG. Peut-\u00eatre que tu vas te l\u00e2cher et ajouter quelques GIFs.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" data-src=\"https:\/\/media4.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExemYyMXZuMThmZXBseDJ4Ym5raTR0NXVtNDI0dnpsaDZ5Y3JhOWcyNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/l0IyqqiSuoOFBdZ7i\/giphy.webp\" alt=\"\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><figcaption class=\"wp-element-caption\"><a href=\"https:\/\/giphy.com\/gifs\/chuber-bears-elvis-l0IyqqiSuoOFBdZ7i\" target=\"_blank\" rel=\"noreferrer noopener\">Source<\/a><\/figcaption><\/figure>\n\n\n\n<p>Mais&#8230; quelle est la diff\u00e9rence ? Eh bien, voici une comparaison des suspects habituels :<\/p>\n\n\n\n<p><strong>JPEG (Groupe conjoint d&#8217;experts en photographie)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avantages : Tailles de fichier plus petites, id\u00e9ales pour les images complexes.<\/li>\n\n\n\n<li>Inconv\u00e9nients : Perte de qualit\u00e9 lors de la compression, pas de transparence.<\/li>\n<\/ul>\n\n\n\n<p><strong>PNG (Portable Network Graphics)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avantages : Compression sans perte, supporte la transparence.<\/li>\n\n\n\n<li>Inconv\u00e9nients : Fichiers plus volumineux que les JPEGs.<\/li>\n<\/ul>\n\n\n\n<p><strong>GIF (Format d&#8217;\u00c9change de Graphiques)<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Avantages : Prend en charge les animations simples, taille de fichier r\u00e9duite.<\/li>\n\n\n\n<li>Inconv\u00e9nients : Couleurs limit\u00e9es, peut para\u00eetre pix\u00e9lis\u00e9.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" data-src=\"https:\/\/i.giphy.com\/media\/v1.Y2lkPTc5MGI3NjExZnQyaXJnOTNjNGtrOThvcHoyNmdtemFqOXZyeGtxbjZ6OTVmaGo5YSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw\/IxPS9xRu7TwYlrgBv4\/giphy.gif\" alt=\"\" style=\"width:500px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" class=\"lazyload\" \/><\/figure>\n\n\n\n<p>Ces formats peuvent sembler divers. Cependant, ce sont tous des exemples d&#8217;images raster.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.dreamhost.com\/blog\/optimize-images-for-web\/\" target=\"_blank\" rel=\"noreferrer noopener\">Les images raster (ou bitmap)<\/a> sont peintes avec des pixels pr\u00e9cis\u00e9ment plac\u00e9s. Elles ont des dimensions, des couleurs et des formes fixes.<\/p>\n\n\n\n<p>Ces types de fichiers sont parfaits pour partager des images avec beaucoup de d\u00e9tails, tels que des <a href=\"https:\/\/www.dreamhost.com\/blog\/photography-portfolio-website-design\/\" target=\"_blank\" rel=\"noreferrer noopener\">photos de haute qualit\u00e9<\/a>.<\/p>\n\n\n\n<p>L&#8217;inconv\u00e9nient est que tu ne peux jamais changer ou \u00e9tirer l&#8217;image originale. Tu peux seulement peindre dessus ou ajouter plus de pixels.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Pourquoi Les SVG Sont Si Utiles<\/h3>\n\n\n\n<p>Le format SVG (Scalable Vector Graphics) est diff\u00e9rent.<\/p>\n\n\n\n<p>Les fichiers vectoriels contiennent un ensemble d&#8217;instructions textuelles sur la mani\u00e8re de construire une image. Ces fichiers sont \u00e9crits en XML (Extensible Markup Language).<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>XML<\/h3>\n    <p>XML est un acronyme pour Extensible Markup Language. Ce langage utilise des balises pour ajouter des informations aux fichiers, lisibles \u00e0 la fois par les machines et les humains.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/wordpress\/xml\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Lire la suite                    <\/a>\n\n<\/div>\n\n\n\n<p>Quand tu essaies de charger un fichier SVG, ton appareil regarde les instructions et construit l&#8217;image \u00e0 la demande.<\/p>\n\n\n\n<p>Il y a plusieurs avantages \u00e0 ce syst\u00e8me :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Les SVG peuvent \u00eatre <strong>redimensionn\u00e9s \u00e0 n&#8217;importe quelle taille<\/strong> et restent parfaits.<\/li>\n\n\n\n<li>Ils peuvent \u00e9galement \u00eatre <strong>modifi\u00e9s comme des fichiers de code<\/strong>.<\/li>\n\n\n\n<li>Tu peux m\u00eame <strong>les styliser en utilisant du CSS<\/strong>.<\/li>\n\n\n\n<li>Comme les SVG sont compos\u00e9s de texte, <strong>ils ont des tailles de fichier vraiment petites<\/strong>.<\/li>\n\n\n\n<li>Cela signifie qu&#8217;ils occupent <strong>moins d&#8217;espace de stockage<\/strong> sur ton serveur web<strong>.<\/strong><\/li>\n\n\n\n<li>Et ils peuvent se <strong>charger plus rapidement<\/strong> que les graphiques raster.<\/li>\n<\/ul>\n\n\n\n<p>Un autre avantage de l&#8217;utilisation des SVG est une <strong>accessibilit\u00e9 am\u00e9lior\u00e9e. <\/strong>Tu peux ajuster ces fichiers localement sur les appareils, en fonction des besoins de l&#8217;utilisateur, et les lecteurs d&#8217;\u00e9cran peuvent les interpr\u00e9ter.<\/p>\n\n\n\n<p>L&#8217;inconv\u00e9nient des SVG est qu&#8217;ils peuvent devenir tr\u00e8s volumineux si tu inclus beaucoup de d\u00e9tails. De plus, tu ne peux pas les optimiser de la m\u00eame mani\u00e8re que les images raster. Si tu veux partager des photographies, tu seras probablement mieux servi avec un JPEG.<\/p>\n\n\n\n<p>Mais pour la plupart des autres contenus visuels, le format SVG est une excellente option.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Fonctionnalit\u00e9<\/strong><\/td><td><strong>SVG<\/strong><\/td><td><strong>JPEG<\/strong><\/td><td><strong>PNG<\/strong><\/td><td><strong>GIF<\/strong><\/td><\/tr><tr><td>Scalabilit\u00e9<\/td><td>Forte \u2705<\/td><td>Non \u274c<\/td><td>Non \u274c<\/td><td>Non \u274c<\/td><\/tr><tr><td>Taille de fichier<\/td><td>G\u00e9n\u00e9ralement petite \u2705<\/td><td>Peut \u00eatre petite \u2705<\/td><td>Souvent grande \u274c<\/td><td>Petite pour des images simples \u2705<\/td><\/tr><tr><td>Transparence<\/td><td>Oui \u2705<\/td><td>Non \u274c<\/td><td>Oui \u2705<\/td><td>Oui, mais limit\u00e9e \u26a0\ufe0f<\/td><\/tr><tr><td>Animation<\/td><td>Absolument ! ?<\/td><td>Non \u274c<\/td><td>Non \u274c<\/td><td>De base seulement \u26a0\ufe0f<\/td><\/tr><tr><td>Id\u00e9al pour<\/td><td>Graphiques, ic\u00f4nes, logos&nbsp;<\/td><td>Photos<\/td><td>Images n\u00e9cessitant de la transparence<\/td><td>Animations simples<\/td><\/tr><tr><td>Modifiabilit\u00e9<\/td><td>Avec du code ! ?<\/td><td>Non \u274c<\/td><td>Non \u274c<\/td><td>Non \u274c<\/td><\/tr><tr><td>Prise en charge par les navigateurs<\/td><td>La plupart des navigateurs modernes \u2705<\/td><td>Tous les navigateurs \u2705<\/td><td>Tous les navigateurs \u2705<\/td><td>Tous les navigateurs \u2705<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Utilisations Courantes Des Images SVG<\/h3>\n\n\n\n<p>Alors que les SVG sont assez polyvalents, ils apparaissent principalement dans la conception web en tant que :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ic\u00f4nes :<\/strong> Des liens de r\u00e9seaux sociaux aux boutons de panier d&#8217;achat, les ic\u00f4nes SVG restent nettes sur n&#8217;importe quel appareil.<\/li>\n\n\n\n<li><strong>Logos :<\/strong> Enregistrer ton <a href=\"https:\/\/www.dreamhost.com\/blog\/make-logo-online-free\/\" target=\"_blank\" rel=\"noreferrer noopener\">logo de marque<\/a> en tant que SVG garantit une apparence parfaite partout \u2014 des petits \u00e9crans mobiles aux immenses panneaux publicitaires.<\/li>\n\n\n\n<li><strong>Illustrations :<\/strong> De nombreux sites web utilisent maintenant des illustrations SVG plut\u00f4t que des images de stock. M\u00eame lorsque les graphiques sont tr\u00e8s d\u00e9taill\u00e9s, ils s&#8217;adaptent parfaitement.<\/li>\n\n\n\n<li><strong>Animations :<\/strong> Oui, les SVG peuvent bouger ! Tu peux les animer pour ajouter cette touche suppl\u00e9mentaire \u00e0 ton site web, comme un logo qui tourne ou un personnage qui danse.<\/li>\n\n\n\n<li><strong>Infographies :<\/strong> Parce que les SVG sont \u00e9volutifs, tu peux \u00e9galement les utiliser pour cr\u00e9er des <a href=\"https:\/\/www.dreamhost.com\/blog\/ga4-explorations-template-gallery\/\" target=\"_blank\" rel=\"noreferrer noopener\">visualisations de donn\u00e9es<\/a> interactives. Tr\u00e8s cool !<\/li>\n<\/ul>\n\n\n\n<h2 id=\"h2_working-with-svgs-create-or-copy\" class=\"wp-block-heading\">Travailler Avec Des SVGs : Cr\u00e9er ou Copier ?<\/h2>\n\n\n\n<p>D&#8217;accord, \u00e7a suffit les \u00e9loges r\u00eaveurs. Il est temps de se mettre au travail.<\/p>\n\n\n\n<p>Si tu souhaites int\u00e9grer des SVGs dans tes projets num\u00e9riques, tu dois r\u00e9cup\u00e9rer des designs pr\u00eats \u00e0 l&#8217;emploi ou cr\u00e9er tes propres graphiques \u00e0 partir de z\u00e9ro.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Trouver des SVG Gratuits<\/h3>\n\n\n\n<p>Utiliser les designs de quelqu&#8217;un d&#8217;autre est l&#8217;option la plus facile. Et heureusement, des milliers de SVG sont disponibles en t\u00e9l\u00e9chargement en ligne.<\/p>\n\n\n\n<p>Beaucoup sont gratuits pour les projets personnels, mais tu pourrais avoir \u00e0 payer pour un usage commercial.<\/p>\n\n\n\n<p>Voici quelques-unes de nos ressources pr\u00e9f\u00e9r\u00e9es :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Font Awesome<\/a> : Un pack populaire d&#8217;ic\u00f4nes SVG.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Freepik<\/a> : Immense base de donn\u00e9es de graphiques vectoriels, d&#8217;illustrations et d&#8217;ic\u00f4nes.<\/li>\n\n\n\n<li><a href=\"https:\/\/lineicons.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Lineicons<\/a> : Pack de plus de 8,400 ic\u00f4nes simples et \u00e9pur\u00e9es.<\/li>\n\n\n\n<li><a href=\"https:\/\/freesvg.org\/\" target=\"_blank\" rel=\"noreferrer noopener\">Free SVG<\/a> : Biblioth\u00e8que d&#8217;illustrations SVG totalement gratuites.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.opendoodles.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Open Doodles<\/a> : Illustrations gratuites, color\u00e9es et en forme de personnages.<\/li>\n\n\n\n<li><a href=\"https:\/\/iconscout.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">IconScout<\/a> : Biblioth\u00e8que consultable de plus de 9,5 millions de ressources, incluant des ic\u00f4nes gratuites et payantes, des illustrations, des logos et plus encore.<\/li>\n\n\n\n<li><a href=\"https:\/\/www.drawkit.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">DrawKit<\/a> : Plusieurs packs d&#8217;illustrations 2D\/3D, gratuites et premium.<\/li>\n\n\n\n<li><a href=\"https:\/\/undraw.co\/illustrations\" target=\"_blank\" rel=\"noreferrer noopener\">unDraw<\/a> : Un grand nombre d&#8217;excellentes illustrations SVG gratuites.<\/li>\n<\/ul>\n\n\n\n<p>N&#8217;oublie pas que tu peux modifier n&#8217;importe quel SVG que tu t\u00e9l\u00e9charges. Ainsi, tu peux utiliser des fichiers gratuits comme point de d\u00e9part pour tes propres cr\u00e9ations.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h2_how-to-create-and-edit-svg-files\" class=\"wp-block-heading\">Comment Cr\u00e9er Et Modifier Des Fichiers SVG<\/h2>\n\n\n\n<p>Tu ne trouves pas ce dont tu as besoin en ligne ? Pas de souci. Modifier des SVGs est un jeu d&#8217;enfant.<\/p>\n\n\n\n<p>Voici un guide rapide :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Choisis Ton Logiciel<\/h3>\n\n\n\n<p>La fa\u00e7on la plus facile de modifier des SVG est avec un \u00e9diteur de graphiques vectoriels. Voici quelques options populaires :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adobe Illustrator<\/strong> ($$$) : Le champion poids lourd. Cher, mais puissant.<\/li>\n\n\n\n<li><strong>Inkscape <\/strong>(gratuit) : L&#8217;alternative gratuite qui a du punch.<\/li>\n\n\n\n<li><strong>Figma <\/strong>($) : Id\u00e9al pour le travail de conception collaboratif.<\/li>\n\n\n\n<li><strong>Sketch <\/strong>($) : Une alternative plus l\u00e9g\u00e8re \u00e0 Illustrator, populaire parmi les concepteurs d&#8217;interfaces.<\/li>\n<\/ul>\n\n\n\n<p>Nous baserons le reste de ce tutoriel sur Inkscape, mais le processus est tr\u00e8s similaire dans la plupart des applications d&#8217;\u00e9dition vectorielle.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Configure Ton Espace de Travail<\/h3>\n\n\n\n<p>Si tu commences \u00e0 partir de z\u00e9ro, tu devras cr\u00e9er une toile pour ton travail. Dans Inkscape, visite <strong>File <\/strong>&gt;<strong> New<\/strong> et choisis les dimensions pour ta nouvelle image.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1020\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp\" alt=\"capture d'\u00e9cran de l'option &quot;Nouveau&quot; situ\u00e9e sous Fichier dans le menu de navigation sup\u00e9rieur\" class=\"wp-image-49636 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-300x191.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1024x653.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-768x490.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1536x979.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-600x383.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1200x765.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-730x465.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1460x931.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-784x500.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-1568x1000.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/03_set_up_your_canvas-877x559.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1020;\" \/><\/figure>\n\n\n\n<p>Si tu souhaites modifier un document SVG existant, rends-toi dans <strong>Fichier &gt; Ouvrir<\/strong> pour lancer l&#8217;\u00e9diteur.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Dessine Ton Design<\/h3>\n\n\n\n<p>L&#8217;outil le plus important dans l&#8217;\u00e9dition vectorielle est l&#8217;outil <strong>Bezier<\/strong>. Tu peux le s\u00e9lectionner dans la barre d&#8217;outils \u00e0 gauche de ton espace de travail. L&#8217;ic\u00f4ne ressemble \u00e0 un stylo plume dessinant une ligne courb\u00e9e.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp\" alt=\"capture d\u2019\u00e9cran de l\u2019emplacement de l\u2019outil B\u00e9zier qui ressemble \u00e0 un capuchon de stylo \u00e0 c\u00f4t\u00e9 d\u2019une ligne trac\u00e9e\" class=\"wp-image-49638 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/04_draw_your_design-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Cet outil te permet de cr\u00e9er des lignes droites et des courbes parfaites en quelques clics.<\/p>\n\n\n\n<p>Chaque forme que tu cr\u00e9es contient des chemins et des points individuels, qui sont enregistr\u00e9s dans le code XML sous-jacent.<\/p>\n\n\n\n<p>En utilisant l&#8217;outil B\u00e9zier, tu peux facilement revenir en arri\u00e8re et ajuster ces points et chemins apr\u00e8s les avoir cr\u00e9\u00e9s. Une fois que tu es satisfait de la structure, ajoute tes <a href=\"https:\/\/www.dreamhost.com\/blog\/website-color-schemes\/\" target=\"_blank\" rel=\"noreferrer noopener\">propres couleurs<\/a> via le panneau des <strong>Propri\u00e9t\u00e9s d&#8217;objet<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1219\" height=\"821\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp\" alt=\"barre de navigation sup\u00e9rieure avec un menu d\u00e9roulant de &quot;Object&quot; \u00e0 &quot;Propri\u00e9t\u00e9s de l'objet&quot; \" class=\"wp-image-49640 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives.webp 1219w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-300x202.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1024x690.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-768x517.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-600x404.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-1200x808.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-730x492.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-784x528.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/05_objectives-877x591.webp 877w\" data-sizes=\"(max-width: 1219px) 100vw, 1219px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1219px; --smush-placeholder-aspect-ratio: 1219\/821;\" \/><\/figure>\n\n\n\n<p>Les options des propri\u00e9t\u00e9s de l&#8217;objet appara\u00eetront dans le menu de droite.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp\" alt=\"capture d'\u00e9cran du menu des propri\u00e9t\u00e9s de l'objet maintenant ouvert dans le menu de droite montrant les variations de couleur et de motif.\" class=\"wp-image-49642 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/06_objectives_properties-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p><strong>Conseil de pro :<\/strong> Tu veux approfondir l&#8217;\u00e9dition de vecteurs ? Inkscape dispose d&#8217;une excellente biblioth\u00e8que de tutoriels gratuits juste<a href=\"https:\/\/inkscape.org\/learn\/tutorials\/\" target=\"_blank\" rel=\"noreferrer noopener\"> ici<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Enregistrer En Tant Que SVG<\/h3>\n\n\n\n<p>Une fois que tu es satisfait de ton graphique, va dans <strong>Fichier &gt;<\/strong><strong>Enregistrer sous<\/strong>, et choisis <strong>SVG<\/strong> comme format.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"900\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp\" alt=\"Menu d\u00e9roulant de &quot;fichier&quot; \u00e0 &quot;ouvrir&quot; \" class=\"wp-image-49644 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-300x169.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1024x576.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-768x432.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1536x864.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-600x338.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1200x675.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-730x411.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1460x821.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-784x441.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-1568x882.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/07_save_as_svg-877x493.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/900;\" \/><\/figure>\n\n\n\n<p>Donne-lui un nom cool, et appuie sur enregistrer !<\/p>\n\n\n\n<h2 id=\"h2_how-to-add-svgs-to-your-website\" class=\"wp-block-heading\">Comment Ajouter des SVGs \u00e0 Ton Site Web<\/h2>\n\n\n\n<p>Tu as cr\u00e9\u00e9 ton chef-d&#8217;\u0153uvre vectoriel. Maintenant, le monde m\u00e9rite de le voir.&nbsp;<\/p>\n\n\n\n<p>Tu peux int\u00e9grer des SVGs dans le HTML de ton site web. Tu as juste besoin d&#8217;une balise <strong><code>&lt;img&gt;<\/code><\/strong> qui pointe vers ton fichier. \u00c7a devrait ressembler \u00e0 \u00e7a :<\/p>\n\n\n\n<p><code>&lt;img src=\"my-awesome-svg.svg\" alt=\"Mon SVG G\u00e9nial\"&gt;<\/code><\/p>\n\n\n\n<p>Alternativement, tu peux ins\u00e9rer le code XML de ton fichier SVG directement dans ta page web en utilisant la balise <strong><code>&lt;svg&gt;<\/code><\/strong>.<\/p>\n\n\n\n<p>Voici un exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"200\" height=\"200\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"40\" stroke=\"red\" stroke-width=\"2\" fill=\"green\" \/&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Ce code va produire un joli bouton rond, avec un contour rouge et un int\u00e9rieur vert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Activation du SVG dans WordPress<\/h3>\n\n\n\n<p>Ajouter des images individuelles via HTML est un processus tr\u00e8s lent. Tu pourrais pr\u00e9f\u00e9rer t\u00e9l\u00e9charger des SVGs via ton CMS (syst\u00e8me de gestion de contenu).<\/p>\n\n\n\n<p>Mais il y a un probl\u00e8me pour les utilisateurs de WordPress.<\/p>\n\n\n\n<p>Par d\u00e9faut, WordPress ne prend pas en charge nativement les t\u00e9l\u00e9versements de SVG. Cela est d\u00fb au fait que les acteurs malveillants peuvent utiliser les SVG pour distribuer du malware.<\/p>\n\n\n\n<p>Le moyen le plus simple d&#8217;activer les SVGs consiste \u00e0 installer un plugin comme<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/safe-svg\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Safe SVG<\/a> ou<a href=\"https:\/\/en-gb.wordpress.org\/plugins\/svg-support\/\" target=\"_blank\" rel=\"noreferrer noopener\"> SVG Support<\/a>. Ces outils v\u00e9rifient chaque t\u00e9l\u00e9chargement pour s&#8217;assurer qu&#8217;aucun \u00e9l\u00e9ment nuisible n&#8217;est cach\u00e9 \u00e0 l&#8217;int\u00e9rieur.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1362\" height=\"717\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp\" alt=\"capture d'\u00e9cran de l'\u00e9cran de t\u00e9l\u00e9chargement de Safe SVG\" class=\"wp-image-49647 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg.webp 1362w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-300x158.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1024x539.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-768x404.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-600x316.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-1200x632.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-730x384.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-784x413.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/08_safe_svg-877x462.webp 877w\" data-sizes=\"(max-width: 1362px) 100vw, 1362px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1362px; --smush-placeholder-aspect-ratio: 1362\/717;\" \/><\/figure>\n\n\n\n<p>Tu peux ensuite t\u00e9l\u00e9charger et ins\u00e9rer des SVGs via la biblioth\u00e8que de m\u00e9dias WordPress. Il suffit de naviguer vers <strong>M\u00e9dias &gt; Ajouter<\/strong>, et de choisir les graphiques que tu souhaites inclure.<\/p>\n\n\n\n<h2 id=\"h2_styling-svgs-with-css\" class=\"wp-block-heading\">Styliser les SVGs avec CSS<\/h2>\n\n\n\n<p>Si tu int\u00e8gres des fichiers SVG en utilisant la balise <strong><code>&lt;svg&gt;<\/code><\/strong>, tu peux modifier l&#8217;apparence de tes images avec du CSS.<\/p>\n\n\n\n<p>Disons que tu as cr\u00e9\u00e9 un graphique vert, mais tu veux qu&#8217;il apparaisse rouge sur ton site web. Au lieu de cr\u00e9er une nouvelle copie, tu peux simplement \u00e9crire le style suivant :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  stroke: red;\n  fill: blue;\n}<\/code><\/pre>\n\n\n\n<p>L&#8217;attribut <strong><code>stroke<\/code><\/strong> d\u00e9finit la couleur du contour de ton graphique. Pendant ce temps, l&#8217;attribut <strong><code>fill<\/code><\/strong> contr\u00f4le la couleur \u00e0 l&#8217;int\u00e9rieur des lignes.<\/p>\n\n\n\n<p><strong>Conseil de pro : <\/strong>Il y a<a href=\"https:\/\/css-tricks.com\/svg-properties-and-css\/\" target=\"_blank\" rel=\"noreferrer noopener\"> <em>beaucoup plus<\/em><\/a> d&#8217;attributs avec lesquels jouer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Rendre Vos Images SVG Responsives<\/h3>\n\n\n\n<p>Les fichiers SVG sont infiniment redimensionnables, donc tu peux les utiliser dans des conceptions responsives. Il suffit juste d&#8217;un peu de magie CSS.<\/p>\n\n\n\n<p>Voici un guide \u00e9tape par \u00e9tape :<\/p>\n\n\n\n<p><strong>1. Int\u00e8gre ton image en utilisant la balise <code>&lt;svg&gt;<\/code>.<\/strong> Cela signifie que tu peux apporter des modifications via CSS.<\/p>\n\n\n\n<p><strong>2. Supprimer les dimensions de hauteur et de largeur. <\/strong>Cela forcera ton SVG \u00e0 s&#8217;adapter \u00e0 son conteneur. Assure-toi que la partie <strong><code>viewBox<\/code><\/strong> reste. Cela devrait ressembler \u00e0 ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg viewBox=\"0 0 20 20\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;!-- svg content here --&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p><strong>3. D\u00e9finis la taille maximale de ton SVG.<\/strong> Cela emp\u00eache l&#8217;image de d\u00e9border de son conteneur. Par exemple :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>svg {\n  display: inline-block;\n  max-width: 100%;\n}<\/code><\/pre>\n\n\n\n<p>Et voil\u00e0, c&#8217;est fait !<\/p>\n\n\n\n<p><strong>Conseil d&#8217;expert :<\/strong> Si tout cela te semble un peu technique, essaie <a href=\"https:\/\/app.zipwp.com\/pricing\/?aff=933feb1e\" target=\"_blank\" rel=\"noreferrer noopener\">ZipWP<\/a>. C&#8217;est un cr\u00e9ateur de site web avec IA qui g\u00e8re le style pour toi.<\/p>\n\n\n\n<h2 id=\"h2_svg-masterclass-4-advanced-tips\" class=\"wp-block-heading\">Masterclass SVG : 4 Astuces Avanc\u00e9es<\/h2>\n\n\n\n<p>Nous avons couvert les bases de la cr\u00e9ation et du partage des SVG. Pour terminer ce guide, examinons quelques techniques avanc\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1. Anime Tes Graphiques SVG<\/h3>\n\n\n\n<p>Savais-tu que tu peux faire danser tes SVG ? Oui, l&#8217;<a href=\"https:\/\/www.dreamhost.com\/blog\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">animation<\/a> fonctionne sur ce type de fichier.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/loading-animation.gif\" alt=\"animation simple d'un bouton \u00ab Chargement \u00bb se d\u00e9pla\u00e7ant de haut en bas sur un fond noir uni\" class=\"wp-image-49653 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure>\n\n\n\n<p>Comme avec l&#8217;image originale, tu peux animer tes graphiques en utilisant du code XML simple. Ajoute simplement un \u00e9l\u00e9ment <strong><code>&lt;animate&gt;<\/code> <\/strong>\u00e0 l&#8217;int\u00e9rieur de ta forme pour mettre les choses en mouvement.<\/p>\n\n\n\n<p>Cela devrait ressembler \u00e0 quelque chose comme ceci :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg width=\"100%\" height=\"auto\" xmlns=\"https:\/\/example.com\/file.svg\"&gt;\n  &lt;circle cx=\"50\" cy=\"50\" r=\"50\" style=\"fill:red;\"&gt;\n    &lt;animate\n      attributeName=\"cx\"\n      begin=\"0s\"\n      dur=\"5s\"\n      from=\"30\"\n      to=\"90%\"\n      repeatCount=\"indefinite\" \/&gt;\n  &lt;\/circle&gt;\n&lt;\/svg&gt;<\/code><\/pre>\n\n\n\n<p>Tu peux utiliser cette technique pour ajouter un peu de mouvement aux ic\u00f4nes, cr\u00e9er un indicateur de chargement de page, ou m\u00eame concevoir des publicit\u00e9s anim\u00e9es.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Utilise les Sprites SVG pour des Temps de Chargement Plus Rapides<\/h3>\n\n\n\n<p>Les sprites SVG sont comme un album des meilleurs hits pour tes ic\u00f4nes. Au lieu d&#8217;avoir des dizaines de fichiers d&#8217;ic\u00f4nes individuels, tu les regroupes tous dans un seul SVG.<\/p>\n\n\n\n<p>Cela signifie que tu n&#8217;as besoin de faire qu&#8217;une seule requ\u00eate HTTP par page, peu importe le nombre d&#8217;ic\u00f4nes que tu utilises. C&#8217;est un excellent moyen de r\u00e9duire les temps de chargement et de conserver la bande passante.<\/p>\n\n\n\n<p>De nombreux packs d&#8217;ic\u00f4nes sont livr\u00e9s sous forme de sprite de nos jours. Tu peux <a href=\"https:\/\/hackernoon.com\/how-to-create-svg-sprite-with-icons\" target=\"_blank\" rel=\"noreferrer noopener\">cr\u00e9er le tien<\/a> \u00e9galement.<\/p>\n\n\n\n<p>Pour int\u00e9grer une ic\u00f4ne particuli\u00e8re sur ton site, tu dois simplement localiser la zone du fichier sprite o\u00f9 cette ic\u00f4ne est enregistr\u00e9e. Tu peux faire cela en utilisant du code CSS basique :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>#button {\n  width: 20px;\n  height: 20px;\n  background: url('sprite.svg') -128px 0;\n}<\/code><\/pre>\n\n\n\n<p><strong>Conseil pro : <\/strong>Nous recommandons d&#8217;utiliser un outil en ligne tel que<a href=\"https:\/\/www.toptal.com\/developers\/css\/sprite-generator\/\" target=\"_blank\" rel=\"noreferrer noopener\"> G\u00e9n\u00e9rateur de Sprites CSS<\/a> pour calculer les distances correctes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Optimise Tes Fichiers SVG Pour De Meilleures Performances<\/h3>\n\n\n\n<p>Alors que les fichiers SVG commencent assez petits, tu peux les optimiser pour les rendre encore plus l\u00e9gers.<\/p>\n\n\n\n<p>Voici comment faire :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Utilise un outil comme<\/strong><a href=\"https:\/\/jakearchibald.github.io\/svgomg\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong> SVGOMG<\/strong><\/a>. Oui, \u00e7a existe vraiment. C&#8217;est une super petite application web qui te permet de compresser des SVG sans perdre en qualit\u00e9.<\/li>\n\n\n\n<li><strong>Simplifie les chemins quand c&#8217;est possible<\/strong>. Des formes compliqu\u00e9es peuvent se transformer en grandes quantit\u00e9s de code XML. De nombreux \u00e9diteurs de graphiques vectoriels ont des outils pour cette t\u00e2che. (C&#8217;est sous <strong>Chemin &gt; Simplifier<\/strong> dans Inkscape).<\/li>\n\n\n\n<li><strong>Envisage le chargement paresseux pour les SVGs en dessous de la ligne de flottaison.<\/strong> En retardant le chargement des images en bas de la page, tu peux r\u00e9duire l&#8217;impact de multiples images.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4. Rendez Vos Graphiques Accessibles<\/h3>\n\n\n\n<p>\u00c9tant donn\u00e9 que les SVG sont des fichiers bas\u00e9s sur du texte, ils sont faciles \u00e0 comprendre pour les lecteurs d&#8217;\u00e9cran et autres logiciels d&#8217;assistance.<\/p>\n\n\n\n<p>Cela dit, tu peux encore prendre des mesures pour les rendre encore plus accessibles :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Inclure <code>&lt;title&gt;<\/code> et <code>&lt;desc&gt;<\/code> dans tes fichiers SVG<\/strong>. Ces \u00e9l\u00e9ments fournissent des descriptions du graphique, ce qui est particuli\u00e8rement utile pour les utilisateurs qui d\u00e9pendent des lecteurs d&#8217;\u00e9cran.<\/li>\n\n\n\n<li><strong>Ajoute un attribut <code>role=\"img\"<\/code><\/strong>. Cela informe les technologies d&#8217;assistance que le SVG est une image.<\/li>\n\n\n\n<li><strong>Remplis l&#8217;attribut <code>aria-labelledby<\/code><\/strong>. qui devrait r\u00e9f\u00e9rencer les ID des \u00e9l\u00e9ments <code>&lt;title&gt;<\/code> et <code>&lt;desc&gt;<\/code>, les liant comme \u00e9tiquettes pour l&#8217;image.<\/li>\n\n\n\n<li><strong>Pour les SVG plus complexes, fournis un texte alternatif<\/strong>. D\u00e9cris l&#8217;image, afin que les lecteurs d&#8217;\u00e9cran aient moins \u00e0 interpr\u00e9ter.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"666\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp\" alt=\"animation simple d'un bouton &quot;Chargement&quot; montant et descendant sur un fond graphique noir uni\" class=\"wp-image-49649 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-300x125.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1024x426.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-768x320.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1536x639.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-600x250.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1200x500.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-730x304.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1460x608.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-784x326.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-1568x653.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/09_make_your_graphics_accessible-877x365.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/666;\" \/><\/figure>\n\n\n\n<p>Un avantage suppl\u00e9mentaire de rendre les SVGs super-accessibles est que tu optimises \u00e9galement leur r\u00e9f\u00e9rencement. Victoire SEO !<\/p>\n\n\n\n<h2 id=\"h2_taking-care-of-business\" class=\"wp-block-heading\">Prendre Soin Des Affaires<\/h2>\n\n\n\n<p>Tout comme Elvis s&#8217;occupait des affaires sur sc\u00e8ne, les SVG peuvent t&#8217;aider \u00e0 g\u00e9rer les affaires sur ton site web. Ces graphiques polyvalents et \u00e9volutifs offrent un monde de possibilit\u00e9s pour les concepteurs et d\u00e9veloppeurs web.<\/p>\n\n\n\n<p>Des logos nets et des ic\u00f4nes r\u00e9actives aux animations interactives et aux visuels accessibles, les SVG sont les h\u00e9ros m\u00e9connus du <a href=\"https:\/\/www.dreamhost.com\/blog\/elements-of-webdesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">design web moderne<\/a>.<\/p>\n\n\n\n<p>Ayant consult\u00e9 ce guide, tu devrais te sentir assez confiant pour utiliser des SVG dans tes projets. Mais ton h\u00e9bergement est-il \u00e0 la hauteur du d\u00e9fi ?<\/p>\n\n\n\n<p>Si tu veux t&#8217;assurer que ton site peut g\u00e9rer des tonnes de graphiques de haute qualit\u00e9, envisage de passer \u00e0 DreamHost.<\/p>\n\n\n\n<p>Nos<a href=\"https:\/\/www.dreamhost.com\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\"> plans d&#8217;h\u00e9bergement<\/a> incluent tous une bande passante illimit\u00e9e (\u00e0 l&#8217;exception du cloud hosting), ce qui signifie que tu n&#8217;as pas \u00e0 t&#8217;inqui\u00e9ter si ton site re\u00e7oit beaucoup de visiteurs.<\/p>\n\n\n\n<h2 id=\"h2_fun-faqs-about-svgs\" class=\"wp-block-heading\">FAQ Amusantes Sur Les SVG<\/h2>\n\n\n\n<p>Si tu es toujours curieux \u00e0 propos des SVG, c&#8217;est tout \u00e0 fait normal. Nous avons encore des connaissances \u00e0 partager. Voici un bref r\u00e9capitulatif de certaines questions que nous avons pu manquer :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Comment convertir un SVG en JPEG ?<strong>&nbsp;<\/strong><\/h3>\n\n\n\n<p>Tu peux le faire rapidement en utilisant un \u00e9diteur de vecteur de bureau ou un outil en ligne comme<a href=\"https:\/\/cloudconvert.com\/svg-to-jpg\" target=\"_blank\" rel=\"noreferrer noopener\"> CloudConvert<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-peux-tu-modifier-des-svgs-directement-dans-un-editeur-de-texte\">Peux-tu modifier des SVGs directement dans un \u00e9diteur de texte ?<\/h3>\n\n\n\n<p>Oui ! Les SVG sont bas\u00e9s sur XML, donc tu peux modifier leur code directement.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-le-svg-est-il-plus-clair-que-le-png\">Le SVG est-il plus clair que le PNG ?<\/h3>\n\n\n\n<p>Dans la plupart des cas, oui. Cela est particuli\u00e8rement remarquable si tu essaies d&#8217;agrandir un fichier PNG.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-peux-tu-modifier-des-svgs-avec-javascript\">Peux-tu modifier des SVGs avec JavaScript ?<\/h3>\n\n\n\n<p>Oui, tu peux. Cela est utile pour les changements dynamiques bas\u00e9s sur les entr\u00e9es des utilisateurs.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-les-svg-sont-ils-pris-en-charge-dans-tous-les-navigateurs\">Les SVG sont-ils pris en charge dans tous les navigateurs ?<\/h3>\n\n\n\n<p>Les SVG sont pris en charge dans tous les navigateurs web modernes, y compris Chrome, Firefox, Safari et Edge.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<p><em>Cette page contient des liens d&#8217;affiliation. Cela signifie que nous pouvons gagner une commission si tu ach\u00e8tes des services via notre lien sans aucun co\u00fbt suppl\u00e9mentaire pour toi.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Veux-tu des graphiques nets et clairs qui rendent ton site web splendide \u00e0 n&#8217;importe quelle \u00e9chelle ?<br \/>\nApprends \u00e0 cr\u00e9er, optimiser, et utiliser les fichiers SVG avec notre guide.<\/p>\n","protected":false},"author":1058,"featured_media":49599,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.","toc_headlines":"[[\"h-the-abcs-of-svgs-understanding-image-files\",\"Les ABC des SVGs : Comprendre les Fichiers d'Image\"],[\"h2_working-with-svgs-create-or-copy\",\"Travailler Avec Des SVGs : Cr\u00e9er ou Copier ?\"],[\"h2_how-to-create-and-edit-svg-files\",\"Comment Cr\u00e9er Et Modifier Des Fichiers SVG\"],[\"h2_how-to-add-svgs-to-your-website\",\"Comment Ajouter des SVGs \u00e0 Ton Site Web\"],[\"h2_styling-svgs-with-css\",\"Styliser les SVGs avec CSS\"],[\"h2_svg-masterclass-4-advanced-tips\",\"Masterclass SVG : 4 Astuces Avanc\u00e9es\"],[\"h2_taking-care-of-business\",\"Prendre Soin Des Affaires\"],[\"h2_fun-faqs-about-svgs\",\"FAQ Amusantes Sur Les SVG\"]]","hide_toc":false,"footnotes":""},"categories":[15005],"tags":[],"class_list":["post-70813","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website-design-fr"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web - DreamHost Blog<\/title>\n<meta name=\"description\" content=\"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web\" \/>\n<meta property=\"og:description\" content=\"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-23T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-07T20:46:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web - DreamHost Blog","description":"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/","og_locale":"en_US","og_type":"article","og_title":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web","og_description":"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-09-23T14:00:00+00:00","article_modified_time":"2025-10-07T20:46:11+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","type":"image\/webp"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"15 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:46:11+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/"},"wordCount":2915,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","articleSection":["Design de Site Web"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/","name":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","datePublished":"2024-09-23T14:00:00+00:00","dateModified":"2025-10-07T20:46:11+00:00","description":"Tu veux des graphismes nets et clairs qui rendent ton site web superbe \u00e0 n\u2019importe quelle \u00e9chelle ? Apprends \u00e0 cr\u00e9er, optimiser et utiliser des fichiers SVG avec notre guide.","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/09\/1460_x_1095_blog_hero_working_with_svg_files.webp","width":1460,"height":1095,"caption":"TCB With SVG: How To Create and Use SVG Files on Your Website"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/fr\/tcb-avec-svg-comment-crer-et-utiliser-des-fichiers-svg-sur-ton-site-web-fr\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"TCB avec SVG : Comment Cr\u00e9er et Utiliser des Fichiers SVG sur Ton Site Web"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"fr","translations":{"fr":70813,"es":49610,"en":49598,"ru":52725,"de":55872,"pt":55918,"pl":55924,"uk":55935,"it":68620,"nl":70839},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70813","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=70813"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70813\/revisions"}],"predecessor-version":[{"id":76376,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/70813\/revisions\/76376"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/49599"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=70813"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=70813"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=70813"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}