Démystification #3: SVG et SMIL, la mort de flash?

novembre 13th, 2007 · 11 Comments ·

Voici la présentation de deux technologies du W3C qui devraient signer l’arrêt de mort de Flash, et des technologies propriétaires du même type.

Tout d’abord pourquoi remplacer Flash ? Car, comme le dit Mike, Flash pue. Cet article et ses 327 commentaires résument très bien les principaux problèmes liés à cette technologie. Le premier problème est lié à un format propriétaire et opaque. SWF, le format de fichier d’une application flash, n’est pas compréhensible par une machine, c’est à dire que la machine ne comprend pas le sens des données présentes dans le fichier. A la différence des formats comme l’XML et l’XHTML qui sont complètement ouverts. Cette opacité implique deux problèmes majeurs dans le web. Le premier est l’impossibilité de référencer une application Flash en fonction de son contenu (puisque que Google ne comprend pas le contenu du fichier SWF). Le deuxième est l’accessibilité de ces applications qui tombe à zéro (puisque les logiciels pour handicapés ne comprenne pas ce même contenu). Heureusement le W3C standardise depuis quelques temps maintenant des solutions pérennes de substitution. SVG pour ce qui est des animations vectorielles et SMIL pour la manipulation et la synchronisation de contenus multi-médias.

SVG est une des technologies actuellement développées au sein du W3C. Comme la majorité de ces technologies, SVG est un langage ouvert basé sur l’XML. L’XML vous connaissez ? C’est ces balises du type <a href= » »>…</a>. D’ailleurs l’HTML est aussi un dérivé de l’XML, on l’appelle alors l’XHTML. Comme SVG est un langage ouvert il n’est pas sujet aux mêmes problèmes que Flash que je citais plus haut. Mais ces avantages sont bien plus importants. Comme l’HTML et SVG utilisent la même base il est très facile de transformer une page HTML en une animation SVG. Voici une petite application que j’ai réalisée, elle utilise 3 fichiers:

  • Un fichier XML qui contient une liste de livres (ces livres pourraient être aussi bien contenu dans un tableau HTML).
  • Un fichier XML contenant un descriptif de ma bibliothèque (avec la taille des étagères).
  • Un fichier XSLT qui va générer le fichier SVG représentant le rangement des livres.

La démo est visible ici (clic-droit, enregistrez sous), chez moi elle ne tourne que sur Internet Explorer avec SVG Viewer et en local, je veux bien votre feedback. Alors, que manque-t-il à SVG pour devenir un standard comme XHTML et RSS ?

  • Un IDE aussi puissant que Flash CS3.
  • Plus de sites internet utilisant SVG (comme le fait déjà Wikipedia).
  • Plus d’outils aussi géniaux que VectorMagic.

SMIL est une autre technologie complémentaire, elle aussi se base sur XML. SMIL, prononcer « smile », permet de créer très facilement du contenu syncronisé mélangeant différents médias comme de la vidéo, de l’HTML et des animations SVG. Le plus gros problème de SMIL est qu’il est toujours en gestation au sein du W3C et pour l’instant aucun navigateur de l’a encore implémenté. Firefox attend la version 3.0 de SMIL qui devrait être standardisée courant 2008. Cependant SMIL est déjà très utilisé dans les cercles proches du W3C. Voici une présentation du web sémantique utilisant SMIL. Vous pouvez la lire avec real player (le seul lecteur « réputé » ayant implémenté SMIL). Et voici la source du fichier (XML). Je vous conseil de vous donner la peine de regarder cette vidéo, très intéressante au niveau du contenu et de la forme.

On reproche souvent au W3C son inactivité et son manque de réaction. Je suis d’accord sur le second point, le W3C ne répond pas immédiatement aux besoins du Web mais réfléchit et conçoit les technologies de demain, peut on parler de technologies éthiques? Tiens, citons quelques technologies réalisées par le W3C et généralisées sur le web: HTML, XML, CSS, RSS, PNG (qui remplace le GIF).

