SVG Vectorial Graphics: Illustrate and Animate with Code

A course by Javier Usobiaga Ferrer, Web designer

  • 100% Positive reviews (49)
  • 1185
  • 2h 2m
  • Audio: Spanish
  • Spanish / English / Portuguese
US$ 14.90
DMSTK FEST 57% Disc. US$ 34.90
  • 100% Positive reviews (49)
  • 1185
  • 2h 2m
  • Audio: Spanish
  • Spanish / English / Portuguese
SVG Vectorial Graphics: Illustrate and Animate with Code. A Technolog course by Javier Usobiaga Ferrer

SVG Vectorial Graphics: Illustrate and Animate with Code

A course by Javier Usobiaga Ferrer

DMSTK FEST 57% Disc. US$ 34.90
US$ 14.90

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's included in this 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 project about?

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 it for?

To programmers, designers, illustrators and anyone who has an interest in design and curiosity when developing new projects with HTML and CSS.


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).

This is what Domestika courses are like

  • Learn at your own pace

    Enjoy learning from home without a set schedule. You set your own timetable.

  • Front row seats

    Videos of the highest quality ensure that you don't miss a single detail. With unlimited access, you can watch them over and over.

  • Learn from the best

    Learn valuable methods and techniques explained by top experts in the creative sector.

  • Share knowledge

    Ask questions, request feedback, offer solutions. Share learning with other students in the community.

  • Expert instructors

    Each instructor teaches only what she/he does best, conveying true passion and excellence in every lesson.

  • Creative community

    More than 1M creatives and growing. Domestika is the place to share and learn what you love.

  • Certificate Pro

    Demonstrate your course attendance with a certificate signed by the teacher. Get it with your Domestika PRO subscription

  • Professionally developed courses

    We selected top creatives and a team of experts to develop the courses. The result? You'll feel like you're working side by side with leading professionals.

DMSTK FEST 57% Disc. US$ 34.90

Javier Usobiaga Ferrer

Javier Usobiaga Ferrer TeacherPro

Web designer

Javier Usobiaga is a Web Designer for 10 years and co-founder with Marta Armada Swwweet studio, specialized in designing responsive webs from the initial conception to the front-end development.

He also enjoys a lot in his facet as professor of Web Design in renowned workshops and schools like Elisava, IDEP.

Usobiaga understands the web as a whole, not only how beautiful it can be on the computer screen, but its usability in different devices and circumstances.

In his words "I think that as important as the aesthetic is how fast it charges or how well it responds, and I think that in our industry we often forget about that."

49 ratings / 100% positive ratings