Show understanding of how data for a vector graphic are encoded

Topic 1.2 Multimedia – Vector Graphic Encoding

Learning Objective

Show understanding of how data for a vector graphic are encoded.

What is a \cdot ector Graphic?

A vector graphic represents images using geometric primitives such as points, lines, curves and shapes defined by mathematical equations, rather than a fixed grid of pixels. This allows the image to be scaled without loss of quality.

Key Elements of a \cdot ector Graphic

• Points: Defined by coordinate pairs \$(x, y)\$.
• Lines: Straight segments joining two points.
• Curves: Typically Bézier curves defined by control points.
• Shapes: Closed collections of lines and curves, often filled with colour.
• Attributes: Stroke colour, fill colour, line thickness, opacity, etc.

How \cdot ector Data Are Encoded

Each primitive is stored as a sequence of commands and associated numeric parameters. The most common encoding scheme (as used in S \cdot G) includes:

1. Command identifier (e.g., M for “move to”, L for “line to”, C for “cubic Bézier”).
2. Coordinate values for the required points.
3. Optional attribute values (colour, stroke width).

Encoding Example: S \cdot G Path Data

The following path draws a simple triangle:

M 100 100 L 200 100 L 150 200 Z

Explanation:

• M 100 100 – Move to point \$(100,100)\$.
• L 200 100 – Draw a line to \$(200,100)\$.
• L 150 200 – Draw a line to \$(150,200)\$.
• Z – Close the path (draw a line back to the start).

Mathematical Representation of Bézier Curves

A cubic Bézier curve is defined by four points: the start point \$P0\$, two control points \$P1\$ and \$P2\$, and the end point \$P3\$. The parametric equation is:

\$\$

B(t) = (1-t)^3 P0 + 3(1-t)^2 t P1 + 3(1-t) t^2 P2 + t^3 P3,\quad 0 \le t \le 1

\$\$

In an encoding, the command C is followed by the coordinates of \$P1\$, \$P2\$, and \$P_3\$.

Typical Encoding Table

Colour and Style Encoding

Colours are usually stored as hexadecimal RGB values (e.g., #FF0000 for red) or as separate integer components ranging from 0–255. Stroke width is a numeric value representing the line thickness in user‑space units.

Advantages of \cdot ector Encoding

• Scalable without loss of resolution.
• Typically smaller file size for images composed of simple shapes.
• Easy to edit individual primitives.

Limitations

• Complex photographic images are inefficient to represent as vectors.
• Rendering may require more processing power for intricate paths.