Qu'estce que l'animation SVG?

Aujourd'hui, nous parlons de SVG Animation. Comment les images vectorielles, JavaScript et CSS peuvent-ils tous fonctionner ensemble pour fournir des animations graphiques attrayantes? J'ai parlé à Cassie Evans, experte en SVG, pour le savoir.

Afficher les notes

Mise à jour hebdomadaire

Transcription

Drew McLellan: Elle est développeur front-end et conférencier avec une formation en design graphique et motion design. Elle a commencé le codage à l'époque de MySpace et de Neopets et a pour mission de rendre le Web plus fantaisiste à nouveau. Elle travaille actuellement chez Clearleft à Brighton au Royaume-Uni, et peut généralement être trouvée en train de bricoler des SVG sur CodePen. Nous savons donc qu’elle est une développeur et une experte en SVG, mais saviez-vous qu’elle a été championne nationale junior de marche pendant trois années consécutives? Mes amis fracassants, veuillez souhaiter la bienvenue à Cassie Evans. Bonjour Cassie. Comment vas-tu?

Cassie Evans: Je fracasse, merci.

Drew: Je voulais vous parler aujourd'hui d'une de vos passions, qui est le SVG, et en particulier le côté animation des choses. Je pense que la plupart des gens qui écoutent ce podcast auront entendu parler des graphiques vectoriels évolutifs sous une forme ou une autre. Je sais que je les ai beaucoup utilisés avec des choses comme des logos et des icônes ces dernières années, mais ne supposons pas. Donc, pour tous ceux qui ne sont pas vraiment au courant du SVG, qu'est-ce qui le différencie des autres méthodes d'ajout de graphiques à une page Web?

Cassie: Donc, beaucoup d'indices sont dans le nom, bien sûr. Donc, SVG signifie Scalable Vector Graphic. Donc, ce sont d'abord les images qui peuvent être de n'importe quelle taille. Vous pouvez les rendre vraiment, vraiment petits ou vraiment très grands, et ils conserveront la qualité d'image et ne seront pas pixélisés comme les JPEG ou les PNG.

Cassie: Vous pouvez aussi les rendre vraiment, vraiment petits, si petit en taille de fichier. Donc, tout le monde a en quelque sorte ajouté un PNG à son site qui représente un million de mégaoctets et vu ce que cela fait pour charger la page. Ainsi, vous pouvez ajouter toutes sortes d'illustrations et de trucs sympas à votre site sans trop affecter les performances, et vous pouvez également les animer pour que ce soit la partie la plus excitante. Avec les JPEG ou les PNG, si vous vouliez les animer ou en déplacer des morceaux, vous devrez les découper en petits morceaux ou les superposer les uns sur les autres, alors qu'avec les SVG, vous avez des éléments réels. le SVG. Il a une structure DOM, tout comme HTML.

Drew: Donc, je suppose que dans un monde d'appareils mobiles avec différentes tailles d'écran et différentes densités de pixels et sorte de connexions de données contraintes, SVG est vraiment un format qui est plus adapté au web moderne qu'aux anciens styles graphiques.

Cassie: Oui, certainement.

Drew: La plupart des images sont bien sûr basées sur des binaires, mais SVG est totalement une source de vue, n'est-ce pas?

Cassie : Ouais. Donc, c'est vraiment excitant parce que vous pouvez réellement cliquer avec le bouton droit de la souris et afficher la source sur un SVG et vous pouvez parcourir le DOM et voir en quelque sorte ce que vous avez et apprendre de cette façon, ce que je trouve vraiment génial. Cela ressemble beaucoup à l'ancien Web, comme être en mesure d'aller sur un site Web et de voir la source dessus et de voir comment il est assemblé.

Drew: SVG semble plus natif et intégré au Web que des choses comme peut-être Canvas ou même à l'époque Flash, qui, bien sûr, était des graphiques vectoriels évolutifs, n'est-ce pas? À sa manière. Et ces technologies ressemblent beaucoup à une boîte noire encastrée sur la page dans laquelle vous ne pouvez pas entrer ou sortir. SVG est beaucoup plus intégré n'est-ce pas?

