SVG1: Getting Started with SVG
SVG is a file format for 2D vector (or object-oriented) graphics. (see the vector vs. image discussion). It is a web standard, and is now well supported by all major browsers.
Read more…
svg
SVG2: Coordinate Systems
Now that you know that you’re going to have to use SVG, here’s a few things will be useful in actually making some pictures.
Read more…
SVG3: Manipulating Primivites
SVG has many primitives. SVG Primitives can be styled and transformed.
Read more…
SVG4: Groups, Transforms, Re-Use, and Hierarchies
(This is part 4 of the 6 part SVG Tutorial))
On the last page, we saw that we could make groups out of primitives, and that we can also apply transformations to elements. The examples just applied transforms to primitives, but, of course, we can apply transforms to groups.
Read more…SVG5: More Transforms and Composition
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…
SVG6: Paths and Curves in SVG
SVG has good facilitities for drawing 2D curves. This is a good way to experiment with Bézier curves (since it supports them).
Read more…
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 (Official) Vector Graphics Tutorial.
Read more…