Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

SVG : la balise image

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.

Utilisation de la balise IMAGE

Exemple 1

Le code correspondant dans la page web

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.

Syntaxe de la balise IMAGE

Notez bien les attributs de la balise image :
• xlink:href : chemin relatif de l'image (c'est à dire le chemin par rapport à la page web)
• width / height : largeur OU hauteur de l'image dans le canevas SVG
• x et y : coordonnées de l'arête supérieure gauche de l'image dans le canevas ; par défaut x =0 et y =0

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 intégrée.

Vous pouvez raisonner en pourcentages - exemple 2

Le code SVG correspondant (extrait)

Notez que les largeurs des images voire leur position sont exprimées en pourcentage des dimensions du conteneur (balise SVG).

Récupération d'images matricielles sur la "toile"

Ci-dessous un document SVG dans lequel deux images PNG sont insérées par liaison.
Ces images sont directement récupérées sur la "toile".
Avantage : pas besoin de les installer sur le serveur.
Inconvénient : pour que ces images apparaissent dans le canevas il faut une connexion internet !

Le code du fichier terre_lune.svg ci-dessous : <svg ... style ="background : linear-gradient(180deg,black,navy,blue );" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > <image xlink:href = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png' width ="20" height ="20" x ="100" y="100" /> <image xlink:href = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png' width ="60" height ="60" x ="400" y="200" /> ...

On pourrait animer ces éléments SVG ... La terre tournant autour du soleil (déplacement le long d'un chemin).
Je n'en dis pas plus pour l'instant.

Dans le cadre d'un fichier SVG (code SVG externe) et afin que la balise IMAGE soit interprétée, il faut impérativement que la balise SVG début contienne le "namespace" : xmlns:xlink="http://www.w3.org/1999/xlink".
Rappel : le "namespace" xmlns="http://www.w3.org/2000/svg" est lui aussi obligatoire pour un code SVG externe.
Ces espaces de noms devraient devenir inutiles dans le cadre de SVG2. Mais comme cette deuxième version est encore très mal implémentée par les navigateurs ...

Mais pourquoi insérer des images matricielles dans un canevas 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.