• {0} Facile|{1} Moyenne|{2} Difficile

Mis à jour le 08/01/2013

Introduction au SVG

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce premier chapitre, nous allons commencer notre apprentissage en douceur.

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

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 :

<?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 :

<!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 :

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

<?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 :

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

Pour enregistrer ce document en SVG, copiez le code dans le Bloc-notes, et enregistrer en .svg.

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 :

<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

<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

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 :

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

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.

Exemple de certificat de réussite
Exemple de certificat de réussite