Main characteristics of Vector graphics  Vector graphics provide an elegant way of constructing digital images (diagrams, technical illustration and charts)  Compact  Scalable  Resolution independent  Easy to edit  Vectors are also well suited to use in animation Vector Graphics Fundamentals 3 3

3 4

3 5

3 6

In vector graphics, images are built up using shapes that can easily described mathematically. Vector Graphics Fundamentals 3 7

(3,7) (7,3) origin SVG and SWF use the y values increasing downwards PDF uses the y values increasing upwards In illustrator measurements increase downward Vector Graphics Fundamentals 3 8

Coordinate system Pairs of coordinates can be used to: 1. define points 2. Define displacement or movement Z - Axis X- Axis The power of coordinate geometry comes from using letters to represent unknown values and using equations in those values to specify relationships between coordinates that characterize geometrical shapes Example: y=mx+c Vector Graphics Fundamentals 3 9

Vector Vector Graphics Fundamentals 3 10

Vector Graphics Fundamentals 3 11

Vector Graphics Fundamentals 3 12

Vector Graphics Fundamentals 3 13

Vector Graphics Fundamentals 3 14

Set of basic shapes ---- usually restricted to rectangles, ellipses and circles, straight lines, polygons and smooth curves called Bézier curves. Vector Graphics Fundamentals 3 16

Vector Graphics Fundamentals 3 17

Vector Objects Shapes can be drawn with or without outlines, which can be colored and may be of any width, and they can be filled with color, patterns or gradients. Because the program works with a description of the shape, not a map of its pixels, it is easy to move, scale and skew shapes when you creating and editing vector graphics Shape Rotate Skew Move Vector Graphics Fundamentals 3 18

The way in which the drawing program allows you to work with shapes is a reflection of the way in which those shapes are represented in graphics files. For example: in SVG, which might be generated by the drawing program, a line element, with the end points’ coordinates as its attributes, such as Vector Graphics Fundamentals 3 19

Ellipse element’s attributes record the coordinates of the two radii Vector Graphics Fundamentals 3 20

Curves Vector Graphics Fundamentals 3 21

P1,P2, P3, and P4 called control points P1and P4 known as end points P2and P3 known as direction points Vector Graphics Fundamentals 3 22

The curve lies within the polygon constructed by joining the control points with straight lines. This polygon is called the curve’s convex hull The degree of the Bezier curve is one less than the number of control points.

P1 P2 P3 P4 P1 P2 P4 P3 P1 P3 P4 P2 Curves produced from the same set of points but in different order Vector Graphics Fundamentals 3 24

Vector Graphics Fundamentals 3 25

Vector Graphics Fundamentals 3 26

Vector Graphics Fundamentals 3 27

Joining two Bézier curves Segment 1 Segment 2 Smoother connection Vector Graphics Fundamentals 3 28

Vector Graphics Fundamentals 3 29

A collections of curves and lines is called a path. A path that join on itself, it is said to be closed Do not has an end point Open path has an end point Vector Graphics Fundamentals 3 30

Vector Graphics Fundamentals 3 31

Anchor point Vector Graphics Fundamentals 3 32

You have to be able to see your path while you are drawing it. Once it is complete, each path segment is stroked or filled straight away. Vector Graphics Fundamentals 3 33

Stroke characteristics:  Drawing programs support dashed strokes as well as solid ones dashed lines  Shape of stroke ends known as line caps  Joining styles  assign color to a stroke Vector Graphics Fundamentals 3 34

Vector Graphics Fundamentals 3 35

Vector Graphics Fundamentals 3 36

Vector Graphics Fundamentals 3 37

Vector Graphics Fundamentals 3 38

Pattern fills, allow you to use a repeating pattern to fill in an area, as shown below Patterns are built out of elements called tiles. A tile is just a small piece of artwork, made using the facilities provided by your drawing program Vector Graphics Fundamentals 3 39

Vector Graphics Fundamentals 3 40

The objects that make up a vector image are stored in the form of a few values that are sufficient to describe them accurately. For example a line by its end points, a rectangle by its corners, and so on. It is easy to manipulate objects by changing these stored values. For example if a line runs parallel to the x_axis from (2,2) to (10,2), in order to move it up by 5 units we have to add 5 to the y coordinates of its end points, giving (2,7) and (10,7) Vector Graphics Fundamentals 3 41

Affine transformations means to preserve straight lines and keep parallel lines parallel without altering the type of the object Affine transformations Vector Graphics Fundamentals 3 42

Affine transformations The object reflected Scaled Rotated sheared translated Vector Graphics Fundamentals 3 43

4 squares Some programs or languages allow an object or a group of objects to be defined as a symbol, which is a reuse entity Affine transformations Vector Graphics Fundamentals 3 44

Some programs or languages allow an object or a group of objects to be defined as a symbol, which is a reuse entity Instances (copies) of a symbol can be created, all of which refer to the original. If the symbol is edited, all instances of it are updated to reflect the changes. Affine transformations Vector Graphics Fundamentals 3 45

Distortion Vector Graphics Fundamentals 3 46

Example of applying Illustrator’s Pucker & Bloat filter to a simple shape Original shape After applying filters Vector Graphics Fundamentals 3 47

The thin red lines are the direction lines for the two segments to the left and right of the vertex at the top of the original star. Vector Graphics Fundamentals 3 48

Distortion after applying zig zag filter, add extra anchor points between existing one in a regular pattern Original shape Curves Jagged corners The distortions are not affine transformations. By adding anchor points they can turn corner points into smooth points, straight lines into curves and vice versa, so straightness and parallelism are not preserved. Vector Graphics Fundamentals 3 49