Cassie: Ouais. C'est drôle que vous disiez cela, car je considère toujours Canvas comme une boîte noire lorsque les gens me demandent s'ils doivent utiliser Canvas ou SVG pour quelque chose. Je pense que la plupart du temps, cela dépend évidemment du cas d'utilisation, mais l'une des choses avec Canvas est que si vous n'avez pas de JavaScript pour une raison quelconque, si votre code échoue, vous vous retrouvez avec une petite boîte noire sans rien dedans. Vous pouvez donc créer cette infographie folle, toutes sortes de choses se déroulant à l'intérieur de cet élément Canvas, puis vous perdez tout. Alors que SVG, il est beaucoup plus aligné sur l'amélioration progressive, vous pouvez donc avoir un SVG animé, peut-être que c'est animé à l'aide de JavaScript, mais sans JavaScript, vous aurez toujours l'illustration. Vous aurez toujours le SVG là-bas.

Drew: Et SVG n'est pas nouveau sur le Web, n'est-ce pas? Il existe depuis un certain temps.

Cassie: Oui, oui. Il existe depuis plus longtemps que je ne fais des trucs sur le Web.

Drew: Et il semble certainement prendre beaucoup plus de sens avec des choses comme l'animation, comme vous l'avez dit, mais De plus, comme nous l'avons mentionné, la façon dont il évolue le rend parfaitement adapté lorsque nous concevons des sites pouvant être visualisés sur un écran Retina avec une densité de pixels doublée, ou devant être livrés via une connexion mobile où vous voulez que les choses se passent. être aussi performant que possible. Nous savons donc que SVG a un DOM, vous l'avez mentionné. Cela signifie-t-il que les éléments qu’il contient peuvent être manipulés avec du code?

Cassie: Oui, c’est donc la chose la plus excitante. Vous pouvez obtenir des éléments SVG et vous pouvez les animer et les déplacer comme vous le pouvez avec des éléments HTML DOM, et cela signifie également du point de vue de l'accessibilité, SVG a un DOM afin que vous puissiez parcourir ce DOM si vous utilisez un écran

Drew: Oui, j'allais donc poser des questions sur la situation de l'accessibilité car, classiquement, les éléments graphiques d'une page sont l'un des plus choses difficiles à rendre accessibles. Alors, y a-t-il une sorte d'attributs que vous pouvez ajouter à un indice? Pouvez-vous utiliser les éléments ARIA en SVG ou comment ça marche?

Cassie: Ouais. Vous pouvez utiliser ARIA étiqueté par, mais vous avez également des balises de titre et de description que vous pouvez insérer dans un SVG.

Drew: C'est incroyable et en termes de préférences de mouvement, car c'est quelque chose que nous avons vu récemment avec une requête multimédia en CSS pour voir que l'utilisateur préfère le mouvement réduit et vous pouvez modifier vos animations et les choses en fonction de cela, est-ce quelque chose que vous pouvez faire en SVG ou doit-il être implémenté un peu plus manuellement?

Cassie: Eh bien, avec SVG, les gens parlent souvent d'animation SVG comme si c'était son propre genre de chose spéciale et bien sûr, nous avions SMIL. Nous avons toujours SMIL techniquement. Il devenait obsolète, mais en fait, il n’est plus obsolète. Ce n’est tout simplement pas aussi largement utilisé et ne fonctionne plus, mais nous avions l'habitude d'avoir SMIL et c'est ce que la plupart des gens appellent l'animation SVG. Alors que maintenant, l'animation SVG pouvait signifier l'une de ces choses. Cela pourrait signifier SMIL, cela pourrait signifier une animation CSS, ou cela pourrait signifier une animation à l'aide de JavaScript ou d'une bibliothèque d'animations JavaScript. Donc, il y a beaucoup d'options différentes, mais avec l'animation CSS et l'animation JavaScript, l'option d'utiliser préfère le mouvement réduit est là et devrait certainement être utilisée.

Drew: Donc, vous avez mentionné l'animation CSS et bien sûr il y a une certaine quantité qui nous pouvons faire, comme avec les éléments HTML et l'animation CSS, pour créer des graphiques et du mouvement sur une page. SVG tout comme les coups qui sortent de l'eau en termes de flexibilité, n'est-ce pas?

Cassie: Oui, certainement. Je pense que les gens font des choses incroyables avec juste CSS, comme Lynn Fisher fait des choses vraiment incroyables. Il y a toutes sortes de gens qui font des illustrations folles uniquement en CSS, mais cela prend beaucoup de temps et le transfert est pratiquement impossible. Comme si vous imaginiez un concepteur vous donnant une illustration et vous demandant de la recréer dans un CSS, ce serait un gros ticket. Donc, SVG rend beaucoup plus faisable d'avoir ces équipes interdisciplinaires et de passer les choses d'une personne à une autre. Vous pouvez donc demander à un illustrateur ou à un concepteur de créer une illustration dans un programme de graphisme vectoriel comme Illustrator, puis de transmettre ce SVG à un développeur qui peut l'animer.

