Digital Multimedia

Day 2

Agenda

  • Vector Graphics
  • SVG
    • HTML
    • XML
    • SVG

Vector Graphics fundamentals

  • Coordinates and vectors
  • Rendering
    • sampling and reconstruction
    • possible staircasing
  • anti-aliasing
    • single-pixel-approximation
    • brightness proportional to the area of intersection

Vector objects

  • rectangles
  • ellipses
  • straight lines
  • polygons
  • Bézier curves
  • stroke and fill

Transformations

  • affine transformations
    • translation
    • scaling
    • rotation
    • reflection
    • shearing
  • Distortion
    • moving anchor points and control points

SVG

  • XML based language

HTML needed for now

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My first SVG</h1>

...svg...

</body>
</html>

XML basics

  • store data
  • no predefined tags
  • tree-structure

XML

<root>
  <child>
    <subchild>.....</subchild>
  </child>
</root>