La balise image de SVG

La balise image du format SVG permet d'insérer (sous forme d'un lien) une image matricielle dans une zone de dessin SVG.
Ne confondez pas à la balise img du langage HTML.

Ci-dessous deux zones SVG avec insertion d'images matricielles.

Première zone de dessin SVG

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" width="160" height="200" x = '0' y ='0' /> <image xlink:href="../images/jolie_fille.jpg" width="320" height="400" 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 deux fois une image matricielle (jolie_fille.jpg) via la balise image.
Sachant que les dimensions d'origine de l'image matricielle sont 480 par 600 remarquez que l'image matricielle est insérée deux fois dans le canevas avec une réduction au 1/3 puis au 2/3.

Syntaxe

Insertion d'un fichier SVG

Ci-dessous un fichier SVG dans lequel deux images matricielles sont insérées.
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 = '95%' height = 'auto' style ="background : linear-gradient(180deg,black,navy,blue );" viewBox ="0 0 900 600" 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 et pour 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 obligatoire dans tous les cas.
Toujours pour la balise SVG notez les valeurs des attributs width & height (95% & auto) et le nouvel attribut viewBox = 0 0 900 600". Je vais bientôt vous expliquer l'intérêt de toutes ces nouveautés.

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 l'image matricielle.

Il peut donc être intéressant d'utiliser le logiciel Inskcape car avec cet outil vous pouvez incorporer l'image matricielle dans un fichier SVG. 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 pas stockée sur le serveur ...
Extrait du code du document 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