Drew: Et je suppose que cela conviendrait tout à fait bien dans les flux de travail établis des gens. Nous utilisons des choses comme Git, car SVG est basé sur du texte, n'est-ce pas? Donc, vraisemblablement, en validant des SVG dans Git, vous obtenez toute cette capacité de comparaison et de fusion et toutes ces fonctionnalités puissantes que vous obtenez avec d'autres éléments basés sur du texte.

Cassie: Ouais, exactement.

Drew: Donc c'est un peu comme, eh bien je dis un peu comme, ce sont absolument des graphiques exprimés sous forme de code.

Cassie: Oui.

Drew: N'est-ce pas? SVG?

Cassie: Oui.

Drew: Et cela ressemble beaucoup au HTML dans sa syntaxe. C'est un autre langage basé sur XML, n'est-ce pas?

Cassie: Oui.

Drew: Donc, il a des balises et des attributs et des enfants imbriqués et tout ce genre de choses que votre développeur Web moyen est

Cassie: Je pense que c’est ce que j’aime le plus dans SVG, c’est que j’aime vraiment le codage créatif et aussi enseigner aux gens, et j’ai trouvé qu’enseigner aux gens qui sont plus créatifs en se penchant, ils sont parfois un peu ébranlés lorsque vous vous lancez immédiatement avec JavaScript ou Python ou quelque chose comme ça pour le codage créatif, mais sans faute, j'ai réussi à intégrer tous ceux à qui j'ai enseigné avec SVG parce qu'il a cette entrée vraiment accessible points parce qu'il ressemble à du HTML. Donc, vous pouvez donner à quelqu'un avec une compréhension de HTML et comment créer des sites Web SVG, et cela a la même apparence, mais ce sont les graphiques au lieu de documents et vous pouvez ensuite animer cela avec CSS pour commencer, ce qui est aussi un peu plus confortable, et vous pouvez ensuite progresser vers l'animation avec JavaScript. C'est donc une très bonne courbe d'apprentissage.

Drew: Et bien sûr, cela peut être dynamique. Il ne s’agit pas simplement de créer du mouvement. Vous pouvez en fait rendre les propriétés dynamiques. Donc, une des choses intéressantes pour lesquelles j'ai vu SVG utilisé, et c'est un grand terme, mais comme la visualisation de données, DataViz, et dessiner des graphiques et des graphiques et bien sûr des choses comme des tableaux de bord que nous semblons avoir partout ces jours-ci. SVG est en quelque sorte parfait pour ça n'est-ce pas?

Cassie: Oui, certainement. SVG est idéal pour DataViz. Du genre de petit DataViz à D3, qui est une bibliothèque DataViz très connue qui utilise SVG sous le capot. Mais vous pouvez aussi simplement, si vous avez un peu de données que vous souhaitez afficher sur une page Web, vous pouvez créer un graphique dans un programme d'édition graphique, puis vous pouvez simplement utiliser JavaScript pour modifier ces valeurs et ce type de changez l'apparence de votre graphique. Vous n’avez donc pas à vous lancer dans une énorme bibliothèque de bases de données. Vous pouvez en quelque sorte commencer petit.

Drew: De toute évidence, des sortes de graphiques et de diagrammes traditionnels ne sont que la pointe de l'iceberg en ce qui concerne les façons dont SVG peut aider à la visualisation des données. J'ai vu que vous aviez un projet intéressant que vous aviez réalisé chez Clearleft avec vos panneaux solaires sur le toit. Pouvez-vous nous en dire un peu plus à ce sujet?

Cassie: Ce projet était en fait censé être moi en train d'apprendre D3 et ensuite je me suis beaucoup distrait. Nous avons des panneaux solaires sur le toit de notre bureau, ce qui me manque complètement en fait, cela fait si longtemps, mais oui, nous avons des panneaux solaires sur le toit et j'ai découvert peu de temps après avoir commencé à travailler chez Clearleft que nous avions une API qui était attaché aux panneaux solaires auxquels vous pouviez vous accrocher. Alors j'étais comme…

Drew: Incroyable.

Cassie: D'accord. J'ai besoin que ce soit mon projet parallèle, et j'ai jeté un petit coup d'œil à ce que nous avons obtenu de l'API et parmi les données, il y avait la quantité de CO2 économisée et ils ont mesuré la quantité de CO2 dans les arbres.

Drew: Ok.

