SVG Tutorial for Mathematics Students
The tutorial just consists of a bunch of documented examples of svg images with increasing complexity.
- Basic Drawing:
- Getting Started
- Basic Shapes
- Line Segments
- Circles and ellipses
- Polygons and polylines
- Colors and Opacity
- Dashed lines
- Duplicating objects: illustrate how to create copies of a group of images. (Starting point for class)
- Patterns: background patterns for styling shapes.
- Markers and Arrowheads
- Coordinate changes
- Affine transformations using Matrices
- Types of affine transformations
- Example: The Sierpinski Triangle
- Interactivity with SVG and Scripting
Remark 1: In the work below, I only introduce what I consider to be the most relevant parts of scripting within an SVG context.
A more complete treatment is available as part of An SVG Primer for Today's Browsers.
Remark 2: If the examples don't work, it is possible that you do not have scripting enabled in your browser.
- Document Object Model (DOM) Manipulation, i.e. manipulating the attributes and structure of a SVG document.
- Changing attributes: Demonstrates how to change the attributes of an object.
- Adding and removing tags: Demonstrates how to add and remove elements from the document.
- The mouse
- Mouse Click Locations: Explains how to detect where a mouse clicks.
- Advanced Mouse Locations: Explains how to detect where a mouse is located or where it clicks.
- Dragging: dragging objects with the mouse.
- Objects associated to elements
- Bounding boxes: Explains how to work with the bounding box of any element.
- Manipulating polygons: Explains ECMAScript bindings to the polygon object.
- Longer fun Examples
- Building a fractal tree
- Subdividing triangles
- The hypocycloid
- Adding Objects to your code: Objects allow you to group variables together and manipulate them as a group.
- Working with SVG images
- Including SVGs in web pages: There are several ways to embed SVG images in web pages. I recommend using the <object> tag. See Craig Buckler's discussion of the options on SitePoint.
- Converting SVG to other formats: Useful for including your graphics in latex documents.
- Saving an interactive SVG: Useful for converting a graphic you have manipulated to a static document.
- Resources for learning SVG:
- Technical References:
- Sources of basic examples:
- Sources of fun examples:
- Good text editors:
- BlueFish: This is one editor I currently use. It is available for Linux, MacOS-X, and Windows.
- TextWrangler: A text editor for MaxOS-X.
Acknowledgement of Support:
Support for this work was provided by N.S.F. Grant DMS-1101233 and a PSC-CUNY Award (funded by The Professional Staff Congress and The City University of New York).
Copyright and License
© 2013 by W. Patrick Hooper.
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.