SVG en ligne ou img : choisir son comportement

Utilise un SVG dans un élément <img> lorsque tu veux afficher un graphisme terminé. Place le SVG en ligne lorsque la page doit modifier des formes individuelles avec CSS ou JavaScript. Les deux approches peuvent afficher le même dessin vectoriel à différentes tailles ; l’intégrer en ligne n’améliore pas sa géométrie.

Cette distinction compte lorsqu’un logo paraît correct dans un onglet de navigateur mais ignore la règle de couleur de ton site. Le fichier peut être correct. La règle n’a peut-être simplement aucun accès à son contenu. Ci-dessous, la même illustration de montagne apparaît sous les deux formes afin de vérifier cette différence avant de modifier ta chaîne de traitement des fichiers.

Choisis le comportement nécessaire

Un SVG externe reste un fichier vectoriel lorsqu’il est affiché via <img>. La limite se situe entre la page et les éléments internes du fichier. Le CSS de la page peut redimensionner, tourner ou atténuer l’élément image, mais un sélecteur comme .logo path ne peut pas atteindre les tracés de sa ressource src. Les formes en ligne appartiennent à l’arbre du document de la page. Le guide MDN d’intégration SVG décrit ces deux approches.

Si tu vérifies encore le contenu du fichier, commence par ce qu’est un fichier SVG. Une extension .svg ne signifie pas que chaque détail visible soit un tracé. Pour une livraison destinée à une boutique, suis le guide des icônes SVG personnalisées Shopify après avoir vérifié le contenu du fichier.

Teste le même dessin sous les deux formes

Pour cette démonstration, nous avons écrit à la main deux tracés de montagne et un cercle de soleil. Nous avons chargé le dessin depuis un fichier séparé et collé les mêmes formes dans le HTML. C’est un test d’intégration, et non un résultat de conversion PerfectVector.

Dans notre test Chromium, les deux versions occupaient initialement 360 × 240 pixels CSS et affichaient un soleil ambré. Nous avons ensuite activé une règle de page ciblant .sun. Le soleil en ligne est devenu corail ; celui de l’image externe est resté ambré. Réduire les deux boîtes à 180 × 120 a changé leur taille d’affichage sans modifier cette différence.

1. Enregistre le fichier SVG séparé

Crée artwork.svg avec cette source complète. Le viewBox définit l’espace de coordonnées du dessin. La largeur et la hauteur lui donnent des dimensions de départ explicites.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Ajoute l’image et la copie en ligne

Enregistre le code suivant sous index.html à côté de artwork.svg, puis ouvre-le dans un navigateur. Les deux graphismes possèdent la même géométrie et les mêmes attributs de peinture. La version en ligne a aussi un nom pour les technologies d’assistance.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

La capture utilise une mise en page de comparaison avec des styles autour de ces mêmes formes. Le petit exemple ci-dessus facilite la reproduction du comportement.

3. Change une variable à la fois

Retire class="theme" de body et recharge. Les deux soleils devraient alors être ambrés. Rétablis la classe : seul le soleil en ligne devrait devenir corail. Remplace dans .artwork width: 360px par width: 180px ; si le conteneur a assez d’espace, les deux graphismes devraient passer à 180 × 120.

Pour modifier durablement le soleil de l’image externe, change son fill dans artwork.svg. Pour le faire réagir à l’état de la page, choisis le balisage en ligne ou une autre méthode de livraison délibérée. Notre guide sur la modification des couleurs SVG couvre la modification du fichier lui-même.

Le nom .sun a été ajouté pour cet exemple. Un fichier converti ou exporté ne contiendra pas nécessairement une classe utile pour chaque partie significative. Inspecte et nomme les formes que tu veux contrôler au lieu de supposer qu’un objet visible soit un tracé sélectionnable unique.

Garde explicites la taille et les noms accessibles

Conserve le viewBox lorsque tu transfères le dessin dans le HTML. Définis les attributs width et height comme base cohérente, puis applique du CSS adaptatif. Pour cette illustration 3:2, width: 180px; height: auto préserve les proportions. Une grande marge vide dans le viewBox reste une partie de la zone de dessin avec les deux méthodes ; changer l’intégration ne la supprime pas.

Lorsque la boîte de mise en page possède un autre rapport, le guide d’ajustement preserveAspectRatio compare l’affichage complet du dessin, le recadrage et la déformation.

Pour une image externe significative, écris alt sur le <img> HTML. Pour une image en ligne significative, l’exemple utilise role="img" et aria-labelledby pointant vers son <title>. Le SVG en ligne n’utilise pas l’attribut alt de l’image HTML. Ces possibilités de nommage sont documentées dans le guide MDN SVG dans HTML.

