矢量绘图的一些基本概念

【转载于】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 illustrations.

There are many 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 across.

See also our main Glossary for other digital media terms and our Introduction to the Vector Image Format .

• Anchor point
• Bézier curve
• Cap
• Closed path - see Path
• Control handle
• Control point - see Control handle
• Curve - see Bézier curve
• 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 or end 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ézier curve

(aka curve )
A curved segment of a path is known as a Bézier curve (after French mathematician Pierre Bézier). Bézier curves are defined by mathematical equations - essentially, the coordinates of a curve can be calculated and drawn by knowing the position of two end points and two control points .

 

Cap

The cap refers to the end of an open path , and the cap style can usually be one of three types: butt cap - the path ends abruptly at the end point; round cap - the end is rounded; or projecting cap (aka square cap) - the path projects beyond the end point.

Butt cap (left); Round cap (centre); Projecting or square cap (right)

Control handle

(aka control point or handle )
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 blocks of colour , gradients or patterns .

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

Join

Two or more line segments meet with a join, and the join style can usually be one of three types: miter join - the join has a sharp point; round join - the join has rounded point; or bevel join -  the join has a flattened point.

Miter join (left); Round join (centre); 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 or closed 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 many connecting points. Paths can be open or closed. An open path is one with unconnected end points, while a 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 drawing ellipses (circles and ovals), squares and rectangles , and most have polygon tools allowing you to automatically draw other shapes such as triangles , stars or shapes 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 a ‘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 as bitmaps using vector-based drawing programs (such as Adobe Illustrator or Corel DRAW - see Vector Drawing Software for others).

The diagram above illustrates 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 coloured or patterned.

Single coloured stroke

Multiple strokes (coloured, 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 of Firefox, Opera and Safari, natively support many - 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, but 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 to 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.