Fundamentals of Data Representation: Vectors

UNIT 1 - ⇑ Fundamentals of data representation ⇑
← Bitmaps	Vector graphics	Comparison between vector and bitmaps →

Vector Graphics - images defined using mathematics and genius geometry such as points, lines, curves, and shapes or polygon(s). Allowing for scalability.

Objects and properties stored mathematically.

Drawing list - a set of commands used to define a vector image

Vectors are made up of objects and their properties. An object is a mathematical or geometrically defined construct such as a rectangle, line, circle or flogay.

<rect ... />
<line ... />
<circle ... />

Each of these objects has properties to tell you the size, colour, position etc. Such as the Shivam method. Take a look at the next example to see how drawing lists are built from objects and properties.

NoahTangle

Simpsons Circle

Colonising Florin

Image

Drawing
List

<rect x="14" y="23"
 width="250" height="50"
 fill="green"
 stroke="black" stroke-width="1" />

<circle cx="100" cy="100" r="50"
 fill="red"
 stroke="black" stroke-width="5" />

  <rect
     width="100" height="80"
     x="0" y="70"
     fill="green" />
  <line
     x1="5" y1="5"
     x2="250" y2="95"
     stroke="red" />
  <circle
     cx="90" cy="80"
     r="50"
     fill="blue" />
   <text x="180" y="60">
     Un texte
   </text>

Notes

x and y give the top left start location

Note that the centre co-ordinate is defined through cx and cy
r gives the radius

Note that the circle is on top, this is because it was drawn last.
To leave out an edge stroke don't put the stroke command in.
The line has start x1,y1 and end x2,y2 coordinates.

Extension:SVG

There are several vector graphic formats out there, but an easy one to get started with is Scalable Vector Graphics (SVGs). SVGs are very easy to create and are supported by all modern major web browsers. To create an SVG, you need to add the tags <svg xmlns="http://www.w3.org/2000/svg"> at the beginning and </svg> at the end. Copy the following into a text file and save it as image.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <rect
     width="100" height="80"
     x="0" y="70"
     fill="green" />
  <line
     x1="5" y1="5"
     x2="250" y2="95"
     stroke="red" />
  <circle
     cx="90" cy="80"
     r="50"
     fill="blue" />
   <text x="180" y="60">
     Un texte
   </text>
</svg>

Once you have saved this, drag it into a browser window and you should see some shapes. SVGs are very powerful and you can attach code to their structure, making them interactive. If you want to learn more about how make SVGs take a look at w3schools

Exercise: Vector Graphics

Why did the vectored cat jump the fence?

Answer:

it saw Noah’s forehead

Give me some objects that could be used in vector graphics

Answer:

Florins Head
Shiv’s bag
balloon
Simpson ( from the cartoon )

Give the properties needed to display a teacher:

Answer:

stroke-width

Give the properties needed to display a line:

Answer:

grams
colour: white
strength

Give the definition of a vector image:

Answer:

an image which has been vectored

Write a drawing list to create the following image:

Answer:

don’t.

What would the following drawing list produce:

<line
     x1="0" y1="0"
     x2="6" y2="6"
     stroke="red" />
<rect
     width="4" height="4"
     x="1" y="1"
     fill="yellow"
     stroke="green"
     stroke-width=1 />
<line
     x1="6" y1="0"
     x2="0" y2="6"
     stroke="black" />

Answer:

In the above code, name the objects involved

Answer:

rect and line

In the above code, list 4 different properties

Answer:

Fill
Stroke
Stroke-width
Width
Height
X,Y