Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Le SVG est un langage aux possibilités semblables au Flash.
La question a été discutée maintes fois :
C'est bien ou c'est pas bien ?
Avantages
- Contrairement aux bitmap, on peut zoomer les images sans perdre de qualité.
- On peut aussi les imprimer à très haute résolution.
- Contrairement au Flash (avant Flash 8), il existe des balises en SVG qui favorisent le référencement des documents par les moteurs de recherche.
Désavantages
- Les utilisateurs d'IE doivent se procurer un plug-in.
- Ce plug-in est assez lourd.
Pour ma part, je trouve que les désavantages ne sont pas assez nombreux pour renoncer à ce merveilleux langage.
Comme je vous l'ai dit le SVG est basé sur le XML.
Donc, tout document SVG doit toujours commencer par la déclaration XML, comme ceci :
Code : XML1 | <?xml version="1.0" standalone="no"?>
|
L'attribut
standalone="no" indique que le document "ne se tient pas tout seul", il fait référence à des fichiers externes, entre autres une
DTD. Une DTD est un fichier qui indique quelles balises ont le droit d'être utilisées, avec quels attributs, etc.
La DTD du SVG s'inclut avec la balise <!DOCTYPE>, comme ceci :
Code : XML1
2 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
Finalement, la balise externe, celle dans laquelle on écrira notre code SVG, est :
Code : XML
Elle a (au moins) 4 attributs :
- xmlns, l'espace de nom du SVG (une page où trouver de l'information à son sujet) ;
- version, la version du langage (nous apprenons le SVG 1.1) ;
- width, la largeur du document (en pixels) ;
- height, la hauteur du document (en pixels).
Récapitulons :
Code : XML1
2
3
4
5
6
7 | <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="500" height="500" version="1.1"
xmlns="http://www.w3.org/2000/svg">
...
</svg>
|
La balise <title>...</title>
Elle se place comme premier enfant de la balise <svg>. Le texte que vous écrivez entre les deux balises <title> sera le titre de votre fichier, qui s'affichera dans la barre de titre de votre navigateur si vous y ouvrez votre document seul.
La balise <defs>...</defs>
En SVG, on a souvent besoin de se référer à des objets, comme par exemple lorsqu'on utilise un dégradé. Dans ces cas-là, on inclut le dégradé dans la balise <defs>, et on le référence avec une URL lorsque l'on veut l'utiliser. Tout objet inclus dans <defs> ne sera pas dessiné directement à l'écran ; il devra être appelé.
La balise <g>...</g>
Cette balise est utilisée pour grouper des éléments, pour pouvoir plus facilement les manipuler en tant que groupe. On place ces éléments entre les balises <g> et </g>.
Exemple final :
Code : XML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>Mon premier document SVG !</title>
<defs>
<!-- Ici, on inclura des éléments
que l'on veut réutiliser plusieurs fois,
comme des dégradés, des motifs, etc -->
</defs>
<g>
//Éléments à grouper
</g>
// Éléments seuls
</svg>
|
Remarquez les commentaires, que je vous encourage à utiliser pour rendre vos codes plus lisibles :
- // [votre commentaire] : commentaire sur une ligne
- <!-- [votre commentaire] --> : commentaire sur plusieurs lignes
Note : au lieu de supprimer du code pour l'instant inutile, vous pouvez tout simplement le placer entre des commentaires <!-- et -->. De cette façon, il ne s'affichera plus, mais il est toujours réutilisable au besoin.
Cette astuce ne fonctionne pas avec les commentaires //.
Pour enregistrer ce document en SVG, copiez le code dans le Bloc-notes, et enregistrer en .svg.
Le langage SVG a été créé pour être utilisé sur le web. Comment ?
Nous pouvons toujours
linker depuis notre site web vers un fichier SVG, mais le mieux est d'"embeder" nos documents SVG dans une page web.
Pour ce faire, nous avons 2 méthodes à notre disposition :
- la balise <embed> ;
- la balise <object>.
La balise embed
Ce n'est pas une balise acceptée par le W3C, mais IE ne reconnaît pas <object> pour le SVG. On l'utilise ainsi :
Code : Autre1
2
3
| <embed src="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" /> |
- src pointe vers votre fichier .svg.
- type renseigne le navigateur sur le type MIME du fichier.
- width et height définissent la largeur et la hauteur que le document prendra sur la page (en pixels).
- pluginspage pointe vers la page web où le plug-in nécessaire est disponible.
La balise object
Son fonctionnement est similaire, mais les attributs diffèrent.
Me voilà poète ! 
Code : HTML1
2
3 | <object data="rect.svg" width="300" height="100"
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />
|
Différences :
- data pointe vers votre fichier ;
- codebase vers la page de téléchargement du plug-in.
La méthode
IE ne gère pas <object> pour le SVG, et <embed> n'est pas valide
Que faire alors ?
On ne peut pas la valider complètement, mais pour la rendre la plus valide possible, on peut utiliser une imbrication. On va inclure <embed /> dans <object>, comme ceci :
Code : XML1
2
3
4
5 | <object data="apocalypse.svg" width="100%"
height="100%" type="image/svg+xml">
<embed src="apocalypse.svg" width="500"
height="500" type="image/svg+xml" />
</object>
|
Comme la page est lue de haut en bas, voilà les étapes effectuées :
- si le navigateur reconnaît <object>, il l'affiche, sinon...
- si le navigateur ne reconnaît pas <object> (comme IE), il l'ignore, continue de lire et rencontre <embed />, qu'il affiche.
Et voilà. Vous savez maintenant un peu mieux ce qu'est le SVG. Dans le prochain chapitre, nous ferons l'apprentissage des formes, composantes principales des documents SVG.
Tutoriels
Communauté
Mon compte
Recherche
Livre d'or
Publicité
193 Zéros connectés |
8 requêtes |
0.0213s (0.0102s)
