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 dans le langage HTML.

Utilisation de la balise IMAGE

Exemple 1

Le code correspondant dans la page web

<svg width = '900' height = '600' style ="background : linear-gradient( 45deg,blue skyblue, white );" > <image xlink:href="../images/jolie_fille.jpg" height="200" /> <image xlink:href="../images/jolie_fille.jpg" height ="100" x = '300' y ='200' /> <image xlink:href="../images/jolie_fille.jpg" width="240" x = '450' y ='300' /> </svg>

Remarque préalable : la balise SVG est un élément HTML 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.

Syntaxe de 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.

Vous pouvez raisonner en pourcentages - exemple 2

Le code correspondant

<svg width = '900' height = '600' style ="background : skyblue;" > <image xlink:href="../images/bikini2.jpg" width ="25%" /> <image xlink:href="../images/bikini3.jpg" width ="15%" x = '300' y ='200' /> <image xlink:href="../images/bikini4.jpg" width="30%" x = '50%' y ='50%' /> </svg>

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 dans un site. 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 width = '900' height = '600' 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" /> </svg>

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.

Incorporer une image matricielle dans un fichier SVG

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. image SVG

L'image apparait alors que l'original (l'image JPG) n'est même pas stockée sur le serveur ...

Extrait du code SVG généré par Inkscape

... <image width="120" height="1.5e+002" preserveAspectRatio="none" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QAiRXhpZgAATU0AKgAAAAg 2wBDAAIBAQIBAQICAgICAgICAwUDAwMDAwYEBAMFBwYHBwcGBwcICQsJCAgKCAcHCg0KCgsMDAwM BwkODw0MDgsMDAz/2wBDAQICAgMDAwYDAwYMCAcIDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwM DAwMDAwMDAwMDAwMDAwMDAwMDAwMDAz/wAARCAEMALwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEA AAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJx FDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNk ZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJ ytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQF BgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMz UvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3 eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna 4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD5Z8iiaCrsMFE0Ffz7UP2QzPJq94bg/wCJ lUf2ar3huD/iZVy1AOks4K1rOCqNn0rXs4K5tTq1OW+LVj/xbfVf+2f/AKMSv1E/YJ8AalqP7Afw 21L/AJdf7Di/9GbK/NL4kWOPhvqv/XCv1h/4JuT/ANpf8Evfhx/2BJIP++LuZK+s4Nq/7RM8XPqd" ... <rect style="fill:black;" id="rect30" width="81.05" height="18.49" x="19.28" y="116.1" /> <rect style="fill:black;" id="rect32" width="67.17" height="19.41" x="36.54" y="73.25" />

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.
Retour menu