Common vector graphic attributes
The main attributes used to create an object as part of a vector graphic are:
- co-ordinates
- fill colour
- line colour
Co-ordinates
Co-ordinates are used to identify the position of an object on screen. Most shapes will make use of at least two coordinates, X and Y. In the most common vector graphic file format (SVG), the default starting position is in the top left-hand corner of the drawing area.
The X value determines how far to the right the object should be placed and the Y value determines how far from the top the object should be placed.
Coordinates used for common objects
| Rectangle | x and y define the position where the rectangle will begin to be drawn |
| Line | x1 and y1 define the position of the start of the line, x2 and y2 define the position of the end of the line |
| Ellipse | cx and cy for the centre of the ellipse, rx and ry for the width of the x radius and height of the y radius |
| Polygon | As polygons can be any one of a number of shapes, it is necessary to define an x and a y coordinate for every point/angle in the object. |
| The polygon points attribute is used for this purpose. | |
| polygon points = “x1,y1 x2,y2, x3,y3” | |
| The above example would create a triangle by connecting lines between the three sets of co-ordinates. For a shape with more sides, such as a hexagon, it would be necessary to define polygon points for each angle in the object. |
| Rectangle |
| x and y define the position where the rectangle will begin to be drawn |
| Line |
| x1 and y1 define the position of the start of the line, x2 and y2 define the position of the end of the line |
| Ellipse |
| cx and cy for the centre of the ellipse, rx and ry for the width of the x radius and height of the y radius |
| Polygon |
| As polygons can be any one of a number of shapes, it is necessary to define an x and a y coordinate for every point/angle in the object. |
| The polygon points attribute is used for this purpose. |
| polygon points = “x1,y1 x2,y2, x3,y3” |
| The above example would create a triangle by connecting lines between the three sets of co-ordinates. For a shape with more sides, such as a hexagon, it would be necessary to define polygon points for each angle in the object. |
Colours
There are many ways to identify a colour when creating vector graphics. Three of the most common ways are:
- by naming the colour e.g. red, provided that the name you use is supported by the vector file format
- by using an RGB combination to define the amount of red, green and blue that is used to create a colour e.g. (255, 0, 0) would use only red and no green or blue to create the colour red
- By using HEX codes e.g. #FF0000 for red, which make use of the hexadecimal number system to create values for red, green and blue in a similar way to RGB combinations.
Common colours and their name, RGB and HEX codes
There are many variations of the colours listed below. These are examples of codes that will produce the general colour stated. Personal taste may dictate that you prefer a different shade that will have its own set of codes.
| Colour name | RGB | HEX |
| White | RGB(255, 255, 255) | #FFFFFF |
| Black | RGB(0, 0, 0) | #000000 |
| Red | RGB(255, 0, 0) | #FF0000 |
| Orange | RGB(255, 165, 0) | #FFA500 |
| Yellow | RGB(255, 255, 0) | FFFF00 |
| Green | RGB(0, 255, 0) | #00FF00 |
| Blue | RGB(0, 0, 255) | #0000FF |
| Indigo | RGB(75, 0, 130) | #4B0082 |
| Violet | RGB(238, 130, 238) | #EE82EE |
| Colour name | White |
|---|---|
| RGB | RGB(255, 255, 255) |
| HEX | #FFFFFF |
| Colour name | Black |
|---|---|
| RGB | RGB(0, 0, 0) |
| HEX | #000000 |
| Colour name | Red |
|---|---|
| RGB | RGB(255, 0, 0) |
| HEX | #FF0000 |
| Colour name | Orange |
|---|---|
| RGB | RGB(255, 165, 0) |
| HEX | #FFA500 |
| Colour name | Yellow |
|---|---|
| RGB | RGB(255, 255, 0) |
| HEX | FFFF00 |
| Colour name | Green |
|---|---|
| RGB | RGB(0, 255, 0) |
| HEX | #00FF00 |
| Colour name | Blue |
|---|---|
| RGB | RGB(0, 0, 255) |
| HEX | #0000FF |
| Colour name | Indigo |
|---|---|
| RGB | RGB(75, 0, 130) |
| HEX | #4B0082 |
| Colour name | Violet |
|---|---|
| RGB | RGB(238, 130, 238) |
| HEX | #EE82EE |
Fill colour
The fill colour attribute is used to define the colour inside an object.
Line colour
Often referred to as stroke colour, the line colour attribute is used to define the colour of the outer line of an object.
