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 à développer son propre format, Silverlight qu'il saura imposer au monde tellement qu'il veut notre bonheur. Du coup, pas de SVG dans Internet Explorer. Microsoft doit vendre ses logiciels et ses outils d'encodage vidéo pour Silverlight, pour le profit de ses actionnaires clients.
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 ?

http://www.wikio.fr

Commentaires :

Thierry | ||Lien permanent du commentaire

Thierry
C'est ça ton nouveau blog ?
C'est chiant. Je préférais les pin-ups du carnet. ;-)

Philippe | ||Lien permanent du commentaire

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 | ||Lien permanent du commentaire

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 | ||Lien permanent du commentaire

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 | ||Lien permanent du commentaire

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 (...)
Les commentaires pour cet article peuvent être suivis via ce fil.

Laisser un commentaire

Les champs signalés par la cloche doivent être remplis.






math captcha