Held: Thursday, 3 April 2014

Back to Outline 08 - Drawing with a Canvas. On to Outline 10 - Processing (2).

Summary

We start to explore SVG.

Related Pages

• EBoard (Source) (HTML) (PDF)

Overview

• Vector graphics.
• SVG.
• Lab.

Administrivia

• We'll look at some of the things you built.
• Next homework: Do something interesting with SVG.

A quick introduction to Vector Graphics

• Issue: Design of image file formats.
• Two basic models of 2D images
  • Raster graphics: Based on individual pixels
  • Vector graphics: Based on lines and shapes
• Why care about vector graphics?
  • Scalable
  • Likely to be smaller files
  • Can be rendered differently (e.g., on a plotter or some no-longer-common forms of display screen)
• Primary concerns:
  • What shapes do we support?
    
    • Circle/ellipse
    • Square/rectangle
    • Arbitrary polygon
    • ...
  • What lines do we support?
    • Straight lines
    • Sequences of straight lines
    • Curved lines (how do we describe?)
  • What information should we store for each object?
    • Line color
    • Line width
    • Fill color (or pattern? or blend? or ...)
    • Characteristics specific to the object ...
  • What else?
    • Transformations

A quick introduction to SVG

• Goal:
  • Human-readable: Write by hand as well as by program.
  • Rich/powerful: Able to do a lot of different things.
  • Easy to interpret: So people put them in Web browsers.
• Making it human-readable: Use XML
  • Tags like HTML
  • Use attributes to specify characteristics.
  • Allow some kinds of nesting
• Basic opening tag
• Rectangles
• Circles
• When in doubt, find examples or build them in Inkscape.

Lab

• Play with the various shapes. Look online for examples and such.