Accueil
Mes tutoriels sur la programmation

Dessiner avec SVG - sommaire


Coder en SVG

Dessins statiques

Le format SVG Les formes de base Les chemins Gestion du texte La balise image L'attribut viewBox pour des canevas responsives Dégradés, motifs, masques et découpes Modèle et clonage de modèle Les transformations Les filtres en SVG

Dessins animés

La balise animate Compléments sur la balise animate Balise animatemotion Balise animatetransform Balise set Animer via JavaScript Animer via CSS Un jeu - le squash Comparaison SVG & Canvas

Le framework Snap SVG

Découverte du framework Plus loin avec Snap SVG Les filtres avec Snap SVG Les dégradés avec Snap SVG Chemins, masques & découpes en Snap SVG Animations avec Snap SVG - introduction Animations avec Snap SVG - enchainer, répéter à l'infini Animations avec Snap SVG - animations génériques - les événements Animations avec Snap SVG - progression de l'animation

Vous pouvez me contacter via Facebook (questions, critiques constructives) : 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 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 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.

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