Accueil

Traduction

Dessiner avec SVG - sommaire

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : 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 canevas SVG.
C'est donc l'équivalent de la balise IMG du langage HTML.

Utilisation de la balise IMAGE

Exemple 1

Le code correspondant dans la page web

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 bitmap.
Dans ce canevas j'insère trois fois la même image matricielle (un fichier JPG de 480 par 600) via la balise image.

Donc si vous déplacez cette page web il faudra aussi déplacer l'image matricielle afin que le chemin relatif soit toujours correct ...
Un conseil : la page web / le document SVG ainsi que l'image doivent être dans le même dossier. Ainsi le chemin relatif vers l'image se résume au nom complet de celle-ci !

Syntaxe de la balise IMAGE

* : l'attribut href remplace xlink:href ; ce dernier attribut est désormais obsolète.

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

Vous pouvez raisonner en pourcentages - exemple 2

Le code SVG correspondant (extrait)

Notez que les largeurs des images et/ou les positions sont exprimées en pourcentage.

Mais pourquoi insérer des images matricielles dans un canevas SVG ?

SVG est un outil pour dessiner. Donc pourquoi intégrer dans une zone de dessin des images GIF ou PNG ou JPEG ?
Et bien tout simplement pour développer plus vite.
Prenons un exemple simple. Vous voulez créer une animation SVG : deux skieurs de fond qui se déplacent dans un superbe décor.
Dessiner vous même SVG le décor et les personnages serait un travail long et fastidieux.

La production d'animations SVG est traitée dans ce tuto en deuxième partie. Et vous verrez qu'il y abondance de solutions : SMIL, JS, CSS.

Insérer des images découpées

Si vous connaissez bien CSS, vous savez qu'il existe la propriété clip-path qui permet de rogner les images pour qu'elles apparaissent sous forme de cercle, ellipse, losange, étoile, etc.
En fait CSS s'est inspiré du format SVG et de l'élément clipPath.

Canevas SVG avec des images découpées sous forme d'un losange

Deux images détourées sous forme de losange

Le code correspondant

Observez bien le code de la balise clipPath dans la partie DEFS.
Cette balise comprend l'élément polygon points="0.5 0, 1 0.5, 0.5 1, 0 0.5"
Ce modèle de détourage est identifié "losange".
Les coordonnées du détourage dans l'image sont exprimées de façon relative. Ainsi 0.5 0 veut dire : milieu sur axe des X et origine sur axe des Y ; 1 0.5 veut dire 100% sur X & milieu sur Y.
Le modèle de détourage est appliqué à deux images grâce à l'attribut clip-path="url(#losange)" dans chaque balise image.

Vous ne comprenez pas grand chose au code ci-dessus. Rassurez-vous le détourtage est expliqué en détail dans un autre chapitre.

Les définitions dont le détourtage

Insérer des images gérant (ou pas) la transparence

Les images natives bordurées

D'abord le logo au format JPG puis le logo au format PNG.

Fond blanc ou fond transparent ?
Insérons ces deux images dans un canevas SVG avec un fond bleu ciel et nous saurons !

Insertion de ces deux images dans un canevas SVG

L'image JPG a un fond blanc alors que l'image PNG a un fond transparent.
Le format JPEG ne gère pas la transparence à la différence des formats PNG & GIF.
Donc les "sprites" ("lutins" en français) doivent être des images au format PNG (ou GIF).

Le code

Le code ne présente aucune difficulté.