Cassie: Donc j'ai tout de suite dit, wow, eh bien, nous allons devoir tracer ça d'une manière ou d'une autre, mais je veux le mesurer dans les arbres parce que c'est une façon tellement intéressante de tracer ça. Donc, toutes mes aspirations D3 sont sorties de la fenêtre et je me suis assis dans l'illustrateur et j'ai recréé une illustration de notre immeuble de bureaux et créé une jungle d'arbres, de plantes et d'autres choses, puis je regarde combien de CO2 nous avons économisé et puis en quelque sorte de plus en plus dans ces plantes, ces vignes et tout ça. Ouais, c’est génial. C'est vraiment bien de revenir de temps en temps et de voir à quel point la jungle s'est développée.

Drew: C'est une façon incroyablement créative de visualiser ces données, alors que si vous vous reposiez sur un logiciel traditionnel pour créer des graphiques et des graphiques et choses, il n'y aura jamais de fonction pour créer un immeuble de bureaux avec des arbres au sommet. Que cela n'existe tout simplement pas, mais en utilisant JavaScript et SVG pour pouvoir générer ces graphiques et en utilisant le JavaScript pour les manipuler pour ajuster les valeurs affichées, vous pouvez proposer quelque chose de complètement nouveau dans un tout nouveau. manière de communiquer une idée à la personne utilisant le site. Donc, nous savons que nous pouvons coder le balisage pour les SVG, ce que moi en tant que développeur, je pense que cela sonne bien car je peux entrer et je peux être très précis, mais c'est probablement une compétence technique qui ne conviendra pas. tout le monde, en particulier ceux dont les atouts sont plus créatifs visuellement que le codage réel. Alors, y a-t-il d'autres façons de créer des SVG ou devez-vous simplement le faire à la main et dans un éditeur de texte?

Cassie: Je pense avoir écrit une icône de hamburger une fois juste du haut de ma tête et j'étais super fier de moi, mais le reste du temps, je crée des SVG dans Illustrator ou d'autres alternatives. Le concepteur d'affinité est vraiment bon. Illustrator a évidemment la structure de prix d'Adobe, qui peut être un peu en dehors du budget des gens, mais Affinity Designer est comme un achat unique et c'est plutôt bon en fait, et le balisage SVG que vous en retirez est bon, ce qui est le plus chose importante. Mais oui, je ne pense pas qu'il y ait quelqu'un à part, c'est un gars appelé Blake Bowen sur les forums GreenSock, et je pense qu'il pourrait probablement écrire à la main des données de chemin SVG, mais je ne pense pas que ce soit une chose que tout le monde peut faire . Je ne pense pas que ce soit une chose à laquelle nous devrions aspirer. C'est assez verbeux.

Drew: Donc, étant léger en utilisant un outil graphique dédié pour créer des SVG, c'est un itinéraire parfaitement valide.

Cassie: C'est très bien. Choisissez vos batailles.

Drew: Y a-t-il des outils gratuits pour filtrer les SVG ou est-ce que tout est commercial?

Cassie: Je pense qu'Inkscape est gratuit, mais oui, je le ferais vraiment recommande Affinity Designer. Je pense que pour le type de niveau moins cher, je pense qu'il vaut la peine de payer un peu d'argent pour ces outils car il peut être assez frustrant de travailler avec des outils graphiques vectoriels maladroits.

Drew: En termes de sortie, le La sortie SVG que vous obtenez de ces outils, est-ce la même chose? Génèrent-ils tous le même SVG ou certains sont-ils meilleurs que d’autres?

Cassie: Oui, c’est une très bonne question. Je trouve qu'Illustrator est bien meilleur que les autres outils, mais ce n'est pas quelque chose qui devrait vous retenir ou vous donner l'impression que vous devez dépenser cet argent. Donc, à la fin de la journée, vous obtiendrez un peu de balisage, certains éditeurs devront peut-être faire un peu plus de peaufinage que d'autres, mais la plupart d'entre eux vous permettront d'obtenir un code SVG exploitable.

Drew: J'ai trouvé personnellement quand j'ai essayé de créer des SVG, et je ne suis pas graphiquement compétent, que j'obtiens des résultats variables en fonction de la façon dont je dessine réellement quelque chose dans Illustrator, par exemple. Vraisemblablement, quand il s'agit de réfléchir à la façon dont quelque chose va être animé, la façon dont vous construisez vos formes dans les éditeurs est plus importante. Est-ce juste?

