# title=Fundamentals of Data Representation: Vectors

 ← Bitmaps Vector graphics Comparison between vector and bitmaps →

Vector Graphics - images defined using mathematics and 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

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

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

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

Rectangle Circle Combination
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
 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 `` at the end. Copy the following into a text file and save it as `image.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 What is a drawing list Answer: a set of commands used to define a vector image Give some objects that can be used in vector graphics: Answer: Line Text Rectangle Circle Give the properties needed to display a rectangle: Answer: x,y width, height fill stroke (colour), stroke-width Give the properties needed to display a line: Answer: x1,y1 - start coordinates x2,y2 - end coordinates width fill stroke (colour) Give the definition of a vector image: Answer: images defined using mathematics and geometry such as points, lines, curves, and shapes or polygon(s). Allowing for scalability Write a drawing list to create the following image: Answer: ``` stroke="black" stroke-width=1 /> stroke="black" stroke-width=1 /> ``` What would the following drawing list produce: ``` ``` 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