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 Tutorials (from 2014)
These pages have SVG Tutorials from 2014 and 2015.
They were converted from WordPress because of some html issues. The content has not been updated
A newer version of these tutorials is available at: https://graphics.cs.wisc.edu/Courses/559-sp2021/tutorials/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 Primitives can be styles and transformed.
Read more…
SVG4: Groups, Transforms, Re-Use, and Hierarchies
(originally from Fall 2014 - CS559 Computer Graphics)
In the last tutorial 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
For seeing how the individual transforms work, there is a great demonstration here where you can try all of the individual transformations and adjust their parameters.
Read more…
SVG6: Curves in SVG
SVG has good facilitities for drawing 2D curves. This is a good way to experiment with Bezier curves (since it supports them).
Read more…