SVG Tutorial for Mathematics Students


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.


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.

Last modified on August 17, 2018.
[check html] [check css]