W3C logo

Introduction to SVG

svg banner

Objective of the course

The Introduction to SVG online course will extend the skill set of Web designers and content producers to make maximum use of this exciting technology. This course introduces you to scalable vector graphics for the Web (SVG), what it can do, how to create and manipulate graphics using SVG that can attract and engage your audience.


  • Create SVG documents
  • Learn how to add border effects, linear and radial gradients;
  • Learn how to create components of images that can be reused;
  • Learn how to transform your images (enlargement, rotation, shifting etc.);
  • Add animation using SMIL;
  • Use scripting to transform and manipulate images;
  • Make your graphics interactive and responsive to user input.

All course material is presented in English. Assignments must also be submitted in English. Participants may post messages to the discussion forum in any language.

Course description

Each week ends with a practical assignement.

Week 1 – Let’s get on with it

After an overview of SVG subject and a brief look at its history, we quickly get into creating and positioning simple shapes, getting to know the tags and attributes and look at lots of examples.

By the end of week 1 you’ll be able familiar with , , , , , and .

Week 1 assignment: the assignment at the end of the module asks you to create a document that reproduces a given set of visual elements, using SVG.

Week 2 – The path to power

Week 2 introduces the element: an extremely powerful and flexible aspect of SVG. It’s so powerful and flexible that it gets a whole week to itself!

Week 2 assignment: the assignment this week will ask you to create an SVG image and share it with the rest of the group.

Week 3 – Special effects department

This week we begin to get more creative with border effects; transformations: translation, rotation, and scaling; linear and radial gradients. With all the key elements in place we can start to reduce the amount of code necessary by grouping elements and applying the element.

Week 3 assignment: rather than an assignment, a quiz this week acts as a method for cementing what you’ve learned so far.

Week 4 – Altered images

Now that we’ve learned how to create graphics and add special effects, it’s time to tackle some methods for affecting the way in which images are presented. Clip-paths, patterns and filters can be used to create (shaped) picture frames, repeating patterns, different coloration and so on.

Week 4 assignment: a final assignment invites you to show off!

End of introductory period

By the end of week 4 you’ll have covered a lot of ground. You’ll be able to make professional-looking graphics with a variety of eye-catching effects and that may be as far as you want to go. If so, you can stop here and, if you’ve successfully completed all the assignments, claim your certificate.

Alternatively you can choose to dive into the final two weeks for which familiarity with scripting and core programming concepts will be required.

Week 5 – Dynamism and animism

Still with us? OK, let’s get things moving!

This week begins by looking at declarative animation. That is, animation defined in the XML markup, not in scripting. You can bend and twist shapes, move one image along the outline of another and so on – all defined by markup.We’ll then look at script-based approaches to dynamism, adding new content to images and basic user interaction.

Week 5 assignment: naturally enough, the assignment won’t let you stand still.

Week 6 – DOM DOM & DOM

In the final week we examine SVG’s Document Object Model and pick up some more techniques for driving user interaction through scripting. The very last lectures lead the way towards you writing scripts that allow you to affect your SMIL animations through scripting and that bridge the gap between the HTML and SVG DOMs.

Week 6 assignment: the course ends with an assignment designed to allow you to put into practice the skills obtained throughout the course. Again, feel free to show off!