Tags: Accessibilité · Démystification · Flash · SMIL · SVG · Vidéo · W3C


11 responses so far ↓

  • Très intéressant ce petit post. Alors, peut-on d’ores et déjà arrêter le développement de sites web sous Flash pour se tourner vers SVG ?
    Comment anticiper le changement de manière intelligente ?

  • Pour l’instant ça ne sert à rien de développer des applications SMIL/SVG puisque les IDEs et browsers ne sont pas encore matures. Je pense qu’il faudra attendre minimum fin 2008 pour pouvoir implémenter les premières solutions.
    Ceci-dit on peut prendre en compte cette évolution dans la stratégie de stockage et de diffusion des contenus multi-médias. En clair, si vous le pouvez, gardez la version originale des vidéos de vos utilisateurs sur votre site. N’encodez pas tout en .flv sans avoir une copie de l’original.

  • Merci pour vos billets très intéressants.

    Concernant votre démo, chez moi,
    – sous Firefox/2.0.0.8, j’ai l’affichage du fichier XML.
    – sous IE7, j’ai une erreur : Erreur de traitement de la ressource http://nicolas.cynober.fr/blog/images/books.svg. Ligne 5, Position…

    viewBox= »0 0 900 600″>

    Vraiment dommage. Que dois-je faire ?
    LS.

  • Ah !

    J’ai recopié votre fichier en local et miracle, cela fonctionne sous IE7 !
    Formidable !

    Merci pour tout.
    LS.

  • […] en sommes nous à l’heure actuelle ? A la différence de SVG et SMIL, RDF et OWL ne sont pas dépendant d’une technologie tierce (comme un browser), tout est […]

  • Toute petite précision : SMIL est utilisé dans la norme MMS (vous savez les SMS avec des images que vous pouvez envoyés depuis votre mobile 😉 ). En réalité c’est un sous ensemble des balises SMIL qui est utilisé. Et cela permet de gérer les différentes pages du MMS, ainsi que la temporisation de ces pages (entre autres).

    Tim

  • […] sur la vidéo en ligne et je pense que c’est en parti du à une question technologique, voir mon billet sur Flash. Viewdle permet d’identifier des personnes dans une vidéo, c’est à dire que cette […]

  • Il est possible d’utiliser ECMASScript pour faire de l’animation avec SVG. Le fait que SMIl ne soit pas intégré dans Firefox n’est pas un problème. Je suis en train de faire quelques exemples animés avec SVG voir : http://www.orvinfait.fr/svg/svg_par_l_exemple.html

    VectorMagic permet de transformer des photos jpg au format svg. Et après? Je propose sur mon site de découper ces photos et de mettre les éléments découpés dans une base de donnée accessible à tous. Ensuite ces éléments découpés peuvent être utilisés pour tester son look ou faire d’autres projets : voir http://www.orvinfait.fr/svg/outils/coiffure_mode_travaux_presentations.php

  • J’ai créé une application de coloriage en ligne en SVG + Javascript :

    http://scrapcoloring.fr

    C’est beaucoup mieux que le Flash avec Firefox, mais le support sur les autres navigateurs est encore incomplet malheureusement.

  • Englandoxford // Mar 28, 2010 at 11:01

    Salut, votre post est très intéressant, pourriez vous s’il vous plaît uploader le fichier XSLT que l’on puisse jeter un coup d’oeil à la manière dont le fichier SCG est généré?
    Merci Beaucoup.
    Cordialement.
    Englandoxford

  • Englandoxford // Mar 28, 2010 at 11:02

    Salut, votre post est très intéressant, pourriez vous s’il vous plaît uploader le fichier XSLT (ou me l’envoyer par mail) que l’on puisse jeter un coup d’oeil à la manière dont le fichier SCG est généré?
    Merci Beaucoup.
    Cordialement.
    Englandoxford