SVG Vectorial Graphics: Illustrate and Animate with Code

A course by Javier Usobiaga Ferrer , Web Designer

Web Designer. Barcelona, Spain.
Joined April 2015

Learn to create vector illustrations for your website, from basic lines to interactive animations

  • Spanish with subtitles in English
  • 98% positive reviews (260)
  • 8271 students

Learn to create vector illustrations for your website, from basic lines to interactive animations

If you've ever wanted to combine the technical power of web programming and the creative freedom of graphic design, this course is for you. Javier Usobiaga, web designer and cofounder of Swwweet studio, teaches you how to get the most out of scalable vector graphics (SVG), an interactive and responsive vector file format designed for web browsers as an alternative to JPG, PNG, and GIF file types. In this online course, discover the effects, filters, and animations you can use to create your own interactive illustrations with HTML, CSS, and JavaScript code.

Javier also teaches Introduction to Responsive Web Development with HTML and CSS on Domestika, a course that walks you through the fundamentals of front-end web development and helps you build the foundations you need for this course on SVG.

Read more ↓

What will you learn in this online course?

32 lessons & 28 downloads

Labels and basic attributes
5 minutes, 16 seconds
Styles in SVG
4 minutes, 57 seconds
Stroke label (path)
4 minutes, 45 seconds
The viewbox attribute
4 minutes, 6 seconds
Text tags
6 minutes, 55 seconds
Spanish with subtitles in English
  • 98% positive reviews (260)
  • 8271 students
  • 32 lessons (2h 2m)
  • 28 additional resources (6 files)
  • Online and at your own pace
  • Available on the app
  • Audio: Spanish
  • Spanish, English, Portuguese
  • Level: Beginner
  • Unlimited access forever

What is this course's project?

Create an illustration with animated vector images. You can choose any theme you like and make your project as simple or as complex as you want; the goal is for you to apply the tools explored throughout the course.

Projects by course students

Who is this online course for?

Programmers, designers, illustrators, and anyone who's interested in design and wants to tackle new projects with HTML and CSS.

Requirements and materials

You need basic knowledge of HTML and CSS to take this course.

As for materials and tools, you need a computer, a code editor, and a vector-graphics editor like Illustrator, Sketch, Inkscape, or similar software.


Reviews

8271 Students
260 Reviews
98% Positive ratings

Javier Usobiaga Ferrer

Teacher Plus
Web Designer

Web designer Javier Usobiaga has spent over a decade working as a specialist in front-end web development, designing responsive websites from start to finish. With his experience and expertise, he cofounded Swwweet studio alongside Marta Armada.

He also enjoys sharing his knowledge by leading web-design workshops and teaching at prestigious schools like Elisava and IDEP.

Javier understands the web in its totality, not only making it look visually appealing on screen, but also optimizing its usability across all devices and in different contexts.

According to him, "how fast a page loads and responds is every bit as important as the aesthetic, and something that is often overlooked in our line of work." His approach combines the aesthetic appeal of art with the technical solidity of programming, creating an unbeatable user experience.


Content

  • U1

    Introduction

    • Presentation
    • Influences
  • U2

    SVG Basic

    • Labels and basic attributes
    • Styles in SVG
    • Line, polyline, and polygon labels
    • Stroke label (path)
    • The viewbox attribute
    • Text tags
  • U3

    Tools and optimization

    • Vector editors and export
    • Organization of SVG
    • SVG optimization
  • U4

    Incorporating SVG to the web

    • Ways to load an SVG on the web
    • Icons systems
    • SVG responsive
    • Accessibility in SVG
    • Support in browsers
  • U5

    Effects in SVG

    • Transformations
    • Gradients
    • Patterns
    • Masks and clipping paths
    • Filters
  • U6

    Animation in SVG

    • Types of animation in SVG
    • Animation with CSS
    • Sequence animation
    • Drawn animation
    • Interactive animation
  • U7

    Interaction and advanced animation

    • Animation with JavaScript
    • JavaScript libraries for animation
    • Animated checkbox
    • Mutation (morphing) in SVG
    • Animation along a stroke
    • Inspiration
  • FP

    Final project

    • SVG vector graphics: illustrate and animate with code

What to expect from a Domestika course

  • Learn at your own pace

    Enjoy learning from home without a set schedule and with an easy-to-follow method. You set your own pace.

  • Learn from the best professionals

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

  • Meet expert teachers

    Each expert teaches what they do best, with clear guidelines, true passion, and professional insight in every lesson.

  • Certificates
    Plus

    If you're a Plus member, get a custom certificate signed by your teacher for every course. Share it on your portfolio, social media, or wherever you like.

  • Get front-row seats

    Videos of the highest quality, so you don't miss a single detail. With unlimited access, you can watch them as many times as you need to perfect your technique.

  • Share knowledge and ideas

    Ask questions, request feedback, or offer solutions. Share your learning experience with other students in the community who are as passionate about creativity as you are.

  • Connect with a global creative community

    The community is home to millions of people from around the world who are curious and passionate about exploring and expressing their creativity.

  • Watch professionally produced courses

    Domestika curates its teacher roster and produces every course in-house to ensure a high-quality online learning experience.


FAQs

Domestika's courses are online classes that provide you with the tools and skills you need to complete a specific project. Every step of the project combines video lessons with complementary instructional material, so you can learn by doing. Domestika's courses also allow you to share your own projects with the teacher and with other students, creating a dynamic course community.

All courses are 100% online, so once they're published, courses start and finish whenever you want. You set the pace of the class. You can go back to review what interests you most and skip what you already know, ask questions, answer questions, share your projects, and more.

The courses are divided into different units. Each one includes lessons, informational text, tasks, and practice exercises to help you carry out your project step by step, with additional complementary resources and downloads. You'll also have access to an exclusive forum where you can interact with the teacher and with other students, as well as share your work and your course project, creating a community around the course.

You can redeem the course you received by accessing the redeeming page and entering your gift code.

If you're a Plus member, when you complete a course you've purchased, you'll instantly get your personalized certificate. You can see all your certificates in the Certificates section of your profile. You can download your certificates as PDFs and share the link online. Learn more about certificates.
SVG Vectorial Graphics: Illustrate and Animate with Code. Web, and App Design course by Javier Usobiaga Ferrer

SVG Vectorial Graphics: Illustrate and Animate with Code

A course by Javier Usobiaga Ferrer
Web Designer. Barcelona, Spain.
Joined April 2015
  • 98% positive reviews (260)
  • 8271 students