Cassie: Oui, certainement. SVG a également un ordre de dessin implicite, donc ce n'est pas comme HTML. Donc, avec HTML, vous pouvez utiliser cet index pour déplacer des choses et mettre des choses en dessous ou au-dessus d'autres choses, alors qu'avec SVG, l'ordre dans lequel il se trouve dans le code sera l'ordre dans lequel il est affiché sur la page Web. C'est donc quelque chose à garder à l'esprit lorsque vous dessinez un SVG, c'est mettre vos calques dans le bon ordre, puis tout ce que vous voulez déplacer en une seule unité, vous devez l'envelopper dans un groupe et tout ce que vous voulez déplacer séparément à partir de quelque chose d'autre, vous devez vous assurer qu'il s'agit bien d'une forme distincte.

Drew: Oui, donc je veux dire en mettant vos calques en ordre là-bas, vous parlez littéralement de la palette de calques dans Illustrator et en faisant glisser les choses avant d'exporter, n'est-ce pas? Il suffit de les mettre dans le bon ordre, puis de les exporter.

Cassie: Oui.

Drew: Et une fois que vous l'avez exporté, il existe des outils qui vous aideront en quelque sorte à optimiser ou, parce que je sais avec PNG, il y a tout un tas de choses que j'utilise pour couper tout le métier du fichier et réduire la taille du fichier. Y a-t-il des choses similaires pour SVG?

Cassie: Ouais. Il existe un outil appelé SVGOMG, que j'utilise beaucoup, ce qui est génial et vous pouvez l'utiliser pour le traitement par lots. Il y a des commandes de terminal pour cela, mais vous pouvez aussi, il y a un Gooey dans le navigateur, ce que j'aime vraiment pour les grands SVG illustratifs parce que je pense que c'est bien de l'intégrer dans, disons votre processus de construction, si vous avez affaire à une charge énorme d'icônes que vous voulez tous traitées de la même manière, mais si vous avez affaire à un SVG illustratif, c'est bien de pouvoir utiliser le gluant car vous pouvez basculer entre la vue de code et la vue visuelle et vous pouvez simplement vous assurer que les choses que vous modifiez dans les paramètres n'affectent pas visuellement votre SVG de manière négative et n'affectent pas le code d'une manière dont vous ne le souhaitez pas.

Drew: Vraisemblablement ces outils, comme Illustrator, sont parfaits pour créer des graphiques, mais ils ne nous aideront pas du tout avec l'animation, n'est-ce pas? Tout cela se produit une fois que nous obtenons le SVG et le mettons dans une page Web.

Cassie: Ouais.

Drew: Alors, à quoi ressemble ce processus? Je veux dire, de toute évidence, il est difficile de trop parler d’animation dans un podcast audio, mais en ce qui concerne le type de processus que vous devez suivre. Vous mettez votre SVG dans une page, que se passe-t-il alors? Comment en gérez-vous certaines parties ou que faites-vous pour commencer à travailler avec?

Cassie: C'est donc très similaire à l'animation d'éléments HTML DOM en ce sens que vous devez être capable de cibler les éléments eux-mêmes. Cela impliquerait donc de mettre des classes ou des identifiants sur eux afin que vous puissiez les cibler, puis vous pouvez soit utiliser CSS pour l'animation. Il y a des problèmes avec les transformations avec CSS qui sont encore en train d'être un peu réglés. J'ai donc tendance à recommander CSS pour expérimenter et jouer avec l'animation SVG. En ce qui concerne l'animation et la production SVG, je recommanderai généralement GreenSock, qui est une bibliothèque d'animation JavaScript, et oui, bien avec GreenSock et avec CSS, vous obtenez simplement les éléments SVG et ensuite faites des choses dessus.

Drew: Avez-vous donc un accès complet pour interagir avec la gamme complète d'API JavaScript et des choses comme les événements de défilement et les événements de souris, le redimensionnement et l'intersection et tout l'environnement de navigateur que vous avez probablement à votre disposition, pour ensuite faire interagir votre animation avec et répondez à.

Cassie: Ouais. Donc, tout ce que vous utiliseriez en JavaScript normal, comme les événements de souris ou le défilement, ce genre de chose, vous pouvez le rechercher et faire des choses à votre SVG sur ces événements. Vous avez également des méthodes et des trucs spécifiques au SVG, comme get PATHlink, je pense en est un, des trucs comme ça, donc il y a des méthodes SVG spécifiques avec lesquelles vous pouvez jouer.

Drew: Donc vous pouvez faire des choses pour exemple, comme démarrer une animation lorsqu'un SVG apparaît sur la page s'il est déplacé hors de sa place et l'arrêter lorsqu'il est défilé et le redémarrer s'il revient en vue et ce genre de chose.

