8/12/2019 Introduction to Vector Graphic

1/20

Vector Graphics

Multimedia Technology

1

8/12/2019 Introduction to Vector Graphic

2/20

Graphical Information There are two principle methods of representing graphical data

Vectors

Bitmaps 2

8/12/2019 Introduction to Vector Graphic

3/20

Vector Graphics

Vector images are made up of many individual, scalable objects These objects are defined by mathematical equations rather than

pixels

Objects may consist of lines, curves, and shapes with editable

attributes such as color

Unsuitable for producing photo realistic image

3

8/12/2019 Introduction to Vector Graphic

4/20

Coordinates and Vectors

We identify any individual pixel as (column, row)

Two points define a vector e.g. (1,1) (6,9)

Pixel Coordinates Since an image is stored as a rectangular array of pixels,

a natural way of identifying any single pixel is by givingits column and row number in the rectangular array.

Pixel Coordinates can not be real values .

These must be integers. There can not be half a pixel

4

8/12/2019 Introduction to Vector Graphic

5/20

In device independent modeling, it is very much possible to have realcoordinates.

The coordinate system used by the drawing program may not be sameas the coordinate system used by the rendering device . In this case

a conversion is required. Pair of coordinates can be used only to define points, but also to

define displacements. For any pair of points P1=(x1,y1) and P2=(x2,y2), the displacement

from P1 to P2 is (x2-x1, y2-y1) or P2-P1. When a pair of values is used to specify a displacement in this way, we

call it a two-dimensional vector.

5

V P

8/12/2019 Introduction to Vector Graphic

6/20

Vector Primitives Straight Lines:

Drawn between two X-Y positionsColor and dotted line patternOptional arrow heads

Curves:Bezier curves with moveable

control points

Squares and Rectangles:Drawn between two opposite corner

pointsOptional line and fill colors

PolygonsSeries of connected lines

Optional fill colorsOptionally open or closed

6

8/12/2019 Introduction to Vector Graphic

7/20

Circles and Ellipses:Centre position and radius

Optional line and fill colors

Text:Normally drawn inside invisible

bounding rectangle

Font, size, color.

Selectable left, centre, rightalignment

Other Shapes:Stars

3D shapesConnectors

7

8/12/2019 Introduction to Vector Graphic

8/20

Bezier Curves

Curve completely defined by four points:Start and end (2 endpoints (P1, P4))

Two direction points (2 direction points (P2, P3))

You can drag these around to get the curve you want

The curve produced by these four points is unique

8

8/12/2019 Introduction to Vector Graphic

9/20

Steps in constructing a Bezier curve

9

8/12/2019 Introduction to Vector Graphic

10/20

Some Bezier curve

10

8/12/2019 Introduction to Vector Graphic

11/20

Paths

Bezier curves can be combined to form more elaborate shapes and curves.

11

8/12/2019 Introduction to Vector Graphic

12/20

Stroke and Fill

All object line types can be specified as dotted etc, with a wide range of line

thicknesses, colours, opacity etc. You can also specify fill colour or texture

Most packages allow you to import a bitmap and use that as a fill pattern

Fill patterns are tiled this can be quite a skilled process to make it sea

12

8/12/2019 Introduction to Vector Graphic

13/20

13

8/12/2019 Introduction to Vector Graphic

14/20

Lines

14

8/12/2019 Introduction to Vector Graphic

15/20

Transformations

Any element or elements in a vector drawing can be manipulated

without affecting any others:Translated (moved)

Rotated

Scaled

Reflected

Other transformations (e.g. Shear) are possible

15

8/12/2019 Introduction to Vector Graphic

16/20

Resolution Advantages

Although converting from vector graphics to a pixel based displaycan cause aliasing problems, in general vector graphics scalabilitycan give much better results than bitmaps

16

8/12/2019 Introduction to Vector Graphic

17/20

File Formats Common file formats such as GIF and JPEG are used to store bit

mapped data

Unfortunately vector graphics formats are generally dependant on theIllustrator application used:AI (Adobe Illustrator)CDR (CorelDraw)WMF Windows MetafileVSD Microsoft VisioSWF Macromedia FlashSVG (Scalable Vector Graphics) XML based descriptions

stands for Scalable Vector Graphic. It is a language for describing twodimensional graphics in XML. It allows three types of graphic objects:vector graphic shapes, images and text.PostScript

was developed by Adobe as a page description language.VRML

stands for Virtual Reality Markup Language. It is for decrypting a scenein a virtual world.

17

8/12/2019 Introduction to Vector Graphic

18/20

VRML Sample

18

V t Bit

8/12/2019 Introduction to Vector Graphic

19/20

Vector versus Bitmap

19

8/12/2019 Introduction to Vector Graphic

20/20

Vector Objects

Common programs that produce vectorimages include Adobe Illustrator, CorelDraw, Macromedia Freehand and Fireworks.

20