{ freetool24 }
Image Tools

Guide SVG pour les développeurs : des graphiques évolutifs qui fonctionnent partout

Découvrez comment fonctionne SVG, comment optimiser les fichiers SVG pour le web, les patterns d'utilisation inline vs externe, et comment animer et manipuler les SVG avec CSS et JavaScript.

7 min de lecture

Illustrations vectorielles colorées sur un écran

SVG (Scalable Vector Graphics) est le seul format d'image nativement compris par les navigateurs en tant que XML structuré, stylisable et scriptable. Un logo en SVG s'affiche avec netteté sur un écran 1×, un écran 4K ou un panneau d'affichage imprimé — le tout à partir du même fichier. Maîtriser SVG fait de vous un développeur frontend plus compétent.

Ce qui distingue SVG

Les formats matriciels (JPEG, PNG, WebP) stockent les images sous forme de grille de pixels. Agrandissez-les et l'image devient floue. SVG stocke les images sous forme de descriptions mathématiques de formes :

<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" fill="#3b82f6" />
  <text x="50" y="55" text-anchor="middle" fill="white" font-size="14">Hello</text>
</svg>

Cela affiche un cercle bleu avec le texte « Hello » — à n'importe quelle taille, parfaitement net.

Quand utiliser SVG :

  • Logos et icônes (doivent rester nets à toutes les tailles)
  • Illustrations et diagrammes
  • Graphiques et visualisations de données (D3.js produit du SVG)
  • Animations et graphiques interactifs
  • Icônes d'interface (bien supérieur aux polices d'icônes)

Quand NE PAS utiliser SVG :

  • Photographies et images photoréalistes complexes (utiliser JPEG/WebP)
  • Captures d'écran (utiliser PNG)
  • Lorsque le SVG comporte des milliers de nœuds (devient plus lent que Canvas)

Les éléments SVG essentiels

Formes

<!-- Rectangle -->
<rect x="10" y="10" width="80" height="60" rx="8" fill="#e2e8f0" stroke="#94a3b8" stroke-width="2"/>

<!-- Circle -->
<circle cx="50" cy="50" r="30" fill="#3b82f6"/>

<!-- Ellipse -->
<ellipse cx="50" cy="50" rx="40" ry="20" fill="#10b981"/>

<!-- Line -->
<line x1="0" y1="0" x2="100" y2="100" stroke="#1e293b" stroke-width="2"/>

<!-- Polygon -->
<polygon points="50,10 90,90 10,90" fill="#f59e0b"/>

<!-- Polyline (open shape) -->
<polyline points="10,80 30,20 50,60 70,30 90,70" fill="none" stroke="#ef4444" stroke-width="3"/>

Les chemins — la forme universelle

L'élément <path> peut décrire n'importe quelle forme à l'aide d'un mini-langage de commandes de déplacement, de lignes, de courbes et d'arcs :

<path d="M 10 80 Q 50 10 90 80" fill="none" stroke="#8b5cf6" stroke-width="3"/>

Commandes de chemin :

  • M x,y — Déplacer vers (lever le crayon)
  • L x,y — Ligne vers
  • H x — Ligne horizontale
  • V y — Ligne verticale
  • Q cx,cy x,y — Courbe de Bézier quadratique
  • C cx1,cy1 cx2,cy2 x,y — Courbe de Bézier cubique
  • A rx,ry rot large-arc sweep x,y — Arc
  • Z — Fermer le chemin

On écrit rarement les chemins à la main — les outils de design les exportent. Mais savoir les lire aide pour le débogage et l'optimisation.

Le viewBox : des SVG responsive

L'attribut viewBox est la clé des SVG responsive :

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- Contenu dessiné dans un espace de coordonnées 200×100 -->
</svg>

Sans width/height sur l'élément, le SVG remplit son conteneur comme une image responsive. Définissez width: 100% en CSS et il s'adapte parfaitement.

.logo svg {
  width: 100%;
  height: auto;
}

Trois façons d'utiliser SVG sur le web

1. Fichier externe (<img>)

<img src="logo.svg" alt="Logo de l'entreprise" width="200" height="80">

✅ Simple, mis en cache, fonctionne partout
❌ Impossible à styliser avec CSS, impossible à scripter

2. Arrière-plan CSS

