Tout ce qu’il faut savoir à propos des SVG!

SVG, SVG partout… OMG!SVG! Nous pouvons dire sans aucun doute que, après avoir assisté à la conférence proposée par Naplocha Aga durant la Codemotion 2017 , UI - UX - front-end développeur , nous avons été profondément inspirés et intrigués par le monde des SVG. En outre, ce ne sont pas seulement des illustrations vectorielles, mais même des images animées! Déplacez le curseur sur les figures et, comme par magie, vous les verrez se déplacer, la couleur, transformer sous vos yeux.

Vous voulez nous suivre dans notre voyage à Rome et découvrir tout le secret sur les SVG ? Cliquez sur « Commencer » et suivez le chemin, vous ne serez pas déçus.

Commencer

L’aventure commence de Milan!

On utilise un tag img

Valises prêtes, l'enthousiasme à son paroxysme: tout est prêt pour le voyage au coeur du monde des SVG. Le grand succès du graphisme vectoriel, dans le web, provient de nombreux facteurs: l'évolutivité, l'accessibilité, l'optimisation intrinsèque pour l'affichage haute résolution, la taille modeste du fichier. En bref, l'avenir des images online est à venir! Tous les modèles que vous trouverez sur cette page sont réalisés à partir de code SVG ... Comment avons-nous fait? Il existe différentes façons d'atteindre ce résultat, mais ne vous inquiétez pas: pour pouvoir profiter des merveilles vectorielles il vous suffit simplement d’insérer un tag à l’intérieur du fichier, en utilisant une simple balise img.

Les gaulois à la conquête de Rome!

Inline SVG

C’est tout? Bien sûr que non, il y a encore beaucoup de choses à découvrir! Nous commençons à explorer le potentiel caché de SVG et nous allons voir une autre façon de les insérer dans une page: Ceci est la méthode inline, qui prévoit d'inclure le code SVG directement dans le code HTML. Facile, non?

Que le Codemotion commence

Animations avec CSS

Certains pourraient se demander pourquoi glisser un code SVG (parfois) trop long sur la page, quand il est possible de faire moins : Et bien, c’est la seule façon que nous puissions faire pour libérer notre imagination! En regroupant certains éléments dans le processus de création de l'image, il est possible de les attacher à un ensemble d'instructions pour les rendre animés. Encore une fois vous vous demandez comment c’est possible? Avec CSS, bien sûr !!

Code et… bière!

Animations optimisées avec CSS

Comme vous pouvez le constater les possibilités sont infinies ... Les Keyframes et les propriétés d'animation sont vos meilleurs alliés !! On porte un toast pour eux !!

Où il y a un codeur, il y a un café

SVG "single line drawing"

Nous le répétons: la seule limite est votre imagination. Vous voulez des effets spéciaux impressionnants? Pas de problème, vous devez spécifiquement préparer l'image lors de sa création pour qu’elle soit lisible lors du codage. Réaliser un SVG où le bord est une longue ligne ouverte et vous pourrez mettre en oeuvre la soi-disant “single line drawing”, en expérimentant les propriétés AVC-dashoffset.

De Castro Pretorio à Marconi

Animations CSS avec l'hover

Vous le savez, en ville les transports publics nous facilitent la vie et notre code aussi, entre les feux de circulation, l’attente et le stress. Utiliser le métro pour rejoindre le Codemotion était essentiel pour nous. Déplacez votre souris sur le wagon et partez avec nous!

Pause sucrée entre deux speech

Animations CSS avec le click

Apparemment il y a aussi un codeur où il y a de la crème glacée!! Un peu de sucre pour recharger les batteries ... une petite faim? Cliquez sur la glace pour composer votre cône préféré.

Agneau, fromage, poivre et ... pizza !!

Animations CSS avec le scroll

Il ne pouvait y avoir une étude approfondie et minutieuse sans goûter les délices culinaires locaux: agneau et spécialités fries, fromages, poivre, focaccia, la fameuse pizza romaine et les différents types de pâtes.. tous ont été savourés pendant le Codemotion!

Retour à Milan

Animations JS avec GreenSock

Toutes les belles aventures sont, malheureusement, destinées à finir: notre voyage métaphorique dans le monde des SVG est en train de se terminer aussi. Mais avant de conclure, juste une petite chose. Si vous voulez travailler avec les animations sur le web, vous devrez tôt ou tard utiliser GreenSock, la bibliothèque JavaScript pour gérer des animations plus avancées: naturellement, nous pourrons amplement l’exploiter pour ajouter des effets toujours plus riches à nos SVG.