Vous pouvez me contacter via Facebook (questions, critiques constructives) : 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 dans le langage HTML.
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 matricielle.
Attention il s'agit d'un simple lien entre le canevas et l'image et non pas d'une incorporation (duplication de l'image dans le fichier destination).
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.
Notez que les largeurs des images voire leur position sont exprimées en pourcentage des dimensions du conteneur (balise SVG).
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 :
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
contienne le "namespace" : xmlns:xlink="http://www.w3.org/1999/xlink".
Le "namespace" xmlns="http://www.w3.org/2000/svg" est lui aussi obligatoire pour un code SVG externe.
La balise image se contente de créer un liaison entre la page web (ou le fichier SVG) et une image matricielle.
Donc si le chemin est rompu, l'image matricielle n'apparait plus !
Il peut donc être intéressant d'utiliser le logiciel Inskcape car avec cet outil vous pouvez incorporer l'image matricielle dans un document Inkscape ce qui signifie que l'image bitmap sera encodée dans le fichier SVG.
Ci-dessous un fichier produit avec Inkscape contenant une image matricielle incorporée.
L'image apparait alors que l'original (l'image JPG) n'est même pas stockée sur le serveur ...
Après incorporation de l'image matricielle dans le document Inkscape je me suis contenté de rajouter deux rectangles noirs (la censure).
Attention dans le cadre d'une incorporation d'image matricielle le fichier SVG correspondant est un peu plus lourd que l'image matricielle d'origine
et bien sûr beaucoup plus lourd qu'un document avec une simple liaison vers l'image source.