Le premier présentateur, Ryan Irelan, est Lead Educator chez Mijingo.com, un service en ligne offrant des formations sur le SVG. Il nous ramena à la base de ce format qui ne date pas d’hier. Ce standard de dessin vectoriel ouvert a été créé par le W3C en 1999. Même s’il se trouve dans les navigateurs depuis 2001, il n’a toutefois été adopté par une masse critique que tout récemment, suite au déclin de son compétiteur, Adobe Flash.
Nous allons voir dans un instant comment intégrer le SVG dans nos pages Web, mais avant cela, il faut en comprendre l’avantage. Jadis, de nombreux designers utilisaient le format Flash pour réaliser et afficher des animations sur le Web. Cette technologie propriétaire nécessitait le téléchargement d’une extension (le fameux plug-in Flash). Le SVG, qui est une partie intégrante du DOM, est quant à lui supporté par tous les navigateurs modernes. Il suffit simplement de savoir bien s’en servir.
title et desc.Cela dit, le format n’est pas parfait. Il n’est pas toujours implémenté uniformément à travers les différents navigateurs. Il faut donc connaître les exceptions, les limites et les moyens de contourner celles-ci afin d’atteindre nos objectifs de manière efficace.
Puisqu’il s’agit à la base de code XML, le SVG hérite des avantages et des inconvénients de ce langage. Et comme ses données s’affichent graphiquement, il offre aussi les avantages et les inconvénients d’une image.
Le SVG offre une panoplie de formes géométriques avec leurs propres balises, attributs et propriétés. Il y a des formes simples comme rect, circle, elipse et polygon. Pour afficher des traits, des chemins, des formes ouvertes ou plus complexes, on dispose des balises polyline et path.
Le SVG ne se limite pas à de simples formes géométriques. On peut ajouter toutes sortes d’effets à nos images à l’aide de masques (clipPath et mask) et de filtres qui peuvent être combinés. Mais avant de pouvoir se servir de tous ces outils efficacement, la compréhension de l’attribut viewBox est primordiale.
La deuxième présentatrice, Brenda Storer, nous plongea plus en profondeur dans le code. Le sujet majeur de sa présentation était l’attribut viewBox. C’est probablement l’attribut le plus important parce que c’est lui qui définit la portion de l’image qui s’affiche à l’intérieur du « viewport » (nom de l’objet SVG dans le DOM). On peut se l’imaginer comme une sorte de caméra à travers laquelle l’image s’affiche selon les coordonnées associées à l’attribut. Prenons l’exemple suivant :
viewBox="0 0 800 600"
L’attribut viewBox. est composé de quatre chiffres séparés par un simple espace. Les deux premiers chiffres représentent les coordonnées de départ (x et y) définissant la portion visible du SVG. Les deux chiffres suivants représentent la largeur et la hauteur de la portion visible, calculées d’après les valeurs x et y initiales.
Cela signifie qu’il est possible de n’afficher qu’une portion d’une image à la fois. On peut même animer le viewBox afin de simuler le mouvement panoramique (pan) d’une caméra. Le viewBox est souvent comparé à la portion visible d’une carte sur Google Maps. Tout ce qui est situé à l’extérieur de cet espace ne sera pas affiché — à moins d’indiquer le contraire avec le code CSS overflow: visible;.
Il ne faut pas confondre cela avec les attributs width et height, qui gèrent la taille du SVG dans le contexte d’une page Web. Un cadre d’image de 100px par 100px (width et height) peut contenir un SVG affichant une illustration plus grande (exemple : viewBox = "0 0 200 200") ou plus petite (viewBox = "0 0 50 50").
Pistes complémentaires
Une fois que vous avez bien compris le fonctionnement du viewBox, le reste semble simple en comparaison — sauf, peut-être, certaines limites liées à la méthode d’intégration des SVG que vous avez choisie. On peut commencer à s’amuser…
La conférencière Sarah Drasner nous en a mis plein la vue avec ses animations, mais c’est son illustration adaptative, la fabrique de pandas à rayon laser, qui a volé la vedette!
Nous somme habitués de voir du design « responsive » dans une page Web, mais une illustration qui se déconstruit et s’assemble selon la taille de votre écran, c’est bien une première, du moins en ce qui me concerne. Cette image utilise pourtant les mêmes medias queries que l’on est habitué de voir depuis quelques années, combinées avec quelques propriétés "positions: relative/absolute;", elle réussit à afficher l’image de manière complètement adaptative.
Pour arriver a créer des images complexes sans s’arracher les cheveux, il est préférable d’optimiser ses SVG. Heureusement, Il y a quelques outils qui peuvent le faire pour nous.
Une fois que l’on sait comment créer des illustrations et les optimiser pour le Web, on peut commencer à faire des choses de plus en plus intéressantes…
Le conférencier Dudley Storey mit ensuite l’accent sur l’aspect adaptatif du texte SVG. Tel une image, le texte SVG s’adapte en effet au contexte dans lequel il se trouve. Voici un exemple de texte SVG, combiné avec un clip-Path qui masque tout, sauf pour l’image qui se trouve à l’intérieur du texte :
Dudley a montré comment remplacer les image maps en insérant des ancres (balises a) à l’intérieur d’un SVG. Comme exemple, il nous a présenté une carte du Canada interactive. Jadis, ce genre d’image interactive se faisait avec des images maps, qui ne sont pas responsive. À présent, une seule balise suffit et la précision est parfaite. Il faut que la forme soit remplie (avec la propriété Fill) pour que cela fonctionne — quitte à préciser style="fill-opacity:0;" si vous voulez une forme qui semble vide.
Ils nous a aussi fait quelques démonstrations du potentiel des patterns SVG dans le contexte d’une image de fond (background image).
Un autre atout que nous offre le SVG, c’est la réutilisation de code avec la balise <use xlink:href="#"/>. La balise se réfère a l’identifiant d’un élément ou d’un groupe d’éléments et permet de reproduire celui-ci à l’écran sans trop alourdir le DOM. Exemple : codepen.io/AmeliaBR/pen/ZYMEKM
Piste complémentaire :
Clark Wimberly nous a fait une démonstration de l’outil Sketch. Ce logiciel n’est malheureusement pas libre et fonctionne uniquement sur la plateforme Mac. Il offre tout de même des possibilités intéressantes. Certaines fonctionnalités d’exportation semblent très utiles pour faire des changements sur l’ensemble des icônes d’une page en un seul clic. Sketch permet aussi d’organiser l’exportation des images de manière spécifique, selon la configuration de l’utilisateur.
Piste complémentaire :
Chris Gannon nous en a mis plein la vue avec ses animations. Il a expliqué qu’il travaillait jadis avec Flash pour créer des banière publicitaires et comment il a opéré sa transition vers le SVG lorsque Flash s’est estompé. La librairie d’animation Greensock, qui fonctionnait uniquement avec Flash, a elle aussi migré vers le Javascript.
Chris conseille aux animateurs débutants de s’attaquer d’abord au « fruit le plus bas », c’est à dire aux animations qui sont à la portée de leurs compétences actuelles. En commenceant par quelque chose de simple, on acquiert de l’expérience et on prend confiance en nous et en nos capacités de progresser vers des animations plus complexes.
Chris a aussi anoncé sa première contribution au code libre avec ScrubGSAPTimeline.js sur github. Il s’agit d’un outil permettant de contrôler la ligne de temps de Greensock.
Piste complémentaire :
La conférence s’est terminé avec une table ronde organisée par Chris Coyier, designer chez Codepen, écrivain pour CSS-Tricks et podcaster pour Shoptalk.
Chris a d’abord résumé l’ensemble de ce que nous avions appris au courant de la journée. Il a notamment confirmé que le texte SVG est pratique pour la mise en page responsive, bien qu’il ne soit pas aussi performant que les autres éléments SVG lorsqu’il est animé.
Il a rappelé l’utilisation de la balise symbol, qui permet de créer un SVG dans la page, le cacher et ensuite le réutiliser autant de fois que l’on désire dans la page. J’ai réalisé et mis en ligne quelques exemples sur JSBin pour illustrer comment se servir de symbol.
À la toute fin, Chris Coyier a souligné « la mort du SMIL » en faisant référence à la décision prise par les développeurs de Chrome de le déprécier — sans parler du fait que les navigateurs Internet Explorer et Edge de Microsoft ne l’ont jamais supporté. Désormais, pour les animations SVG, il faut se tourner vers CSS et Javascript. La librairie Greensock est de loin la préférée des personnes présentes dans cette conférence Web. Comme nous l’avons vu précédemment, il y a aussi des gens qui travaillent sur le WAAPI (Web Animation API).
Deux expertes notables du SVG citées par Chris :
▶ Suite et fin : Conclusion
Le développement Android progresse constamment avec de nouvelles fonctionnalités pour faciliter la création d’applications. Construction d’interface utilisateur avec Jetpack Compose, injection de dépendances avec Hilt, extensions de développement de jeux, librairies de compatibilité emoji, et la liste continue. Les nouveaux projets n’ont aucun souci à prendre avantage de ces nouvelles fonctionnalités. Cependant, les projets anciens […]
En juin dernier, Savoir-faire Linux a participé à la 10ᵉ édition du DrupalCamp Montréal, qui a eu lieu à l’Université Concordia. Ce fût l’occasion de voir une bonne partie de la communauté de développeurs Drupal montréalaise, d’échanger avec les autres entreprises qui travaillent avec cette technologie et de faire l’état de l’évolution de Drupal de […]
Développement Web Bien démarrer avec le rendu côté serveur avec Angular Par Kévin Barralon Cette semaine, nous avons mis en ligne un tutoriel pour les développeurs qui utilisent le framework JavaScript Angular. Ce tutoriel a pour but de les aider à initialiser un projet Angular avec le rendu côté serveur pré-configuré. L’intérêt de la mise […]
Gestion du rendu côté serveur : Une nouveauté Angular imposant un défi Angular est un framework utilisant le langage de programmation TypeScript. La version 5 a été mise en ligne en novembre 2017, avec de nouvelles fonctionnalités et corrections de bugs. Cette dernière version est accompagnée de l’outil en ligne de commande Angular CLI, mais […]
Design Qu’est ce que design system ? Par Patrick Bracquart Depuis plusieurs années, la complexité des sites et applications nous ont poussé à repenser le design et les méthodologies tant les champs de compétences nécessaires se sont élargis (analyste web, designer UI/UX, designer d’interaction, développeur front-end, …). C’est dans ce contexte qu’est apparu le design […]