La balise image de SVG

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

Premier "canevas"

J'ai indiqué le terme canevas entre guillemets car celui-ci doit être en principe être utilisé pour les zones de dessin remplies avec la technologie CANVAS (et non pas 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>

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

Deuxième zone de dessin SVG

Attention ici le code SVG n'a pas été écrit dans la page web mais dans un fichier SVG qui ensuite a été inséré dans cette page.

Le code du fichier vectoriel "route.svg"

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width ="95%" height ="auto" style ="background-image :url(../images/route_nuit.jpg); background-size : cover;" viewBox ="0 0 900 600" > <image xlink:href="../images/auto2.png" x ="30" y ="350" width ="300" height ="150" /> </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 comme attribut : xmlns:xlink="http://www.w3.org/1999/xlink"
Notez l'attribut viewBox = 0 0 900 600". Je vais bientôt vous expliquer l'intérêt de cet attribut.
Comme l'image matricielle est insérée sous forme d'un lien (et non pas incorporée) le poids du fichier "route.svg" est de 1 KO.

Comme vous pouvez observer, le document SVG a pour arrière plan une image matricielle : "route_nuit.jpg".
Cette image de fond s'adapte à la taille du canevas grâce à la propriété background-size.
Pour plus d'explication sur cette nouvelle propriété CSS voir le tutoriel CSS3.

Troisième zone de dessin SVG

Les images insérées n'apparaissent pas car le chemin (valeur de l'attribut xlink:href) est incorrect !
La valeur de cet attribut doit être le chemin relatif de la page (ou du fichier SVG) par rapport à l'image matricielle.

Incorporer une image matricielle dans un fichier SVG

Il peut donc être intéressant d'utiliser le logiciel Inskcape car avec cet outil vous pouvez incorporer une image matricielle dans un fichier SVG. Ce qui signifie que l'image bitmap sera encodée dans le fichier SVG. image SVG

Ci-dessus un fichier produit avec Inkscape contenant une image matricielle.
L'image apparait alors que l'original (l'image jpg) n'est pas stockée sur le serveur mais elle est incorporée (et non pas simplement liée) ...

Extrait du code du fichier SVG avec l'incorporation de l'image bitmap :

... <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" ...

Attention dans le cadre d'une incorporation d'image matricielle le fichier SVG est un peu plus lourd que l'image matricielle d'origine.
Retour menu