【轉載於】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.