Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Dès que vous utilisez des logiciels tels Inkscape ou Boxy SVG vous obtenez du SVG externe c'est à dire des fichiers
d'extension .svg contenant du code SVG mais aussi parfois du CSS et du JavaScript.
Se pose alors le problème de l'insertion de ces fichiers dans une page Web.
Pour insérer un document SVG dans une page vous pouvez recourir au HTML ou au CSS.
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.
C'est vrai mais à condition qu'il s'agit de documents SVG simples. Dans d'autres cas il faut mieux utiliser la balise OBJECT.
Ci-dessous trois fichiers SVG insérés dans la page web via le HTML dont deux insérés deux fois :
Document inséré avec la balise IMG.
Affichage correct !
Ce fichier comprend un script pour animer le rond.
Ci-dessous fichier inséré avec la balise IMG :
Il n'y a pas d'animation !
Cette fois insertion du même document avec l'élément OBJECT :
Il y a animation du rond !
Ce fichier comprend des liens vers des images (des gifs animés).
Ci-dessous fichier inséré avec l'élément IMG :
Les gifs animés n'apparaissent pas.
Ci-dessous, insertion cette fois avec la balise OBJECT :
Les gifs animés apparaissent !
Le document rond_auto.svg comprend un script pour animer le cercle. Il faut donc utiliser la balise object pour l'insérer dans la page
sinon le script ne fonctionne pas.
Le document fondeurs.svg comprend des liens vers d'autres images (emploi de la l'instruction image xlink:href ...). Il faut donc aussi
utiliser la balise object pour l'insérer dans la page sinon les images liées n'apparaissent pas.
Un fichier SVG peut comprendre également une feuille de style interne. Dans ce cas l'insertion avec la balise IMG fonctionne bien avec tous les
navigateurs.
Donc privilégiez l'animation d'éléments SVG via un "keyframes CSS" ou le SMIL plutôt qu'avec le JavaScript.
Pour pouvez aussi transformer du code SVG externe en code interne à la page ...
Un image vectorielle peut être (comme une image matricielle) le "background" d'une boite HTML.
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 son conteneeur.
Insertion réussie ! Le fichier "piste.svg" ne comporte que du code SVG.
Tentative d'insertion via la propriété background d'un fichier SVG complexe (du SVG + une animation en CSS).
Le code :
Echec ! la boite est vide !
Attention l'insertion d'une image vectorielle via la propriété background suppose qu'il s'agit d'un fichier SVG simple (que du SVG).