Explore the Future of the Web

Understanding SVGFrom <line> to Animation

Scalable Vector Graphics have been living in the browser for years, and they’re more and more necessary in modern web design: they help us create scalable retina-screen-proof visual elements, complex animations and interactive visualisations. In this workshop we’ll start by learning the basics from scratch, and we’ll cover the following topics:

  • SVG elements and syntax
  • Different ways to embed an SVG in a website
  • CSS manipulation of SVG
  • Responsive SVG
  • SVG icon systems
  • SVG animation
  • SVG filters

You don’t need to be a front-end developer to attend this workshop, but a basic HTML and CSS knowledge is advisable, since we’ll be coding most of the time.

You’ll also need a laptop and a text editor; and it’s better, although not mandatory, to have some SVG edition software installed, like Adobe Illustrator, Sketch or Inkscape.