0 index
1 Vector Graphics
2 Definition of Vector Graphics
3 Comparing some formats
4 Advantages of Vectors
5 Disadvantages of Vectors
6 Examples of Vector Graphics Programs
7 Basic SVG
8 An SVG Template
9 A circle
10 Transformations
11 Transformation Types
12 Lines and Polygons
13 Basic Animation
14 For more information...

created using slideshow.cgi by Andy Harris

Vector Graphics

1. Vector Graphics

Vector Graphics

2. Definition of Vector Graphics

  • Instructions for drawing stored rather than actual raster values
  • Client machine draws graphic on the fly

Vector Graphics

3. Comparing some formats

Vector Graphics

4. 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

Vector Graphics

5. 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

Vector Graphics

6. 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)

Vector Graphics

7. 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

Vector Graphics

8. An SVG Template

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

Vector Graphics

9. 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

Vector Graphics

10. 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

Vector Graphics

11. Transformation Types

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

Vector Graphics

12. Lines and Polygons

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

Vector Graphics

13. 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

Vector Graphics

14. 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.


Vector Graphics

Definition of Vector Graphics

Comparing some formats

Advantages of Vectors

Disadvantages of Vectors

Examples of Vector Graphics Programs

Basic SVG

An SVG Template

A circle


Transformation Types

Lines and Polygons

Basic Animation

For more information...