Cassie: Ouais. Il existe en fait un nouveau plugin GreenSock appelé ScrollTrigger et auparavant, je pense que beaucoup de gens ont utilisé ScrollMagic pour les animations de défilement, mais c'était une bibliothèque différente de GreenSocks, donc ils n'avaient aucune sorte d'affiliation les uns avec les autres, donc vous étiez juste en train de mélanger deux différents bibliothèques, une qui faisait de l'animation et une qui faisait défiler les événements. Alors que GreenSock vient de créer un plugin de défilement qui fonctionne avec GreenSock et qui a un écouteur d'événements. Un auditeur par défilement. Ouais. C’est donc très, très performant et j’ai joué avec récemment et c’est génial. C'est vraiment facile à utiliser.

Drew: Est-ce automatiquement mis en mémoire tampon pour que vous ne soyez pas complètement submergé par les événements de défilement lancés sur votre code et toutes ces sortes de problèmes traditionnels?

Cassie: Ouais tous les problèmes traditionnels, ils font en quelque sorte tout le gros du travail en arrière-plan pour vous, ce qui est bien.

Drew: Fantastique. GreenSock serait-il alors l'outil, le genre de bibliothèque, que vous recommanderiez aux gens de commencer à utiliser s'ils regardaient des animations SVG?

Cassie: Oui, certainement. Principalement parce que GreenSock, c'est la seule bibliothèque d'animation qui gère les transformations SVG de manière cohérente entre les navigateurs et ce n'est pas seulement quelque chose sur lequel ils ne se concentrent plus. C'est un effort constant de leur part, ils sont donc constamment à la recherche de bogues SVG et à la résolution de problèmes. C'est donc très fiable.

Drew: Quel est le genre de situation entre navigateurs avec SVG? Est-ce assez fiable ou êtes-vous constamment confronté à des incohérences entre différents navigateurs et plates-formes?

Cassie: Si vous animez avec GreenSock, ce n'est pas le cas. Si vous animez avec CSS, oui, il y a quelques incohérences. Il s'agit principalement de la manière dont les transformations sont gérées. Ainsi, avec les éléments HTML DOM, les transformations sont mesurées à partir du centre, et avec les transformations SVG, elles sont mesurées à partir du coin supérieur gauche, mais dans certains navigateurs, c'est le coin supérieur gauche de l'élément lui-même, et dans d'autres navigateurs, c'est le coin supérieur gauche. coin de la main du parent de la boîte de vue SVG. Donc, vous pouvez vous retrouver, si vous faites pivoter les éléments dans certains navigateurs, ils pourraient finir par suivre une trajectoire différente de celle d'autres.

Drew: Cela ressemble à la plupart des animations que j'ai jamais essayées scénario. Les choses vont dans des directions inattendues. Nous sommes habitués à une sorte d’outils d’animation traditionnels, avec des options telles que des options d’assouplissement, une facilité d’accélération, etc. C'est probablement quelque chose que GreenSock apporte alors à la table.

Cassie: Ouais. GreenSocks a beaucoup de très bonnes équations d'assouplissement que vous pouvez utiliser. Oui, et ils ont un visualiseur très facile pour que vous puissiez voir un peu comment les facilités fonctionneront.

Drew: C'est vraiment utile, et encore une fois, c'est quelque chose avec lequel je lutte toujours. C’est comme, je sais que je devrais faire quelque chose. Il ne devrait pas simplement se déplacer linéairement de A à B, mais que dois-je faire? Alors oui, pouvoir visualiser des choses est vraiment pratique.

Cassie: Quand j'ai commencé à faire des animations, j'ai fait beaucoup d'animations spatiales parce que je n'avais pas encore tout à fait compris comment l'assouplissement fonctionnait, donc dans l'espace tout fonctionne se déplacer linéairement parce qu'il flotte simplement. Il n'a pas de gravité à affronter, alors j'ai fabriqué beaucoup de fusées, des planètes qui tournoyaient et c'était bien.

Drew: Je veux dire, je suppose que vous, étant un tel passionné de SVG, vous voyez probablement des gens qu'ils mettre SVG à toutes sortes d'utilisations créatives. Quel genre de choses, juste pour faire couler le jus, quel genre de choses avez-vous vu des gens faire avec des SVG qui ont été particulièrement impressionnants ou créatifs?

