0Pricing
HTML Academy · Leçon

SVG intégré ou `img` et `object`

Choisissez la méthode d’intégration SVG adaptée à votre cas d’utilisation.

SVG intégré ou `img` et `object` est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

Trois façons d’intégrer SVG

SVG (graphiques vectoriels adaptables) peut être intégré de trois façons :

  • <img src="icon.svg"> — simple, mis en cache, sans accès à JS/CSS
  • <object data="chart.svg"> — interaction intégrée, document distinct
  • SVG intégré directement dans HTML — accès complet à CSS/JS, aucune requête supplémentaire

SVG avec img src

La méthode la plus simple : référencez SVG comme une image :

<img src="logo.svg" alt="Company logo" width="120" height="40">
<!-- Pros: simple, cached by browser, clean HTML -->
<!-- Cons: cannot style with CSS, no JS interaction,
     cannot use SVG filters or animations from CSS -->

SVG d’arrière-plan CSS

Utilisez SVG comme arrière-plan CSS pour des icônes décoratives :

.icon-check {
  background-image: url('/icons/check.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 1rem;
  height: 1rem;
}
<!-- Decorative: not in accessibility tree, no alt text needed -->

Élément object pour SVG

Intégrez SVG avec <object> pour obtenir un SVG interactif :

<object
  type="image/svg+xml"
  data="interactive-chart.svg"
  width="800"
  height="400"
  aria-label="Interactive revenue chart"
>
  <!-- Fallback: -->
  <img src="chart-static.png" alt="Revenue chart">
</object>
<!-- SVG can have its own scripts
     SVG document is somewhat isolated from parent page -->

SVG intégré

Intégrez SVG directement dans HTML pour bénéficier d’un contrôle complet :

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 24 24"
  width="24"
  height="24"
  aria-hidden="true"
  focusable="false"
>
  <path d="M12 2L2 7l10 5 10-5-10-5z"/>
  <path d="M2 17l10 5 10-5"/>
</svg>

Avantages du SVG intégré

Pourquoi utiliser un SVG intégré :

  • Style CSS complet : fill, stroke, transitions, animations
  • Interaction JavaScript : sélectionnez les éléments SVG et écoutez les événements
  • currentColor : hérite de la couleur définie par le CSS de l’élément parent
  • Aucune requête HTTP supplémentaire
  • Peut faire partie de l’arbre d’accessibilité avec un rôle et un titre

Inconvénients du SVG intégré

Inconvénients du SVG intégré :

  • Le fichier HTML devient plus volumineux
  • Il n’est pas mis en cache séparément par le navigateur
  • Il n’est pas facile de réutiliser le même SVG sur plusieurs pages sans duplication
  • Le code est répété pour les icônes réutilisées

Élément use pour une sprite

Définissez les icônes SVG une seule fois et référencez-les avec <use> :

<!-- Icon sprite (often hidden): -->
<svg style="display:none">
  <symbol id="icon-close" viewBox="0 0 24 24">
    <path d="M18 6L6 18M6 6l12 12"/>
  </symbol>
  <symbol id="icon-check" viewBox="0 0 24 24">
    <path d="M20 6L9 17l-5-5"/>
  </symbol>
</svg>

<!-- Use the icons: -->
<svg aria-hidden="true"><use href="#icon-close"/></svg>
<svg aria-hidden="true"><use href="#icon-check"/></svg>

SVG accessible

Rendez les SVG intégrés accessibles :

<!-- Informative SVG: -->
<svg role="img" aria-labelledby="svg-title">
  <title id="svg-title">Revenue growth chart Q1-Q4 2024</title>
  <!-- chart paths -->
</svg>

<!-- Decorative SVG: -->
<svg aria-hidden="true" focusable="false">
  <!-- decorative paths -->
</svg>

<!-- focusable="false" needed for IE to prevent tab focus -->

Astuce avec currentColor

Utilisez currentColor pour hériter de la couleur du texte définie par le CSS :

<button class="btn btn-primary">
  <svg aria-hidden="true" width="16" height="16">
    <path fill="currentColor" d="M10 6H6v4H2v4h4v4h4v-4h4v-4h-4V6z"/>
  </svg>
  Add Item
</button>
<!-- fill="currentColor" inherits the button's text color
     When button is hovered/focused, icon color changes too
     No need for separate icon color rules -->

Vérification rapide

Quel est le principal avantage du SVG intégré par rapport à l’utilisation d’un SVG avec img src ?

Récapitulatif : intégration de SVG

Principes essentiels de l’intégration de SVG :

  • <img src> — simple, sans accès à CSS/JS, mis en cache
  • Arrière-plan CSS — réservé aux éléments décoratifs
  • <object data> — SVG interactif, quelque peu isolé
  • SVG intégré — contrôle complet avec CSS/JS, aucune requête supplémentaire
  • Sprite SVG avec <symbol> + <use> — réutilisation efficace

Questions Fréquemment Posées

La leçon « SVG intégré ou `img` et `object` » est-elle gratuite ?

Oui — le texte complet de « SVG intégré ou `img` et `object` » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « SVG intégré ou `img` et `object` » ?

Choisissez la méthode d’intégration SVG adaptée à votre cas d’utilisation. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « SVG intégré ou `img` et `object` » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. SVG intégré ou `img` et `object`
  2. Formes SVG de base : `rect`, `circle`, `path`
  3. `viewBox` SVG et mise à l’échelle adaptative
  4. Animer un SVG avec CSS et SMIL
← Retour à HTML Academy