Sommaire partiellement masqué - faites défiler !
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
La balise image du format SVG permet d'insérer (sous forme d'un lien) une image matricielle dans une zone de dessin SVG.
C'est donc l'équivalent de la balise IMG du langage HTML.
Attention cette balise se contente de créer un lien entre le canevas et l'image source.
Remarque préalable : la balise SVG est un élément HTML de la page ; donc on peut lui appliquer un dégradé CSS, comme je fais ici.
La balise image du format SVG permet d'insérer, de positionner et de redimensionner dans un canevas SVG une
image bitmap.
Dans ce canevas j'insère trois fois la même image matricielle (un fichier JPG de 480 par 600) via la balise image.
Observez que pour la première insertion les attributs x et y sont absents donc leurs valeurs sont égales à zéro.
Pour chaque insertion je précise soit la hauteur soit la largeur de l'image ; le navigateur calcule l'autre dimension dans le respect des proportions
de l'image source.
Notez que les largeurs des images voire leur position sont exprimées en pourcentage des dimensions du conteneur (balise SVG).
SVG est un outil pour dessiner. Donc pourquoi intégrer dans une zone de dessin des images ?
Et bien tout simplement pour développer plus vite.
Prenons un exemple simple. Vous voulez créer une animation SVG : deux skieurs de fond qui se déplacent dans un superbe décor.
Dessiner vous même SVG le décor et les personnages serait un travail long et fastidieux.
Solution :
Une belle photo (le décor) sera le background de la balise SVG.
deux fichiers gif animés insérées via la balise image seront les "sprites" de cette animation.
Il suffit ensuite d'animer les deux "sprites".
La production d'animations SVG est traitée dans ce tuto en deuxième partie.
Et vous verrez qu'il y abondance de solutions : SMIL, JS, CSS mais que progressivement la solution CSS s'impose.