Cassie: Je pense que l'une des choses que j'aime avec SVG est le fait que vous ne devez pas simplement l'utiliser pour des animations SVG illustratives par eux-mêmes, car il s'agit d'un balisage XML, tout comme HTML. Vous pouvez en quelque sorte le mélanger avec le DOM HTML. Donc, je pense que c'est un peu ringard, mais mes exemples préférés d'animation SVG sont lorsque les gens mélangent une animation SVG avec des éléments DOM sémantiques, donc quand vous avez un bouton qui est un bouton approprié mais il contient une illustration d'icône SVG. de sorte que lorsque vous cliquez sur ce bouton, quelque chose de joyeux se produit, et j'aime ça parce que c'est ce mariage parfait d'une sorte de joie fantaisiste et d'éléments DOM sémantiques appropriés.

Drew: Vous avez dit dans le passé que le développement du front-end est devenu très sérieux ces derniers temps. Est-ce que tout le plaisir est sorti du Web Cassie?

Cassie: C'est une question très sérieuse. Tout le plaisir a-t-il disparu.

Drew: Parce que les choses étaient beaucoup plus amusantes avant, mais peut-être pas aussi efficaces et sommes-nous devenus trop sérieux?

Cassie: Ouais. Je pense que l'efficacité est un véritable tueur lorsqu'il s'agit d'ajouter ces petites améliorations. Je trouve que dans mon travail quotidien chez Clearleft, je me suis rapidement rendu compte que si je voulais avoir des animations en plus, comme un autre ticket ou quelque chose du genre, il était très difficile de faire signer cela. C’est toujours le fait que si le projet commence à être un peu à l’état limité, c’est la première chose à faire. Mais je pense qu’une fois que vous avez une bonne compréhension de l’animation et du SVG, vous pouvez simplement introduire des éléments pour commencer. Ainsi, lorsque vous créez un composant et que vous voyez une opportunité pour un peu d'animation, vous pouvez simplement l'ajouter et cela devient plus facile parce que les gens commencent à voir les possibilités et les gens commencent à se rendre compte que les clients aiment vraiment ce genre de chose. , et vous pouvez en quelque sorte avoir un peu plus de temps pour y travailler.

Drew: C'est le genre de chose qui peut vraiment élever une expérience au-delà du genre de transaction insatisfaisante ou insatisfaisante à quelque chose qui donne à l'utilisateur un peu de joie et lui donne une sorte de perception de la qualité et une certaine personnalité de la marque, je pense avec l'animation. Il y a un…

Cassie: Ouais.

Drew: Il y a beaucoup en termes de personnalité de marque qui peuvent être mis en évidence avec ce genre de petites touches.

Cassie: Mais Je pense que c'est quelque chose que beaucoup plus de gens réalisent également maintenant, pas seulement avec le SVG et l'animation, mais la personnalité en général, et je pense qu'il y a beaucoup plus de poids qui est donné à une copie bien écrite et un peu la personnalité et les illustrations qui ne proviennent pas seulement d'une bibliothèque de stock qui sont uniques à cette entreprise ou à cette personne et les animations en sont une grande partie. Et je pense que j'ai personnellement l'impression que nous voyons plus de ces sites Web de nos jours et je pense que nous avons traversé, et traversons probablement encore un peu d'efficacité pendant la première période, mais je pense que tout ce dont les gens commencent à s'ennuyer cela et il semble que beaucoup de sites Web suggèrent d'être produits par une méga machine d'entreprise et que les gens commencent à faire marche arrière, je pense. Max Bock a récemment créé un site appelé le Web fantaisiste et il contient beaucoup de sites personnels qui sont vraiment joyeux pour diverses raisons et je pense que nous commençons à en voir beaucoup plus.

Drew: Est-il possible d'aller trop loin en ajoutant peut-être trop d'animation et de personnalité à un site?

Cassie: Oui. Absolument. Je ne suis pas un grand fan des sites Web qui sont très, très, whizbang. Comme les sites Web qui sont d'abord l'animation. Vous arrivez à la page et tout bouge et vous essayez de lire le texte pendant que vous faites défiler, mais il bouge pendant que vous essayez de le lire. Je ne suis pas fan de ça. J'aime vraiment regarder l'animation comme une amélioration et je pense que c'est pourquoi SVG, je pense que c'est si génial parce que vous pouvez en quelque sorte créer un site Web par ailleurs assez sensé, mais vous pouvez y avoir ces petites touches fantaisistes.

