• SMClioh.png raster format
• SMClioh.dia (requires DIA software)
• SMClioh.svg SVG file (requires SVG Player)
• Source of SMCLioh.svg

Advantages of Vectors

• Scalability
• File size based on complexity rather than size or color depth
• Easily generate by programs
• Components can be individually manipulated
• Processing done on client
• Potential for animation, interaction

Disadvantages of Vectors

• Some images (complex curves) hard to reproduce
• Can be harder to write code for an image
• Vector images come up more slowly on client machine
• Many proprietary vector formats and languages

Examples of Vector Graphics Programs

• Macromedia Flash
• Adobe Freehand
• Drawing programs in MSOffice
• Eve
• Subset of most programming languages (graphics object in java, GTK)
• Vector Markup Language (VML)
• Scalable Vector Graphics (SVG)

Basic SVG

• basic.svg source
• Uses a form of XML
• Copy the DOCTYPE line completely
• Requires a plugin
• Download from www.adobe.com
• rect tag creates a rectangle
• attributes determine the characteristics

An SVG Template

• tplt.svg source
• Copy this template to your text editor
• Put all code between <svg> and </svg> tags

A circle

• circle.svg source
• Stroke is the color of the line
• Stroke width is the width of the stroke
• fill is the interior color of the circle

Transformations

• transform.svg source
• <desc> is a comment
• <g> is a grouping tag
• <defs> defines objects to reuse
• be sure objects inside defs have an id
• <use> - allows you to reuse something that has been defined
• transform defines a transformation

Transformation Types

• translate - move
• rotate - turn around a point
• scale - change size
• shear - bend in one direction

Lines and Polygons

• linePoly.svg source
• line - two points and a stroke
• polyline - multiple points and stroke
• polygon - multiple points enclosed with fill

Basic Animation

• rotate.svg source
• <animateTransform> animates a transformation
• You can animate any type of transformation
• Values indicates keyframes
• begin allows you to offset animation time
• dur determines length of animation

For more information...

• svg specs Official specs from W3C
• kevlindev.com Has some terrific SVG tutorials
• VML specs VML is the Microsoft answer to SVG
• dia a vector-drawing program like VISIO that saves in SVG.