SVG Tutorials

These pages are a 6 part SVG tutorial originally written in 2014 - the main content doesn’t really change much. The tutorial was originally targeted for CS559 students, but it can provide a decent starting point for anyone who wants to learn SVG.

These pages were converted from WordPress to Hugo in 2020, and then revised in 2021.

For a more comprehensive tutorial on SVG, I recommend the official Mozilla SVG Tutorial.

SVG5: More Transforms and Composition

in SVG Tutorials
svg
This is part 5 of the 6 part SVG tutorial Most of the things I’ve seen about SVG on the web are meant for designers who haven’t had a graphics class, so they are a little vague about transformation. The specification has all the details (including all of the kinds of transforms that are supported). However, it doesn’t specify how composition occurs. SVG does allow transformations to be composed. You can put multiple transformations on any object. Read more…