.icon {
  background-image: url('icon.svg');
  background-size: contain;
  width: 24px;
  height: 24px;
}

✅ Idéal pour les icônes décoratives
❌ Pas de stylisation CSS des éléments internes du SVG, pas d'accessibilité

3. SVG inline (le plus puissant)

<button>
  <svg width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
    <path d="M5 4l7 6-7 6" fill="none" stroke="currentColor" stroke-width="2"/>
  </svg>
  Suivant
</button>

✅ Contrôle CSS total, scriptable, utilise currentColor pour hériter de la couleur du texte
❌ Non mis en cache, augmente la taille du HTML

Pour les icônes dans les composants d'interface, le SVG inline est le meilleur choix. Les sprite sheets (un seul <svg> avec des éléments <symbol> et des références <use>) offrent la mise en cache tout en conservant la stylisabilité.

Styliser SVG avec CSS

Les SVG inline répondent au CSS comme n'importe quel élément HTML :

.icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* contrôle currentColor */
}

.icon:hover {
  color: #1d4ed8;
}

Dans le SVG, utilisez currentColor à la place des couleurs codées en dur :

<path fill="currentColor" d="..."/>
<path stroke="currentColor" d="..."/>

La couleur de l'icône est ainsi entièrement contrôlée par CSS — le mode sombre, les états hover et le thème fonctionnent sans effort.

Animations CSS sur SVG

@keyframes spin {
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
  transform-origin: center;
}

<svg viewBox="0 0 24 24">
  <circle class="spinner" cx="12" cy="12" r="10"
    fill="none" stroke="#3b82f6" stroke-width="2"
    stroke-dasharray="31.4" stroke-dashoffset="10"/>
</svg>

stroke-dasharray et stroke-dashoffset sont les propriétés d'animation les plus puissantes de SVG — elles permettent des animations de tracé où les chemins semblent se dessiner d'eux-mêmes.

Optimiser les fichiers SVG

Les outils de design exportent des SVG avec des métadonnées, des commentaires et des identifiants d'éditeur inutiles. Un SVG exporté typique peut peser 15 Ko ; optimisé, il pourrait ne faire que 3 Ko.

Ce qu'il faut supprimer :

  • La déclaration <?xml version="1.0"?> (inutile en inline)
  • xmlns:xlink, xmlns:dc, les espaces de noms de métadonnées Adobe/Inkscape
  • Les attributs id utilisés uniquement par l'éditeur
  • Les commentaires et les espaces blancs
  • Les éléments de groupe redondants <g>
  • Les valeurs d'attributs par défaut (fill="black", opacity="1")

Des outils comme SVGO automatisent ce processus. Lorsque vous avez besoin d'une version matricielle pour des plateformes qui ne prennent pas en charge SVG, convertissez en PNG avec notre convertisseur SVG vers PNG.

Accessibilité

Les SVG utilisés comme contenu significatif nécessitent des descriptions accessibles :

<svg role="img" aria-labelledby="title desc">
  <title id="title">Graphique des revenus</title>
  <desc id="desc">Graphique à barres montrant une croissance mensuelle des revenus de 10 000 $ en janvier à 45 000 $ en juin 2026</desc>
  <!-- contenu du graphique -->
</svg>

Les SVG décoratifs (icônes à côté de boutons étiquetés) doivent être masqués aux lecteurs d'écran :

<svg aria-hidden="true" focusable="false">...</svg>

Référence rapide : attributs SVG utiles

Attribut Rôle
viewBox="x y w h" Définit le système de coordonnées
fill Couleur de remplissage de la forme (none, hex, currentColor)
stroke Couleur du contour
stroke-width Épaisseur du contour
stroke-linecap Style des extrémités de ligne : butt, round, square
stroke-linejoin Style des angles : miter, round, bevel
opacity Transparence de l'élément (0–1)
transform translate(), rotate(), scale(), skew()
clip-path Masque le contenu selon une forme
filter Applique des filtres SVG (flou, ombre portée, etc.)

SVG est l'un des outils les plus sous-utilisés du web. Une fois que vous maîtrisez le système de coordonnées et le modèle de stylisation, vous pouvez créer des icônes, des illustrations, des graphiques et des animations qui s'affichent parfaitement à toutes les tailles et réagissent dynamiquement aux interactions de l'utilisateur.

Retour à tous les articlesParcourir les outils