5
 Vector graphics are based on mathematical expressions  The same on any resolution and zoom level and are not pixelated  Consist of geometrical primitives such as:  Points  Lines and curves  Shapes or polygons  Represent images in computer graphics  Vectors are locations in a dimensional space

6
 To use SVG you need to simply open the element and to start defining your shapes using XML notation

7
 To use SVG you need to simply open the element and to start defining your shapes using XML notation

8
 To use SVG you need to simply open the element and to start defining your shapes using XML notation SVG uses a coordinate system for the sizes and positions

9
Live Demo

10
What has SVG to offer?

11
 As mentioned, vector graphics are built from graphic primitives  Points  Lines and curves  Shapes: rectangular, circle, etc…  SVG supports most of the basic shapes  More complex shapes can be created using the basic ones

16
 creates a rectangular with a top-left position, width and height  creates a circle with center and radius

17
 creates a rectangular with a top-left position, width and height  creates a circle with center and radius

18
Live Demo

19

20
 SVG can define more complex shapes using the path  Create straight line from a point to other point  Create a curve between two points  Used with the element  Used with the element  Add giving commands and points for the lines using the "d" attribute

21
 The path commands are as follows:  M x y or m x y  Moves the path marker to position (x, y)  L x y or l x y  Creates a straight line between the marker point and point (x, y)  ( H x or h x ) and ( V y or v y )  Creates a horizontal/vertical line from the marker point to the given point  Z or z  Closes the path, connects the first and last points