Confidentialite et stockage

Nous utilisons un stockage navigateur necessaire pour la langue, la connexion et le flux de l editeur. Les polices et symboles recents ne sont conserves que si vous autorisez le stockage de confort.

Pas de suivi marketing ni de cookies publicitaires.

Qu'est-ce que le SVG ? — Le format vectoriel expliqué simplement

Scalable Vector Graphics de A à Z

SVG et graphisme vectoriel

SVG signifie Scalable Vector Graphics : un format d'image basé sur XML qui ne décrit pas les images en pixels, mais sous forme de formes mathématiques. Cela permet aux SVG de s'adapter à n'importe quelle taille sans perte de qualité. Dans cet article, nous expliquons tout ce qu'il faut savoir sur le SVG.

Illustration générée pour l’article Qu'est-ce que le SVG ? — Le format vectoriel expliqué simplement

SVG : la définition technique

Le SVG est un standard ouvert du W3C, publié pour la première fois en 2001. Il décrit des graphiques vectoriels bidimensionnels avec une syntaxe XML :

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#4F46E5" />
</svg>

Cet exemple dessine un cercle violet. Le navigateur interprète ces instructions XML et l'affiche dans n'importe quelle résolution.

Pourquoi le SVG est si particulier

Le SVG présente des avantages uniques face aux formats pixelisés :

  • Évolutivité infinie — Du 16×16 px à une bannière géante, sans perte de qualité
  • Taille de fichier très réduite — Un logo en SVG pèse souvent seulement quelques kilo-octets
  • Format texte — Un SVG peut être modifié dans n'importe quel éditeur de texte
  • Contenu indexable — Le texte dans le SVG peut être lu par les moteurs de recherche
  • Animable — Les éléments SVG peuvent être animés via CSS ou JavaScript
  • Accessible — Les SVG prennent en charge les attributs ARIA ainsi que les balises <title> et <desc>

Aperçu des éléments SVG

Les éléments SVG les plus importants :

  • <rect> — Rectangle
  • <circle> — Cercle
  • <ellipse> — Ellipse
  • <line> — Ligne
  • <polyline> — Ligne brisée
  • <polygon> — Polygone
  • <path> — Tracé libre, l'élément le plus puissant
  • <text> — Texte
  • <g> — Groupe d'éléments

Où le SVG est-il utilisé ?

Le SVG est omniprésent dans le monde numérique :

  • Logos et icônes — Le principal cas d'usage
  • Infographies — Visualisations de données interactives et adaptables
  • Éléments d'interface — Boutons, illustrations, arrière-plans
  • Cartes — Plans et cartes interactives
  • Animations — Du simple effet de survol au motion design complexe
  • Impression — Base pour des modèles haute résolution

Compatibilité navigateurs

Le SVG est pleinement pris en charge par tous les navigateurs modernes :

  • Chrome, Firefox, Safari et Edge : prise en charge complète depuis des années
  • Safari iOS et Chrome Android : affichage mobile parfait
  • IE 11 : prise en charge de base, avec quelques limites CSS

Aujourd'hui, vous pouvez utiliser le SVG en toute confiance dans n'importe quel projet web.

Le SVG est le format parfait pour les logos : scalable, léger, modifiable et universellement pris en charge. Notre éditeur de logos exporte votre logo directement en SVG, prêt pour le web, l'impression et tout le reste.

Prêt à créer votre logo ?

Éditeur visuel gratuit avec export SVG.

Articles associés