Drew: Et c'est crucial, n'est-ce pas, comme nous l'avons déjà mentionné, l'aspect d'accessibilité des choses qu'il est possible de créer un SVG joliment accessible, même s'il a une sorte de contenu, si vous êtes enfermé là-dedans, ce n'est pas verrouillé. Il est accessible aux lecteurs d'écran et, espérons-le, à tous ceux qui visitent le site. Comme je l'ai dit, il est difficile pour un podcast de vraiment entrer dans les aspects pratiques de, eh bien, nous ne pouvons pas montrer d'animation ou quoi que ce soit, mais vous dirigez un atelier en ligne avec Smashing Conference sur SVG, n'est-ce pas? [19659008] Cassie: Oui, je le suis.

Drew: C'est la MasterClass de l'animation SVG et ça commence le 8 octobre et c'est un format assez inhabituel. C’est deux heures les jeudis et vendredis. C'est une façon inhabituelle de faire les choses, n'est-ce pas?

Cassie: Ouais. J'en suis vraiment très content car j'ai déjà fait une version de cet atelier. J'ai passé une grande partie de 2019 à le mettre en place. C'était mon bébé, mon projet de passion, et puis j'avais réservé quelques ateliers et puis la situation s'est produite et tous ont été annulés. J'ai donc eu l'occasion de l'exécuter deux fois avant la situation, et c'était vraiment génial mais c'était beaucoup de contenu et c'était un atelier d'une journée complète. Environ huit heures et vous pourriez dire à la fin que le cerveau des gens s’éteint simplement parce que vous êtes assis dans une pièce à essayer d’absorber des informations pendant huit heures. Je suis donc très enthousiasmé par ce format car cela signifie que je pourrais le diviser en sections qui fonctionnent par eux-mêmes et cela donne aux gens une chance de l'apprendre et de le traiter un peu et de le laisser pénétrer avant d'obtenir le prochain chargement d'informations. Je pense donc que nous allons avoir des choses vraiment intéressantes à la fin simplement parce que les gens ont eu plus de temps à absorber.

Drew: Donc, c'est un jeudi et un vendredi, un jeudi et un vendredi, et ensuite un jeudi pour terminer avec deux heures chacun de ces jours, suivi de questions et réponses. Je pense que c'est vrai, n'est-ce pas?

Cassie: Oui.

Drew: Questions et réponses sur chaque session. Qu'est-ce que les participants s'attendent à apprendre? Quelles devraient être leurs attentes en termes de compétences qu'ils pourraient acquérir?

Cassie: C'est donc plus orienté vers le côté codage d'animation de l'animation SVG. So we’ll cover a little bit of getting SVGs out of a graphics editor, and then the whole process from getting the code out through to starting to work with it. So optimizing and adding the right classes and structuring it properly, and then we’ll work on animating SVGs. So we’ll be using CSS. We’ll also be using GreenSock, which is the animation library that I mentioned, and we’ll be covering what I kind of refer to as SVG super powers. So this is stuff that it’s, aside from the animation, it’s the things that you can do with SVG.

Cassie: So that’s like clipping, and masking, and stroke animation, and filters, and all of that stuff is just so important to understand with SVG because it unlocks all of these kinds of super powers that you can play with. And we’ll also look at performance and accessibility, and also a bunch of the kind of little tips that I’ve picked up and learned along the way. So, little handy tips that I find useful for my workflow, handy tips that help with flashes of unstyled content before you start animating. Little tips like that.

Drew: That sounds really useful. I looked just before we started our interview and there are still some early bird places available, which is great. So if people are quick they might still catch those and you can register at smashingconf.com. There’s actually a number of different master classes that are being run at the moment and there are early bird deals and bundled deals on some of them as well. So there’s things like JAMstack, CSS layout with Rachel Andrew, Vue.js, web performance, GraphQL, loads of different Masterclasses and you can find all those at smashingconf.com. So I’ve been learning all about SVG. What have you been learning about lately Cassie?

Cassie: Oh, I’ve been recently learning quite a lot about Eleventy. I did a little site redesign recently using Eleventy and I’ve also been doing Andy Bell’s Eleventy from scratch course. So I’m getting quite into static site generators in general at the moment.

Drew: That’s great. I think we’re all getting into static site generators more as time goes on.

Cassie: It’s the future.

Drew: If you dear listener, would like to hear more from Cassie you can of course sign up for this animation Masterclass with Smashing Conf, but also you can find her on Twitter where she’s @Cassiecodes and her personal website is cassie.codes and that links to her CodePen, which is a great place to explore. Thanks for joining us today Cassie. Do you have any parting words?

Cassie: I would like to say that Smashing and I are offering for free tickets to my workshop. So they are diversity tickets that are going out to anyone that’s underrepresented in tec or going through a tough financial time at the moment. So you can apply for that on the webpage about my workshop and I hope to see you there.

(il)