fr32c blog

Aller au contenu | Aller au menu | Aller à la recherche

jeudi 10 octobre 2013

Prévisualiser du SVG via Brackets

Si comme moi vous avez à travailler sur le format SVG, une fois sorti d'Illustrator, un éditeur de texte/code est indispensable. J'ai choisi Brackets, le grand frère de Adobe Edge Code.

Pour le SVG, @peterflynn a réalisé une petite extension qui vous créera une zone en haut de page pour voir vos fichiers. Parfait pour des icones et du statique, un peu limité pour l'interactif, qui s'exprime mieux dans le navigateur, avec des fichiers js liés.

Sauf que Brackets n'est pas capable d'envoyer votre page .svg sur Chrome comme il sait le faire avec du html.

Les plus puristes des développeurs vous diront que c'est compliqué de faire ça, pour avoir un rendu parfait et éditable en direct.

Mais comme j'avais juste besoin de pouvoir passer mon fichier de l'un à l'autre, j'ai trouvé une piste : Il suffit dans Brackets (dans vos applications, afficher le contenu du paquet, chercher ce fichier : FileUtils.js)

Et de remplacer :

var _staticHtmlFileExts = ["htm", "html"],

par

var _staticHtmlFileExts = ["htm", "html", "svg"],

Et voilà, à vous la preview en différé des svg interactifs.

jeudi 12 septembre 2013

Muse + Inline SVG

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é.

jeudi 25 juillet 2013

SVG interactif via Illustrator

Le SVG est un des sujets récurrents que je croise à chaque fois que je parle d'animation avec Edge Animate, que ce soit en mode basique, ou en mode interactif.

Et pour cause, jusqu'ici, Edge Animate ne donne accès au SVG que sous la forme d'une image, inaccessible, à moins d'y entrer par le biais des Edge Commons

Après avoir lu une question sur le forum, dont l'auteur rêvait de reproduire cette infographie du Guardian, je me suis dit qu'il était grand temps que je rédige un petit truc, avec un exemple à la clé.

GrapheInteractif.png

Voici donc l'infographie SVG avec les légendes interactives. Très basique, vous n'aurez besoin que d'illustrator et de quoi saisir du texte brut.

Le reste dans le corps du billet.

Lire la suite...

dimanche 28 octobre 2012

Edge Code Preview — Visualiser la syntaxe colorée des SVG

Edge Code (pour l'instant Preview) est un éditeur de code à la fois très basique et très puissant distribué par Adobe et basé sur Brackets.

FR-EdgeCodePreview-Syntax-SVG.pngDestiné à écrire du code, le syntaxer, l'amender pour pouvoir fabriquer des sites web en html5, css et js, il est bien pratique, léger et très efficace, et surtout en évolution permanente. Or, dans les sites web aujourd'hui, avec le Responsive Web Design comme objectif, on utilise de plus en plus d'illustrations SVG.

Et le SVG, c'est bêtement un format de description de dessin vectoriel avec les instructions entre balises (Markup Language).

Sauf que par défaut, Edge Code Preview|Brackets Sprint 15 affichent le SVG comme du texte brut

Voyons ci-dessous comment faire évoluer son appli.

Lire la suite...