CSC 195 2014S, Class 09: Images as Markup: Exploring SVG
========================================================

_Overview_

* Preliminaries.
    * Admin.
    * Questions.
* Vector graphics.
* SVG.
* Lab.

Preliminaries
-------------

### Admin

* Cool talks on tech in liberal arts today
* Cool CS table article Friday
* We'll look at some of the things you built.
* Next homework: Do something interesting with SVG.

Vector graphics
---------------

* Two main models of computer graphics:
    * Raster graphics: Model image as pixels
    * Vector graphics: Model images in terms of basic shapes and
      lines.
* Why use vector graphics rather than raster graphics
    * Scalable without loss of resolution
    * Scaling does not change storage space / Representation is
      almost independent of size
    * No loss of information: If you decide to change something, we
      still know what the thing is.  Easy to change.
    * Some T-shirt companies like them.
    * Generally MUCH SMALLER than raster graphics
    * Better for some output devices
* In most modern systems, output is raster (screen, printer)
    * Question as to *when*
      
SVG
---

Goals:

* For the Web
* Human readable
* Easy to render
* Rich/powerful

Represent as XML (like HTML, but generalized)$a

* Lots of parsers
* Familiar syntax
* <svg> ... </svg>

    <svg
       xmlns="http://www.w3.org/2000/svg"
       width="200"
       height="200"
       id="svg2"
       version="1.1">

* <circle /> 
    * radius r="10"
    * center point or top-left
      cx="100"
      cy="50"
    * Fill color (gradiant, pattern, continuously changing, etc.)
    * Stroke thickness
      stroke-width="1px"
    * Stroke color
    * [brush, if supported]
    * Transformations (rotation, scale, skew, ...)
    * Opacity
* Other shapes
    * Rectangle
       * Left, top, width, height
       * Curviness of corners
    * Polygon
* Other things
    * Line
       * Starting and ending points
       * Stroke stuff
       * Can we specify curved lines?  Yes.  Bezier curves.
         [Read more later.]
* Additional issues
    * Layering
    
---