Some basic concepts of Vector Plotting

[Reproduced in] http://www.jiscdigitalmedia.ac.uk/stillimages/advice/vector-graphics-illustrated-glossary/

Summary

An alphabetical list of commonly-used terms in vector graphics. Each
Term is defined and accompanied by one or more than strations.

There are applying applications capable of producing vector graphics

And most of them share the same terminology for the elements that make
Up a vector object. Some use slightly different terms-we have listed
The most common terms, together with variations you may come into ss.

See also our main glossary

For other digital media terms and our introduction to the vector image format

.

• Anchor Point

• Bégiscurve
• Cap
• Closed Path-see path
• Control handle
• Control Point-see control handle
• Curve-see bégiscurve
• End Point-see anchor point
• Fill
• Handle-see control handle
• Join
• Line Segment
• Node-see anchor point
• Outline-see stroke
• Open Path-see path
• Path
• Polygon
• Point-see anchor point
• Rasterise
• Stroke
• SVG (Scalable Vector Graphics)

Anchor Point

(Aka

Point, node

OrEnd Point

)

Anchor points (or simply 'points') are the basic components of a path

. Points appear at the start and end of a path and at every point at which the path changes direction. Points connect each line segment

And determine the nature of the line's curve. Each point can be moved
To adjust the shape of the path. points can be added or removed from
Existing paths.

Six anchor points connecting six line segments to create a closed path

Bégiscurve

(Aka

Curve

)

A curved segment

Of a path

Is known as a béier curve (after French mathematician pierre béier ).
Bésps curves are defined by mathematical equations-essential,
Coordinates of a curve can be calculated and drawn by knowing
Position of two end points

And two control points

.

 

Cap

The CAP refers toEnd

Of an Open Path

, And the CAP style can be usually one of three types:Butt cap

-The path ends abruptly at the end point;Round cap

-The end is rounded; orProjecting cap

(Aka

Square Cap)-the path projects beyond the end point.

Butt cap (left); round cap (center); projecting or Square Cap (right)

Control handle

(Aka

Control Point

OrHandle

)

Control handles appear when a path

'S anchor point

Is selected. Control handles give greater control and flexibility over how each point and Line Segment

Is placed, and allow fine-tuning of the overall shape of the path.

Moving the control handles affects the shape of the path

Fill

A fill can be applied to any area within a path

. Fills can be single blocksColor

,Gradients

OrPatterns

.

Coloured fill (left); gradient fill (center); patterned fill (right)

Join

Two or more line segments

Meet with a join, and the join style can be usually one of three types:Miter join

-The join has a sharp point;Round join

-The join has rounded point; orBevel join

-The join has a flattened point.

Miter join (left); Round join (center); bevel join (right)

Line Segment

Paths

Are made up of one or more line segments. A line segment comes between two anchor points

And is either a curve

Or a straight line.

This path is made up of six line segments (one straight and five curved)

Path

(Aka

Open Path

OrClosed Path

)

The path is the basis for all vector objects. A path is made up of one or more line segments

Connected by two or more anchor points

. Paths can be made from a combination of straight lines and curves

,
Each of which may be made up of connected poining points. paths can be
Open or closed. An open path is one with unconnected end points, while
Closed Path is one whose start and end points meet.

Open Paths (anchor points and line segments shown in blue)

Closed paths (anchor points and line segments shown in blue)

Polygon

A polygon is any closed path

Made up of three or more adjoining line segments

. Vector drawing programs usually provide tools for drawingEllipses

(Circles and ovals ),Squares

AndRectangles

, And most have polygon tools allowing you to automatically draw other shapes suchTriangles

,Stars

OrShapes with any number of sides

. Once created, basic polygons can be edited to form much more complex shapes.

Basic and complex polygons

Rasterise

Rasterising is the process of converting an image from a vector
Format to a raster (or Bitmap) format. Vector images usually need to be
Rasterised In order to print them or display them on the web. Once
Rasterised, the individual components of the vector graphic (Paths

, Fills

, Strokes

,
Text, etc) can no longer be edited. A vector image that has been
Rasterised is like any other raster image in that it is
'Resolution-dependent' matrix of pixels (I. e. It cannot be scaled
Without loss of quality ).

The conversion process is relatively
Straight forward-opening or importing a vector image in most
Raster-based image editing programs (such as Adobe Photoshop or Corel
Paint Shop Pro-see image editing software

For others) will prompt the user to select pixel dimensions and
Resolution for the file. You can also save or export vector images
Bitmaps using vector-based drawing programs (such as Adobe Illustrator
Or Corel Draw-see vector drawing software

For others ).

The
Dimo-abve lower strates the difference between a vector and raster
Image in terms of scalability. The JISC digital media logo in its
Original vector format is fully scalable-The zoomed portion of the's'
At the top remains crisp and clear.

Once you rasterise a vector image it is no longer resolution-independent-T

He portion at the bottom of the's shows the obvious visual distortion that occurs when you zoom in after rasterisation.

Stroke

(Aka

Outline

)

A stroke is a path

'S outline. A path can have multiple strokes of varying widths. strokes, like fills

, Can be colored or patterned.

Single colored stroke

Multiple strokes (colored, patterned)

SVG (Scalable Vector Graphics)

SVG

Is an open standard graphics file format based on XML

. SVG

Is text-based and, as the name suggests, fully scalable. Most other
Vector formats cannot be displayed on the web without first being rasterised

. SVG

Is an open source non-proprietary alternative to Adobe Flash, which
Allows users to create vector objects, animated images, data-driven and
Interactive content that can be delivered via the web. SVG

Can also be delivered via mobile devices (e.g. Phones and PDAs

) And in print.

Unfortunately, at the time of writing (May 2009) Web browser support for SVG

Is still unpredictable: Some browsers, including later versions
Firefox, opera and Safari, natively support between-but not all-SVG

Features. Others, such as Internet Explorer, require Adobe's free SVG

Viewer plug-in

.
Note that Adobe has stopped developing and supporting the viewer,
It is still available for download. Even if you already have the plug-in
Or are attempting to view SVG

Content in a browser which natively supports SVG, you may experience problems with older or incorrectly marked-up files.

This is a static GIF

Format Image. the SVG

Version of the clock moves in real time and shows the time according
Your computer system clock, but we have not embedded it here since
Browser support for it is not good enough. You can click through to see
If your browser displays it by following the link to 'analog clock 'on Adobe's SVG samples page

.
We found that it did not display correctly in Firefox 3 or Safari 3.2,
But it did work in Internet Explorer 6 with the Adobe SVG Viewer
Plug-in.