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
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
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.
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 !
* : 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.
Notez que les largeurs des images et/ou les positions sont exprimées en pourcentage.
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.
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.
Deux images détourées sous forme de losange
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
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 !
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 ne présente aucune difficulté.