{"id":21394,"date":"2022-07-01T01:00:00","date_gmt":"2022-06-30T23:00:00","guid":{"rendered":"https:\/\/graphiste.com\/blog\/?p=21394"},"modified":"2025-08-19T11:43:56","modified_gmt":"2025-08-19T09:43:56","slug":"pourquoi-comment-utiliser-svg-web","status":"publish","type":"post","link":"https:\/\/graphiste.com\/blog\/pourquoi-comment-utiliser-svg-web\/","title":{"rendered":"Pourquoi et comment utiliser le SVG sur le web\u00a0?"},"content":{"rendered":"

Un SVG<\/strong>, ou bien encore \u00ab Scalable Vector Graphics<\/strong> \u00bb est un format de fichier destin\u00e9 \u00e0 afficher du contenu graphique mais, cette fois, sous forme de code XML.<\/strong><\/p>\n

Comme son acronyme l\u2019indique, cette extension de fichier utilise notamment le principe du vecteur, ce qui favorise grandement la qualit\u00e9 et l\u2019efficacit\u00e9 de votre visuel \u00e9tant donn\u00e9 qu\u2019il sera vectoris\u00e9<\/strong>.<\/p>\n

Mais alors, dans quelle condition utiliser un format SVG ? Et comment l\u2019utiliser<\/strong> correctement ?<\/p>\n

 <\/p>\n

Pourquoi utiliser le format SVG\u00a0?<\/h2>\n

Les avantages du SVG<\/h4>\n

C\u2019est l\u00e9ger !<\/strong><\/p>\n

L’un des avantages fondamental du SVG, c\u2019est avant tout sa l\u00e9g\u00e8ret\u00e9 et votre \u00e9conomie en poids de t\u00e9l\u00e9chargement. Les images matricielles (pix\u00e9lis\u00e9es) sont notamment lourdes \u00e0 charger, \u00e0 c\u00f4t\u00e9 de quelques lignes de codes…<\/p>\n

\"\"<\/p>\n

Si votre image (.JPG ou .PNG) n\u2019est pas travaill\u00e9e de fa\u00e7on \u00e0 ce que votre site internet soit rapide, c\u2019est \u00e0 dire que si vous ne faites pas attention \u00e0 son poids, sa taille et son extension, la page web que vous allez cr\u00e9er pourrait \u00eatre catastrophique \u00e0 charger pour les visiteurs qui n\u2019ont pas \u00e9norm\u00e9ment de connexion internet !<\/p>\n

Le SVG, c\u2019est tout simplement du code XML qui va remplacer une image matricielle.<\/p>\n

\"Sch\u00e9ma<\/p>\n

Attention : Attention, vous ne pouvez pas tout faire gr\u00e2ce \u00e0 du SVG. Vous ne pouvez pas prendre en compte une v\u00e9ritable photo sortie de votre appareil, ou m\u00eame de votre t\u00e9l\u00e9phone.<\/p><\/blockquote>\n

Les donn\u00e9es seraient trop lourdes, voire impossibles \u00e0 cr\u00e9er m\u00eame avec un logiciel professionnel. Nous parlons ici d\u2019illustrations, de logos, d\u2019ic\u00f4nes, de vecteurs.<\/p>\n

 <\/p>\n

Un format de qualit\u00e9 vectorielle<\/h4>\n

Le deuxi\u00e8me avantage du SVG c\u2019est la qualit\u00e9 de son rendu : au lieu de calculer chaque pixel de votre carr\u00e9, contrairement \u00e0 une photo matricielle, votre fichier SVG va d\u00e9terminer 4 points et cr\u00e9er 4 vecteurs.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Voil\u00e0 le grand avantage du SVG : la m\u00e9thode de lecture est beaucoup plus rapide, elle est bas\u00e9e sur un code bien pr\u00e9cis que votre navigateur va transformer en visuel.<\/p><\/blockquote>\n

 <\/p>\n

La possibilit\u00e9 de cr\u00e9er des animations en CSS<\/h4>\n

Un site est parfois anim\u00e9 gr\u00e2ce \u00e0 des vid\u00e9os, mais \u00e9galement du CSS. Rapidement, le CSS est une forme de style (en cascade) permettant de styliser un contenu.<\/p>\n

Lorsque que vous chargez une page web sur internet, il faut bien comprendre que plusieurs \u00ab formats \u00bb de fichiers sont t\u00e9l\u00e9charg\u00e9s sur votre navigateur et en particulier :<\/p>\n