Si tu répètes l’exemple en ligne, donne à chaque ID de titre une valeur unique et actualise son aria-labelledby correspondant. La même discipline s’applique aux ID utilisés par les dégradés, masques ou chemins de découpage. Pour un dessin décoratif placé à côté d’un texte visible équivalent, utilise un alt vide sur <img> ou masque le SVG en ligne aux technologies d’assistance avec aria-hidden="true". Teste le lien ou bouton complet en contexte afin que sa fonction reste nommée.

Pour de nombreuses icônes réutilisables, un sprite de symboles SVG propose une approche distincte de définition et d’instances. Détermine si tu as besoin de cette réutilisation avant de coller un grand ensemble de copies dans chaque page.

Considère les performances comme une mesure

Le balisage en ligne place les formes dans le document au lieu de récupérer le dessin comme ressource image séparée. Il augmente aussi le balisage du document. Un fichier externe peut être réutilisé depuis le cache du navigateur, selon son URL, ses en-têtes de réponse et l’état du cache. Le guide MDN du cache HTTP explique ces conditions.

Aucun de ces faits ne démontre quelle version accélérera ta page. Compare la page réelle lors d’une première visite et d’une visite répétée, avec son nombre réel de copies et la complexité réelle de ses SVG. Cette démonstration teste l’accès à la peinture et la taille ; ce n’est pas un banc d’essai de vitesse de chargement.

Le mode image externe a aussi des restrictions au-delà du CSS. MDN documente que SVG utilisé comme image désactive JavaScript et limite les ressources externes. Ne transfère pas un SVG inconnu en ligne simplement pour faire fonctionner une fonctionnalité absente. Examine et assainis le balisage non fiable avant de l’incorporer à une page.

Lorsque ton dessin de départ est uniquement un PNG

La vectorisation précède ce choix d’intégration si la source ne possède pas les formes nécessaires. Pour un logo ou une illustration matricielle adaptés, convertis le PNG en SVG avec PerfectVector, inspecte le résultat par rapport à la source et garde le SVG accepté comme original du dessin. Vérifie la silhouette, les trous et les petites régions colorées avant d’ajouter des classes ou de préparer une copie web.

PerfectVector fournit le dessin vectoriel. Tu dois toujours choisir les parties qui répondent au CSS, ajouter des noms significatifs et tester la page finale. Convertir une image ne produit pas automatiquement un composant avec des noms de classes sémantiques. Si un SVG existant contient déjà des tracés utilisables, travaille avec eux au lieu de tracer une copie rendue.

Vérifie aussi si le SVG contient une image matricielle intégrée. Coller un tel fichier en ligne expose son élément <image> ; cela ne transforme pas ses pixels en formes recolorables séparément. Pour une photographie qui doit garder son aspect photographique, conserve un format de livraison matriciel adapté.

Vérifie la page finale

• Confirme que le dessin autonome paraît correct avant de tester le CSS de la page.
• Choisis <img> pour un affichage terminé ou SVG en ligne pour contrôler directement ses éléments.
• Vérifie la taille rendue et les proportions dans la mise en page la plus étroite prise en charge.
• Teste la forme exacte que tu veux recolorer ; ne te fie pas à une règle path générale.
• Vérifie les noms des images, les ID en double et le lien ou bouton environnant.
• Mesure le comportement de chargement s’il influence ta décision ; ne déduis pas un résultat de vitesse de cet exemple.

FAQ

Un SVG devient-il un bitmap lorsque j’utilise une balise img ? Non. Un SVG chargé via img peut encore afficher de la géométrie vectorielle. L’élément image empêche la page hôte de sélectionner directement ses formes internes ; il ne les convertit pas en PNG.

Pourquoi currentColor ne suit-il pas la couleur du texte de ma page ? Une image SVG externe possède son propre contexte de style. La couleur de la page ne devient pas automatiquement le currentColor utilisé dans ce fichier. Utilise SVG en ligne lorsque sa peinture doit hériter de la page et définis le remplissage ou contour concerné avec currentColor.

Dois-je convertir mon SVG existant avant de le placer en ligne ? Aucune conversion n’est nécessaire s’il contient déjà les formes vectorielles voulues. Examine son balisage, préserve les références nécessaires, ajoute un nommage adapté et teste-le dans la page. La conversion matricielle vers vectorielle est pertinente uniquement pour reconstruire des formes à partir d’une source matricielle.

Sources

1. MDN — Inclure des graphismes vectoriels dans HTML — Comportement des images externes et de l’intégration en ligne.
2. MDN — Introduction à SVG dans HTML — Balisage en ligne, viewBox et nommage accessible.
3. MDN — Cache HTTP — La réutilisation du cache dépend de la politique de réponse et de l’identité des ressources.
4. MDN — SVG comme image — Restrictions de scripts et de ressources dans les contextes d’image.

Choisis l’intégration qui correspond au rôle du dessin, puis teste-la avec les styles réels de la page. Si ta seule source est un PNG adapté, reconstruis d’abord ses formes vectorielles, inspecte le résultat et prépare le dessin accepté pour cette intégration.