SVG Vectorial Graphics: Illustrate and Animate with Code

You will start knowing the work and the influences in the world of the SVG of Javier Usobiaga.

Below you will understand how the SVG format works in its most basic form to be able to alter it and optimize it. For this, you will start writing a basic graphic without visual editors only with the code editor, you will discover how to apply styles through attributes and CSS, you will know how the line, polyline and polygon labels work and the tracing labels that allow to create an infinite number of curves, lines and points. You will also see the viewbox attributes that allow you to make virtual windows (delimit the visible part of a graphic and zoom) and text labels.

Once you know the basic tools it will be time to learn how to use other optimization tools such as vector editors and code tools with which you will be able to group, define and reuse SVG elements in order to save many lines of code.

The next phase will be to incorporate SVG to the web, for it, Javier will explain ways to load an SVG (image of content, background image, with JavaScript ...), its application with respect to icons systems, its role in the responsive web , tips to improve the screen reader experience and how to optimize the SVG format in all browsers.

Next you will discover the effects in SVG (transformations, gradients, patterns, masks and filters) and the types of animation (with CSS, sequence, drawing and interactive) including some advanced animations such as those made with JavasScript, those applied to animated checkboxes, the mutations or morphings and the animations along a stroke.