Intégration de fichiers SVG dans une page web

Une image vectorielle peut être insérée dans une page web via le HTML ou via le CSS.

Insertion via le HTML

Jusqu'à présent je vous ai dit que pour intégrer une image SVG dans une page web via le HTML il suffisait d'utiliser la balise img commme pour une image matricielle.

Oui, mais à condition qu'il s'agisse de fichiers SVG simples. Dans d'autres cas il faut utiliser la balise object.

Ci-dessous quatre fichiers SVG intégrés dans la page web via le HTML :

Le fichier "rectangles.svg"

image SVG

Le fichier "rond_auto.svg"

Le fichier "fondeurs.svg"

Le fichier "svg_avec_externe.svg"

Le code de la page (extraits)

... <h4>Le fichier "rectangles.svg"</h4> <img src ="rectangles.svg" alt ="image SVG" /> <h4>Le fichier "rond_auto.svg"</h4> <object type="image/svg+xml" data="rond_auto.svg"></object> <h4>Le fichier "fondeurs.svg"</h4> <object type="image/svg+xml" data="fondeurs.svg"></object> <h4>Le fichier "svg_avec_externe.svg"</h4> <object type="image/svg+xml" data="svg_avec_externe.svg"></object> ...

Pour conclure, si vous avez un doute insérez l'image SVG dans la page avec la balise object.
De plus avec cette balise le visiteur ne peut pas récupérer le code du fichier SVG avec la commande "enregistrer sous ..."

Insérer une image vectorielle via le CSS

Un image vectorielle peut être (comme une image matricielle) le "background" d'une boîte HTML.

On peut définir une boîte avec la balise DIV mais aussi avec la balise SVG ou CANVAS !

<svg width ="100%" height ="auto" viewBox ="0 0 900 600" style ="background-image :url(../images/piste.svg); background-size : cover;" > ..

Le canevas SVG a une taille adaptative et a pour "background" une image vectorielle.
N'oubliez pas la propriété background-size pour que l'image de fond s'adapte aux dimensions de la boîte.

Démo

Actualisez la page si vous voulez redémarrer l'animation !

L'animation en SVG est évoquée dans le tutoriel suivant ("Animer des objets SVG").
Retour menu