A la découverte de <svg>

Attention:  cet article date du 5 février 2016
Ce qu'il contient est peut être encore valable...
... ou complètement obsolète!

A la découverte du format SVG et de son utilisation dans une page web.

Au programme: intégration, viewbox, dessin, groupe, animation, interaction, DOM (css, javascript)…

Au programme de ce tutoriel vidéo d’un peu moins de 2 heures:

  • mise en place du svg (img, css, balise <svg> et le viewBox pour le responsive)
  • dessiner: cercles, rectangles, textes, chemin, courbes de Bézier…
  • grouper, définir des objets, les réutiliser
  • opérer des transformations (échelle, translation, rotation…)
  • animation: interpolation de forme, de mouvement
  • interaction: javascript, css, dom
  • outils : inkscape / illustrator (et optimisations)

Cette vidéo (comme la précédente sur <canvas>) contient aussi des assortiments de couleurs qui peuvent piquer un peu les yeux.

Quelques koalas roses et un buuuut de Rubgy (avec transformation!!!)

Laisser une réponse

Catégories

Archives