SVG et HTML5

Le Bloc-notes a été mis en ligne lundi soir sans souci particulier.

Quelques réglages du code et des CSS après avoir passé le HTML5 Validator.
Il me reste les formats des dates à rendre conformes mais l'ensemble tient la route.
Sauf sur un point et pour un navigateur,
et pas n'importe lequel :

• • •

Sur la première entrée du blog figure une illustration en SVG.

Si celle-ci s'affiche dans Opera, Safari et Chrome, Internet Explorer le boude.
Pourquoi ? La réponse est affaire de gros sous...

La (petite) histoire d'SVG

SVG est un format inventé par un consortium de sociétés savantes réunies sous l'égide du W3C. Dans ce consortium on trouve Adobe (qui s'y connaît en vecteurs et en rasterisation) qui apporte PostScript, mais aussi Microsoft qui lui, vient avec son VML sous le bras. Adobe a une idée derrière la tête sur le plan des pépettes commercial..
À l'époque, en effet, Adobe se tirait méchamment les bourres était en guerre concurrentielle avec Macromedia qui lui taillait des croupières qui était leader du vecteur sur le Web avec Flash. En outre, Adobe avait un autre problème avec son éditeur Web (GoLive), lourd et gourmand en ressources : les webmestres lui préféraient Dreamweaver, de ? Macromedia bien sûr.
Sur le papier SVG pouvait détrôner à Flash.
Mais au conseil d'administration d'Adobe les stratèges considèrent que déboulonner détrôner Flash avec SVG et reprendre la place de leader sur le marché des éditeurs Web avec GoLive coûteraient trop chers. Il fallait faire disparaître le concurrent en l'achetant et en faisant main basse sur ses produits.

Ce qui fut fait. Fin de SVG ? Chez Adobe, oui. Plus que du Flash ? Non : SVG bandait était encore vivant. Où ? Au W3C.
Dans le consortium il y avait Microsoft avec son VML mais le W3C lui préfère SVG qu'il offre au monde du logiciel libre.
Son VML en bandoulière, MS se met donc à développer dans son coin son propre format, Silverlight qu'il souhaite imposer au monde tellement qu'il veut notre bonheur. Pas de SVG dans Internet Explorer car Microsoft doit vendre ses logiciels et ses outils d'encodage vidéo propriétaires pour Silverlight, pour le profit de ses actionnaires clients.
« Dans son coin »... Microsoft risque effectivement dans 1, 2 ou 3 ans de se retrouver au piquet avec son bonnet Silverlight sur la tête. Combien de temps leur faudra t-il pour comprendre qu’HTML5 et ses satellites va partout s’imposer ? Mystères et Ballmer.
Mais revenons à Firefox.

Firefox et SVG

Que Firefox n'affiche pas de SVG dans la balise image est suprenant.
Vous voulez savoir pourquoi ? Il faudra poser la question au sieur et poteau Nitot.
En attendant une version prochaine on peut contourner le problème en utilisant la balise embed, ce qui donne :
embed src="..." with=".." height="..." type="image/svg+xml" /

Et là, Ô miracle, ça s'affiche :

Par bonté je montre l'illustration en PNG (bien compressée, elle pèse 19 Ko) que dessine SVG pour ceusse qui sont équipés de navigateurs antédiluviens :

Firefox et SVG - illustration en PNG

Le bon code pour embarquer du SVG

Après un échange avec un troller du forum Geckozone, le bon code c'est d'utiliser les balises médias object ET embed.
Ce qui présente l'avantage de pouvoir inclure un fallback pour les navigateurs qui se sauraient pas le lire.
Ici, l'image en PNG :
object type="image/svg+xml" data="HTML.svg"
embed src="HTML.svg"
img src="266px-HTML.svg.png" /
/object

Tous les navigateurs pourront ainsi imprimer le contenu :

Comment afficher du SVG ?



Commentaires :

Thierry||#1
Thierry
C'est ça ton nouveau blog ?
C'est chiant. Je préférais les pin-ups du carnet. ;-)
Philippe||#2
Philippe
@ Thierry :
c'est sûr que le code n'a rien de sexy pour toi. ;-)

@ Matt
gonna see if it's workin out now.
ScrapColoring||#3
ScrapColoring
Une solution intéressante, c'est d'utiliser svgweb pour utiliser Flash pour afficher les SVG quand il n'y a pas de support natif. Ce n'est pas encore parfait (par exemple pour faire des applications dynamiques qui chargent des SVG externes), mais ça marche très bien pour les SVG simples.
Philippe||#4
Philippe
Résumons : tu proposes d'utiliser Flash pour afficher du SVG qui ambitionne de remplacer Flash ?
C'est une drôle d'idée non ?
Cartelett||#5
Cartelett
"Dans le consortium il y avait Microsoft avec son VML"
>> VML s'était aussi Autodesk, Hewlett-Packard, Macromedia, et Visio.
Il est par ailleurs toujours supérieur à SVG sur tous les points, comme en témoigne cette page: http://www.svg-vml.net/
Ton image (qui ne s'affiche pas sur Opera) sera exécutable avec VML pour tout au plus 5Ko.
Z'auraent mieux fait de regarder en 3 fois le W3C, plutôt que d'adopter un SVG Gargantua (...)
Pierre||#6
Pierre
Prémonitoire cet article !

Silverlight semble effectivement compromis le Journal du Net en parle dans cet article :

http://www.journaldunet.com/developpeur/expert/49749/microsoft-a-tue-silverlight.shtml
Philippe||#7
Philippe
Que le Journal du Net fasse l’hypothèse de l’abandon de Silverlight au profit d’HTML5 n’est pas surprenant.

Que Microsoft poursuivre son développement non plus : depuis bientôt 30 ans que je bosse dans cette industrie j’ai toujours vu cette entreprise à la traîne. Ses dirigeants n’ont comme vision que le tiroir caisse.
Magali||#8
Magali

j’ai toujours vu cette entreprise à la traîne


On peut dire que Microsoft est sur HTML5, CSS3 et SVG depuis 1998 avec VML.
SVG est résolument ignoré des développeurs car trop lourd, trop complexe et peu performant.
Pourtant le vectoriel fait partie prenante de l'avenir du Web.
Aujourd'hui seul Canvas semble prendre de l'intêret.
Mais Canvas en mode vectoriel revient exactement à VML.
Rabacher que Microsoft est à la traine est donc très mal avisé.
Philippe||#9
Philippe
Merci de ton intervention Magali.

Les occasions de rire sont tellement rares qu’il faut que tu reviennes très vite nous distraire.

Les commentaires pour ce billet sont fermés