Show understanding of how data for a vector graphic are encoded

1.2 Multimedia – Vector Graphic Encoding

What is a Vector Graphic?

🎨 A vector graphic is like a recipe for drawing shapes. Instead of storing every single pixel (like a photo), it stores mathematical instructions that tell the computer how to draw lines, curves, and colors. Think of it as a blueprint that can be scaled up or down without losing quality.

Key Components of a Vector Graphic

• Points – The basic coordinates (x, y) that define positions.
• Lines – Straight connections between two points.
• Curves – Smooth paths defined by control points (e.g., Bézier curves).
• Shapes – Closed paths that can be filled with color.
• Attributes – Stroke colour, width, fill colour, opacity, etc.

Encoding a Simple Shape: The Triangle

Let’s encode a simple equilateral triangle using SVG path syntax:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 80 L 50 10 L 90 80 Z" fill="none" stroke="black" stroke-width="2"/>
</svg>

Explanation of the path commands:

• M 10 80 – Move to point (10,80).
• L 50 10 – Draw a line to (50,10).
• L 90 80 – Draw a line to (90,80).
• Z – Close the path (connect back to the starting point).

Encoding a Curve: The Circle

Circles are often defined using Bézier curves. Here’s a simple circle path:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <path d="M50 10
           C 80 10, 90 30, 90 50
           C 90 70, 80 90, 50 90
           C 20 90, 10 70, 10 50
           C 10 30, 20 10, 50 10" 
           fill="none" stroke="blue" stroke-width="2"/>
</svg>

Each C command defines a cubic Bézier curve with two control points and an endpoint.

Encoding Data in a Table