Aller au menu - Aller au contenu

Icône Introduction au SVG

Avatar
Par Avatar dark_popol
Mise à jour : 09/05/2009
813 visites depuis 7 jours, dont 116 sur ce chapitre classé 151/786
Dans ce premier chapitre, nous allons commencer notre apprentissage en douceur.

Ne soyez surtout pas découragés par la taille de ce chapitre ! Le code d'un fichier SVG fait plus des trois quarts de la page ! ;)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Sommaire Chapitre suivant
Retour en haut

SVG : oui ou non ?

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. :)
Retour en haut

La structure d'un document SVG

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 : XML
1
<?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 : XML
1
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
1
2
3
<svg>
...
</svg>

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 : XML
1
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.
Retour en haut

Incorporer du SVG dans du xHTML

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 : Autre
1
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 ! :p
Code : HTML
1
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 : XML
1
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 :
  1. si le navigateur reconnaît <object>, il l'affiche, sinon...
  2. si le navigateur ne reconnaît pas <object> (comme IE), il l'ignore, continue de lire et rencontre <embed />, qu'il affiche.
Retour en haut

Q.C.M.

À quoi sert la balise <defs> ?
Qu'est-ce qui cloche dans le code suivant ?

Code : Autre
1
2
3

<object data="rect.svg" width="300" height="100"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
Qu'est-ce que le format svgz ?

Statistiques de réponses au QCM

Retour en haut
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.
Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
9 commentaires pour "Introduction au SVG"
Note moyenne : 3.30 / 4 (20 votes)
Pseudo Commentaire
Hors ligne Trent # Posté le 01/06/2007 à 05:28:27
(Sur|Sous)doué à mi-temps.
Avatar

 Bonsoir !

Un grand merci pour ce tutorial que j'aimerais voir grandir et être lu par de plus en plus de zéros ! Toutefois, selon moi, le SVG ne pourra pas se développé tant que firefox le gèrera comme une bouze :-° .

D'excellent tutoriaux assez poussés sont également disponibles ici : http://dev.opera.com/articles/svg/ en anglais. Pourquoi? Car Opera intègre l'un des meilleurs viewer SVG a ce jour et qu'il essaye de populariser ce langage déjà populaire sur téléphone mais très peu sur ordinateur.

Encore une fois, merci pour enseigner le SVG ici :) !
Image utilisateur
 
Hors ligne Ze Thriller # Posté le 29/11/2007 à 17:02:35
Avatar

 Aha... quelque soit le langage, c'est bien connu: après la console, l'éditeur texte brut est le meilleur ami du developpeur :p C'est encore vérifié avec le SVG. Je suis inculte quasi total avec Illustrator mais je me débrouille avec le bloc-notes ^^

Bref, j'ai lu avec un immense intérêt ce tuto.
J'y lis, entre autres:
Code : Autre - Afficher / masquer les numéros de ligne
  1. <object data="apocalypse.svg" width="100%"
  2. height="100%" type="image/svg+xml">
  3. <embed src="apocalypse.svg" width="500"
  4. height="500" type="image/svg+xml" />
  5. </object>


(NB: ça plante si je définis le code comme étant de l'(X)HTML)

Comme quoi ceci ne peut pas être complètement validé. Mais si, amis zér0s, vous pouvez taire les critiques du validateur W3C (garanti sans arsenic :p ) tout en ayant un code compatible IE/Gecko (=Mozilla, FF, etc...) !!
L'astuce consiste à utiliser les balises actives, qui ne sont pour tout autre navigateur que de simples commentaires. Résultat de l'opération: ils sont tout simplement ignorés par le validateur du W3C.


Je remercie les webmasters de Pokemon-France (en fait,ceux avant que je rejoigne la team de dev :p) pour cette astuce ^^
Très pratique aussi pour faire du CSS avancé et différencié selon le navigateur (en gros IE/Pas IE lol).

Enjoy. (NB: tout ce qui sera écrit après ce code sera tout simplement invisible :-° )

Voici donc le code du tuto modifié:

Code : Autre - Afficher / masquer les numéros de ligne
  1. <object data="apocalypse.svg" width="100%"
  2. height="100%" type="image/svg+xml">
  3. <!-- [if IE]>
  4. <embed src="apocalypse.svg" width="500" height="500" type="image/svg+xml" />
  5. <![endif]>
  6. </object>
Hors ligne 9h0ost # Posté le 14/05/2009 à 12:16:03

Après avoir lu ce tutoriel très intéressant, je me pose une question essentielle. Imaginons que je crée une image SVG de taille 500x500 et que je l'imbrique dans une page xHTML à l'aide de la balise <object>:

Code : HTML
1
2
3
<object data="monimage.svg" width="500" height="500" 
type="image/svg+xml"
codebase="http://www.adobe.com/svg/viewer/install/" />


Est-il possible de redimensionner cette image directement depuis ma page xHTML (par exemple pour qu'elle soit de taille 100x100) ou dois-je réécrire le fichier SVG.

Modifier les valeurs width et height n'est apparemment pas la solution.
Hors ligne N@CR0T!C # Posté le 09/07/2009 à 14:36:16
Le savoir et la sagesse
Avatar

Ville : Sassenage
Pays : France métropolitaine

 Pour une compatibilité avec IE n'est-il pas envisageable de convertir un ficher svg (xml) en somme de balise DA
Image utilisateur



 
Hors ligne herve.hautbois # Posté le 23/02/2011 à 16:08:43

Il est possible d'utiliser la balise iframe afin de charger un fichier SVG dans une page web sans utiliser de plug-ing sous IE :

<iframe src="adresse du fichier SVG ici" width="100" height="100" scrolling="no" frameborder="0"></iframe>

Voir tous les commentaires