Computer Science – 1.2 Multimedia | e-Consult

A vector graphic is encoded as a set of mathematical instructions that describe the shapes within the image. Unlike raster graphics which store pixel data, vector graphics store geometric primitives like lines, curves, and polygons. SVG (Scalable Vector Graphics) is a common file format for vector graphics. The encoding involves a series of XML tags that define these primitives and their properties.

Key Data Structures and Encoding Elements:

• Root Element: This is the root element of the SVG document, containing all other elements. It defines the viewport and the coordinate system.
• Element: This is the most versatile element for defining shapes. It uses a series of commands to draw lines, curves (e.g., Bezier curves), and other complex paths. Each command is represented by a letter followed by numerical parameters. For example:

  • M (Move To): Moves the current point to a specified coordinate.
  • L (Line To): Draws a straight line from the current point to a specified coordinate.
  • C (Cubic Bezier Curve): Draws a cubic Bezier curve to a specified coordinate, using two control points.
  • Q (Quadratic Bezier Curve): Draws a quadratic Bezier curve to a specified coordinate, using one control point.
  • Z (Close Path): Closes the current path by drawing a straight line from the current point back to the starting point.

• Element: Defines a rectangle with attributes like x, y, width, and height.
• Element: Defines a circle with attributes like cx, cy, and r (radius).
• Element: Defines an ellipse with attributes like cx, cy, rx, and ry (radii).
• Element: Defines text with attributes like x, y, font-family, font-size, and fill (colour).
• Element: A grouping element that allows you to apply transformations (e.g., rotation, scaling, translation) to a group of elements. This is crucial for manipulating the entire graphic as a unit.
• Attributes: Attributes like fill (colour of the shape), stroke (colour of the outline), stroke-width (thickness of the outline), and transform (for applying transformations) are used to define the appearance of the shapes.

Colour Representation: Colours are typically represented using:

• Hexadecimal Colour Codes: e.g., #FF0000 (red).
• RGB Values: e.g., rgb(255, 0, 0) (red).
• CSS Colour Names: e.g., red, blue, green.

Transformations: Transformations are applied using the transform attribute. These transformations can be combined using the transform attribute which accepts a string of transformation commands. Common transformations include:

• translate(x, y): Moves the graphic by x and y pixels.
• rotate(angle): Rotates the graphic by the specified angle (in degrees).
• scale(x, y): Scales the graphic by x and y factors.