Dessiner avec SVG - sommaire

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 du langage HTML.
Attention cette balise se contente de créer un lien entre le canevas et l'image source.

Utilisation de la balise IMAGE

Exemple 1

Le code correspondant dans la page web

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

Syntaxe de la balise IMAGE

Notez bien les attributs de la balise image :
• xlink:href : chemin relatif de l'image (c'est à dire le chemin par rapport à la page web)
• width / height : largeur / hauteur de l'image dans le canevas SVG
• x et y : coordonnées de l'arête supérieure gauche de l'image dans le canevas ; par défaut x = 0 et y = 0

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 solution est d'insérer :
• une belle photo (le décor) sera le "background" de la zone de dessin SVG
• deux fichiers gif animés insérées via la balise image seront les "sprites" de cette animation
• il suffit ensuite d'animer les deux "sprites"

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 mais que progressivement la solution CSS s'impose.

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 sa balise 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 zone de définitions.
Cette balise comprend l'attribut 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.

Pour en savoir davantage sur les découpes

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" (ou "lutins") dans le cadre d'animations SVG, doivent être des images au format PNG (ou GIF).

Le code

Le code ne présente aucune difficulté.