02 Vector Graphics and Text

Vector Graphics

Digital Image composed by independent

geometric objects: Lines, Polygons, Arcs…
With different attributes such as Shape, Position
or Color

2 Vector Graphics and Text

 Features

Scale independents
Easy to edit: move, stretch, twist
They must be rasterized for
monitor-based display
Some devices (as plotters) work
directly with vector graphics

3 Vector Graphics and Text

 Another example

4 Vector Graphics and Text

 Basic primitives

Lines
Polygons
Circles and ellipses
Bezier curves
Bezigons
Text
Others (Splines, NURBS, …)

5 Vector Graphics and Text

 Lines

2D: Ordered set of points on a plane

Straight line, if all the points are in the same
direction
Curved line, with rounded shapes and one
or several centers of curvature
Polygonal line, composed by no-aligned
consecutive straight lines (open or closed)
Mixed line, with curved and straight lines
3D: Points are defined in 3D Space
6 Vector Graphics and Text
 Polygons

Geometric figure composed by not aligned and

consecutive segments (sides)
Types:
Simple - Complex
Convex – Concave
Regular – Irregular
Equilateral
Equiangular

7 Vector Graphics and Text

 Circles and Ellipses
Circumference

Circles: defined by one

Radius
center and one radius
Ellipses: defined by one
Arc
Center

center and two radius

Diameter

Ellipse

x y r
2 2 2

x  r  cos t
Minor Radius

Major Radius

Center

y  r * sin t
8 Vector Graphics and Text
 Bezier Curve

Developed in the sixties for aircraft and

automotive design
Basic tool in Vector Graphics Software

P0, P3: Nodes (anchors)

P1, P2: Control points
(handlers)

9 Vector Graphics and Text

 Bezigons

Bezigon: Polygon whose sides are Bezier curves

instead of straight lines

Used in PostScript
and PDF typographies

Bezigons are normally used when converting a

Raster Image to Vector Graphics (Tracing)

10 Vector Graphics and Text

 Text

A font family (or typeface) is a group of related

fonts usually designed by the same typographer.
A font is a group of glyphs with a specific weight,
style, condensation, width, slant, italicization,
ornamentation, and designer.
A digital typeface (not font) is a font with a
particular size.
Arial (typeface)-> bold (font) -> 12 pt (digital typeface)

11 Vector Graphics and Text

 Digital text

Computer Fonts are application-independent

files and they are installed in a specific folder
Bitmap fonts: Bitmaps representing the image of
each character
Vector Outline fonts: Bezier curves, drawing
instructions and mathematical formulae to describe
each character (Scalable Fonts)
Stroke based vector fonts: Set of specified lines with
additional information to define the profile of each
character
12 Vector Graphics and Text
 Digital text

Computer Fonts are application-independent

files and they are installed in a specific folder
Bitmap fonts: Bitmaps representing the image of
each character
Vector Outline fonts: Bezier curves, drawing
instructions and mathematical formulae to describe
each character (Scalable Fonts)
Stroke based vector fonts: Set of specified lines with
additional information to define the profile of each
character
13 Vector Graphics and Text
 Digital text

14 Vector Graphics and Text

 Bitmap Fonts

A Bitmap Font stores characters as images

For each variant, it includes a set of new images
with all the characters
Images can be monochrome or grayscale
Extremely fast and simple to render

They are obsolete

15 Vector Graphics and Text

 Outline Fonts

Composed by curves and lines

Integration between Graphic
Interfaces and Printers
(WYSIWYG)
First standard was Adobe
PostScript
Perfect for transforming (more
processing time needed)
Rasterization problem
16 Vector Graphics and Text
 Outline Fonts

17 Vector Graphics and Text

 Stroke fonts

18 Vector Graphics and Text

 Stroke fonts

In addition to lines, they

also include information
of weight, width or rules.
Reduction in the number
of vertices needed to
define a character
Useful to represent
Ideograms (as Chinese
characters)
19 Vector Graphics and Text
 Font Formats

Postscript (Adobe)
Considered an standard in recent years
Outline fonts described with Bezier curves
TrueType (Apple, licensed to Microsoft)
Most used in Windows and Mac OS
OpenType (Adobe and Microsoft)
Combination of Postscript and TrueType technologies
OpenType 1.4: Adopted by ISO as a standard in 2007
with the name Open Font Format
20 Vector Graphics and Text
 Text features

Size, in dots (1 dot = 1⁄72

inches = 25.4⁄72 mm = 0.35
mm) or pixels
Serif or Sans serif
Fixed or variable width
Measures:

21 Vector Graphics and Text

 Font Examples
Serif Slab serif Sans serif Fixed width

Trace Handwrite Gothic Decorative

22 Vector Graphics and Text

 Font Examples
http://www.webdesignerdepot.com/2011/08/the-most-popular-fonts-used-by-designers

23 Vector Graphics and Text

 Font Examples

24 Vector Graphics and Text

 Font Examples

25 Vector Graphics and Text

 PDF Format

PDF (Portable Document Format) from Adobe

Includes images, vector graphics and text, plus
video, audio, hypertext, links, bookmarks and
thumbnails for pages
Multiplatform and open
Includes Encryption and Digital Signature
Can compress data for reducing file size
ISO Standard since 2005
27 Vector Graphics and Text
 SWF Format

SWF (Small Web Format) from Adobe

File format for multimedia and vector graphics
Animation using ActionScript
The most extended format for 2D animated
Computer Graphics and Videogames in the web,
although HTML5 is gaining market share
Visualization with Adobe Flash Player
It is possible to create binaries (Projectors)
28 Vector Graphics and Text
 SVG Format

SVG (Scalable Vector Graphics)

XML specification for 2D
Interactive Graphics
Includes images, vector
graphics and text
Standard from W3C (World
Wide Web Consortium)

29 Vector Graphics and Text