# A-level Computing/AQA/Paper 1/Fundamentals of data representation/Vector graphics

Objects and properties stored mathematically.
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.
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
* What is a drawing list
* Answer:
* a single command used to define a vectored image
* Give some objects that can be used in vector graphics:
* Answer:
* Line
* Oval
* 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:
* * weight
* length
* width
* fill
* Give the definition of a vector image:
* Answer:
* scalable images made with basic vector graphic geometry such as lines, ovals or circles. This is infinitely scalable.
* Write a drawing list to create the following image:
* Answer:
* <rect
* width="1" height="1"
* x="2" y="1"
* fill="white" <!--optional you can leave this out-->
* stroke="black"
* stroke-width=1 /> <!--another small value will do-->
* <rect
* width="1" height="1"
* x="11" y="0"
* fill="white" <!--optional you can leave this out-->
* stroke="black"
* stroke-width=1 />
* <rect
* width="10" height="4"
* x="2" y="6"
* fill="black"
* stroke="red"
* stroke-width=5 /> <!--another small value will do-->
* <circle
* cx="7" cy="5"
* r="2"
* fill="blue" />
* 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