Dans ce chapitre je vais vous présenter au fur et à mesure de leur implémentation les nouveatés de SVG 1.2. Principales innovations de cette version de SVG : meilleur gestion du texte et multimédia.
Avec SVG 1.1, la gestion du texte est assez basique, le plus gros problème étant que les retours à la ligne ne sont pas gérés et il faut le faire « à la main » avec des tspan. SVG 1.2 introduit un nouvel élément, textArea qui fait ça pour nous, un peu comme le p de XHTML mais en plus puissant.
Avec SVG 1.2 Tiny, la zone du textArea est restreinte à un rectangle (ce qui est déjà une amélioration honorable par rapport à SVG1.1). Néanmoins il est probable que dans les profils de SVG 1.2 à venir, on puisse mettre du texte dans n’importe quelle forme et que ce texte s’adapte à cette forme.
textArea s’utilise très facilement : on renseigne les attributs x, y, width et height puis on insère le texte entre les deux balises.
Comme l’indique son nom, la propriété CSS line-increment permet de contrôler l’espacement entre deux lignes. On peut le réduire ou l’augmenter. La valeur 0 par exemple, signifie que toutes les lignes sont collées sur la première ligne.
La propriété CSS text-align spécifie l’alignement par défaut du texte. Par défaut, le texte est aligné à gauche mais on peut le centrer ou l’aligner à droite. Néanmoins, on ne peut pas le justifier. Les valeurs correspondantes sont start, center et end.
Enfin, la propriété CSS display-align permet aussi d’aligner le texte mais verticalement. Si sa valeur est before (valeur par défaut) alors le texte est collé au bord haut du rectangle conteneur. Si sa valeur est after alors le texte est collé au bas du conteneur. On peut enfin centrer le texte verticalement avec le mot-clé center. Reprenons l’exemple précédent en utilisant ces propriétés.
L’espace entre deux lignes est de 11 pixels, ce qui est un peu plus petit que la taille de la fonte. C’est pourquoi le texte est serré. En général, la taille par défaut entre deux ligne est 1,1 × taille de la fonte.
Une des nouveautés les plus attendues de SVG 1.2 est la gestion de la vidéo et du son. Il existe bien d’autre manière d’inclure de la vidéo et du son dans vos pages. Il y a bien sûr la solution la plus horrible, Flash, la solution qui ne fonctionne jamais (object ou embed) et la nouvelle manière de faire : l’élément HTML5 video.
Néanmoins, la vidéo avec SVG permet de faire bien plus de choses. En fait, tout ce que nous avons fait précédemment s’applique au multimedia avec SVG. Dans la suite de cette partie, nous étudierons principalement l’élément video (de SVG, pas de cette soupe de tag qu’on nomme HTML5) mais il existe aussi un autre élément, audio qui sert comme son nom l’indique à incorporer du son à SVG. Seulement, on ne peut pas appliquer des filtres, des transformation, des chemins de découpe à du son… et c’est beaucoup moins fun !
À l’heure actuelle (Mars 2009, ou an I de la crise), seul un build d’un navigateur permet de visionner les exemples ci-dessous. Il s’agit d’un build d’Opera qui se trouve sur cette page (section Good News). Vous devez l’installer pour pouvoir continuer sinon vous ne verez rien. Il y a trois exemples intéressants en bas de page.
On va donc utiliser l’élément video dont les attributs de base sont :
Quel type MIME devez-vous spécifier ? Celui de votre video. Cela dépend de son format et ici arrive une très bonne question : quel format choisir ? Ma réponse est sans hésiter : un format libre !
Il faut différencier trois choses lorsqu’on parle de format vidéo. Il y a bien sûr le codec vidéo qui va fournir l’image de chaque frame. Il y a aussi dans la plupart des cas un codec audio, sinon, il n’y a pas de son. Enfin, il y a ce qu’on appelle le conteneur qui va contenir les différents codecs, et il va faire ça de manière optimisé. On pourrait zipper la vidéo et l’audio de telle sorte qu’on aurait des fichiers film.zip. Seulement, il faudrait pour lire la vidéo décompresser entièrement le film (et donc le télécharger entièrement) avant de pouvoir lancer la lecture, ce qui serait une énorme perte de temps, de puissance processeur, de mémoire vive et de place sur le disque dur. C’est pourquoi on utiliser des conteneurs qui mixent les différents codecs de manière à ce la lecture puisse commencer rapidement alors même que la vidéo est en train d’être téléchargée. Et avec les conteneurs modernes, on peut avoir une piste vidéo, plusieurs pistes audios et des sous-titres en pagailles.
Fin de la disgression, revenons à nos moutons : quels formats choisir ? Le problème avec les codecs et les conteneurs est que la plupart ne sont pas libres, c’est à dire qu’on n’a le droit de les utiliser qu’à certaines conditions (posséder un système, paiement de royalties, etc.), ce qui n’est pas bon pour le Web. Le Web, c’est un succès car c’est ouvert. Minitel est mort car c’était fermé. C’est pourquoi je vous conseille d’utiliser les technologies de chez Xiph. Xiph est une fondation qui a produit plusieurs codecs dont : FLAC (compression audio sans perte), Vorbis (compression audio avec perte, meilleur que MP3), Speex (codec audio pour la voix) et Theora (codec vidéo). De plus ils ont aussi un conteneur qui s’appelle Ogg. Ogg peut contenir les codecs de Xiph et bien d’autres. Le meilleur compromis est selon moi l’utilisation des codecs Vorbis et Theora dans le conteneur Ogg. Il existe un tas d’outils pour produire de tels fichiers mais je n’en citerais que deux : ffmpeg2theora sous Unix en ligne de commande et VLC.
Ces codecs sont-ils bons, me demanderez-vous ? La réponse n’est pas simple. Vorbis est un des meilleurs codecs audio avec perte du moment. Il surpasse le MP3. Ce n’est pas la même chose pour Theora. Le H.264 est meilleur mais c’est un format fermé et breveté. Et Theora n’est pas mauvais non plus et il a un avantage sur le H.264 : il demande beaucoup moins de puissance pour être décodé, ce qui signifie, grossièrement, que le ventilateur de votre ordinateur ne tournera pas à fond quand vous lancerez une vidéo en Theora. Enfin, ces deux codecs sont reconnus nativement par plusieurs navigateurs, dont Firefox, ce qui vous assure une grande compatibilité de même qu’une bonne portabilité de vos SVG.
De plus, un nouveau codec libre et au sommet de l’art arrive : Dirac. Développé par la BBC, il est vraiment très prometeur.
Pour résumer, si je vous ai convaincu, il faut utiliser le type-mime video/ogg pour la vidéo et audio/ogg pour l’audio. Vous trouverez des informations complémentaires sur le wiki de Xiph.org.
Après tant de parlotte, voici l’exemple tant attendu (rafraichissez la page) :
Vous l’avez sans doute remarqué, j’ai utilisé l’attribut repeatDur dans la vidéo précédente. En fait, en SVG, video est une balise d’animation comme les autres. Génial, non ? Du coup, vous pouvez utiliser tous les attributs d’animation : begin, end, dur, repeatCount, repeatDur et d’autres que je dois oublier. De même, vous pouvez synchroniser cette vidéo avec d’autres éléments, ou d’autres éléments avec la vidéo.
Je vais maintenant vous parler de l’attribut transformBehavior. Lorsque vous affichez une vidéo, elle est redimensionnée par rapport aux attributs width et height. Seulement, ce redimensionnement est coûteux en terme de puissance du processeur et on peut souhaiter interdire le redimensionnement. Dans ce cas, on utilise l’attribut transformBehavior qui peut prendre quatre valeurs différentes : pinned, pinned90, pinned180 et pinned270. Dans ce cas, les attributs width et height sont ignorés. et les attributs x et y détermine le centre de la vidéo. De plus, selon la valeur de l’attribut, on peut effectuer une rotation de 90, 180 ou 270 degrés. On peut se demander l’utilité d’une telle possibilité. En fait, ça peut être très utile quand la vidéo est prise par un portable ou un appareil photo qui a été tourné d’un quart de tour.
Dans cet exemple, avec x et y à la valeur 50%, on est sûr que la vidéo est centrée.
Comme je vous l’ai dit au début de ce chapitre, on peut appliquer tout ce qu’on a vu jusqu’à présent sur une vidéo.
Cela signifie que vous pouvez appliquer à une vidéo des chemins de découpe, des masques, des filtres et des transformations. Vous pouvez vous servir de vidéos pour faire des motifs. Vous pouvez réutiliser une vidéo avec use. Et bien sûr, vous pouvez animer tout cela. Vous voulez une vidéo qui se balade à l’écran ou qui tourne sur elle même (voire les deux en même temps) ? Pas de problème avec SVG.
Je sens que vous brûler d’envie d’avoir un exemple, alors le voici !
La vidéo est clippée dans le cadre noir. Le reflet est obtenu avec un use. Les filtres sont des filtres classiques.
Maintenant, quand on vous dira que SVG n’est pas aussi bon que Flash, montrez cet exemple !
Contact : tangui.lepense@free.fr - Jabber : Tangui@im.apinc.org
Merci à Link Mauve pour sa relecture, ses conseils et ses corrections.
Ce tutoriel SVG (texte et images
d'exemple) de Tangui Le Pense est
mis à disposition selon les termes de la licence Creative Commons
Paternité - Partage à l'Identique 3.0 non transposé. Basé(e) sur
une oeuvre à svground.fr.