SVG Vectorial Graphics Illustrate and Animate with Code (Spanish, Multisub)

Learn to work with vectorial illustrations on your websites, from the line to the interactive animation Javier Usobiaga – Web Designer and co-founder with Marta Armada of the Swwweet study – will teach you to get the most out of the SVG (Scalable Vector Graphics) format, a type of vector file for use in browsers that arises as an alternative to JPG, PNG and GIF and that is characterized for being scalable, interactive and responsive. You will discover its effects, filters and animations and you will be able to create illustrations and animated pieces with HTML, CSS and JavasScript code.

Javier also teaches in Domestika the course “Introduction to Responsive Web Development with HTML and CSS ” , where you can learn the basics of Frontend Web Development, knowledge that will come very well as a basis to make the most of this SVG vector graphics course.

What will you learn in this online course? 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.

What is this course’s project? You will make an illustration with animated vector elements. The subject is free and you can make a project as simple or complex as you want by putting into practice the tools you have seen during the course.

Who is this online course for? To programmers, designers, illustrators and anyone who has an interest in design and curiosity when developing new projects with HTML and CSS.

Requirements and materials Basic prior knowledge of HTML and CSS is required.

Regarding the materials and tools you will need to complete the course, you must have a computer, a code editor and a vector graphics editor (such as Illustrator, Sketch, Inkscape or similar).