Le SVG, c'est bien, à condition d'être sur un navigateur récent (exit les IE 6-7-8 et Android 2.3…). Mais il existe des solutions pour retomber sur du PNG.

Ça marche, et je le présente ici. Je complèterai prochainement avec plus de détails.

— Edit du 15 septembre —

Le SVG, dans Muse, c'est possible, et dès maintenant, avec un petit bonus.

Petit rappel, pour ceusses qu'auraient pas suivi. Le SVG c'est ce format vectoriel extrêmement pratique sur le web depuis qu'on s'est rendu compte que les écrans n'étaient pas seulement à 72 dpi, ni même à 96 dpi, mais parfois à 400 dpi (retina, tout ça tout ça).

Pour le fabriquer, rien de plus simple, vous passez dans illustrator, et vous enregistrez en .svg (voir à ce sujet l'excellent article détaillé de Michaël Chaize). Et puis vous le placez sur votre page et tous les navigateurs modernes afficheront exactement vos jolis vecteurs. Par navigateurs modernes, j'entends Chrome, Firefox, Safari, Opera, Android et même Internet Explorer… à partir de la version 9. D'ailleurs, Android, c'est à partir de la version 3. Exit les vieux téléphones coincés en 2.x soit près de 30% à l'heure où j'écris ces lignes. IE6-7-8, pareil, bien sûr, la joie si votre audience est en entreprise coincée sur winXP.

Je cherchais donc une solution miracle, et je suis tombé sur le fallback en PNG, qui permet de retomber sur un visuel PNG, donc non interactif, mais au moins présent, pour les navigateurs qui ne lisent pas le svg. Les explications étaient détaillées chez David Ensinger, je compile donc tout ça pour la postérité.

SVG inline avec Fallback PNG

Premier point important, pour que cette méthode fonctionne, il faut que le svg soit inline, c'est à dire qu'il fasse partie du code html de la page, et non pas <object> <embed> ou <img>, j'ai testé pour vous, ça marche beaucoup moins bien.

Niveau syntaxe, ce n'est pas bien compliqué et ça repose sur 2 balises svg :

<foreignObject> qui sera capable d'injecter au sein du svg des éléments qui n'en font pas partie, notamment du code html. C'est dans cette balise qu'on placera notre png, sous une simple <img src="" />

<switch> va permettre au svg de décider s'il affiche un groupe (<g>, en svg) ou l'autre (<foreignObject>, en html). Or, la magie qui s'opère avec un svg inline, c'est que si le navigateur sait le lire, il se débrouille avec, mais si le navigateur ne connait pas la balise svg (IE 6-7-8, Android 2.x), il ignore tout le reste… sauf le html à l'intérieur !

Et pour le contenu à adapter

data:image/png;base64 nous sommes en mode inline, il faut que notre contenu soit présent dans le svg pour limiter les appels à une ressource extérieure (et les risques liés aux répertoires, déplacements de fichiers…) pour cela, le visuel n'est pas lié, mais incorporé et traduit en base64.

Précisions pour l'usage via Illustrator : lorsque pour gagner du temps vous placez votre png directement depuis Ai (par exemple en réalisant un export pour le web, puis importation, ou en utilisant la pixellisation puis décomposition de l'aspect), il vous faudra à l'export demander d'incorporer les images. Ai vous convertira les visuels.

<img src="" /> Petit point à noter : Illustrator vous enregistre un fichier .svg, c'est bien, mais quand il met une image dedans, il le fait pour du svg, il ne sait pas encore traiter les balises qu'on a vu avant. Et pour intégrer une image à un svg, on n'utilise pas <img src="…" /> mais <img xlink:href="…" /> Du coup, vous devrez remplacer l'une par l'autre pour que ça fonctionne en entier.

Ça marche dans Muse !

Ça c'est le point le plus important pour vous, si vous êtes arrivés jusque là dans l'article (remarque, vous pourriez très bien vous servir de ça hors Muse, vous auriez déjà gagné la compatibilité IE 6-7-8 et Android 2.x). Mais surtout, une fois que vous avez lu tout ça, le plus dur est fait.

Il ne vous reste plus qu'à coller toute la partie SVG de votre fichier directement dans un objet HTML de Muse et c'est tout ! La preuve, c'en est presque magique. Et vu que les pages de Muse ne sont pas générées à la volée, mais bien par vous, vous restez sur du inline. Certes, un peu plus contraignant que de la vraie image jointe, mais combien plus pratique pour poser les éléments sur la page !

Et comme je suis quelqu'un de fondamentalement honnête, je vous livre quand même une limitation : les dimensions de votre objet SVG devront être modifiées à la main.

En tous cas pour de la jolie interactivité fine, ça redonne espoir.

Bonne lecture, et n'hésitez pas à commenter avec vos réalisations !

PS : Quelques liens pour s'entraîner avec le fichier Muse, le fichier svg (généré dans Ai, modifié dans Brackets). Et comme je suis de bonne composition ce jour, le tout zippé.