SVG Tutorial for Mathematics Students

Examples

The tutorial just consists of a bunch of documented examples of svg images with increasing complexity.

1. Basic Drawing:
   1. Getting Started
   2. Basic Shapes
      1. Line Segments
      2. Rectangles
      3. Circles and ellipses
      4. Polygons and polylines
      5. Text
      6. Paths
   3. Styling
      1. Colors and Opacity
      2. Dashed lines
   4. Definitions
      1. Duplicating objects: illustrate how to create copies of a group of images. (Starting point for class)
      2. Patterns: background patterns for styling shapes.
      3. Markers and Arrowheads
   5. Coordinate changes
      1. Affine transformations using Matrices
      2. Types of affine transformations
      3. Example: The Sierpinski Triangle
2. 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.

   1. Document Object Model (DOM) Manipulation, i.e. manipulating the attributes and structure of a SVG document.
      1. Changing attributes: Demonstrates how to change the attributes of an object.
      2. Adding and removing tags: Demonstrates how to add and remove elements from the document.
      3. Animation
   2. The mouse
      1. Mouse Click Locations: Explains how to detect where a mouse clicks.
      2. Advanced Mouse Locations: Explains how to detect where a mouse is located or where it clicks.
      3. Dragging: dragging objects with the mouse.
   3. Objects associated to elements
      1. Bounding boxes: Explains how to work with the bounding box of any element.
      2. Manipulating polygons: Explains ECMAScript bindings to the polygon object.
   4. Longer fun Examples
      1. Building a fractal tree
      2. Subdividing triangles
      3. The hypocycloid
   5. Adding Objects to your code: Objects allow you to group variables together and manipulate them as a group.
3. Working with SVG images
   1. 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.
   2. Converting SVG to other formats: Useful for including your graphics in latex documents.
   3. Saving an interactive SVG: Useful for converting a graphic you have manipulated to a static document.

References

• Resources for learning SVG:
  • The book SVG Essentials by J. David Eisenberg.
  • An SVG Primer for Today's Browsers
  • David Lane's Scalable Vector Graphics in The Journal of Online Mathematics and Its Applications.
  • KevLinDev's SVG Tutorial.
  • W3Schools' SVG Tutorial.
  • Mozilla's SVG Tutorial.
• Technical References:
  • W3C's SVG Recommendation: The most current version of the SVG specification.
  • Jonathan Watt's SVG Authoring Guidelines: explains some technical considerations for best practices when writing SVG.
  • The math supported by ECMAScript
• Sources of basic examples:
  • W3School's SVG Examples.
  • Wikimedia has some basic examples.
  • Saveen Reddy's Example-driven exploration of basic SVG usage.
  • SVGBasics tutorials.
• Sources of fun examples:
  • David Daily's SVG animations.
  • Madhuri Gollu's Fractals Visualization Using SVG
  • Kyle Siegrist's A Basic Article Combining MathML and SVG.
  • Web Ani's Blog: has some nice math examples.
  • Missile Game: This game made me realize that you can do serious interactive things with SVG. Play the game.
  • KevLinDev: a source for interesting 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.