Scalable Vector Graphics (SVG) in HTML5

 

Creation of an SVG image is a very different process. To create any other raster images like JPEG, PNG or GIF we use image editing software like Photoshop and so on. But SVG images are XML based file so it can be created in any other text editor. There is a tool also available (inkspace). By using this tool you can draw and create SVG images very conveniently.

 

Basic Shapes Created by SVG

You can use SVG XML tag to create shapes.

 

Element	Description
line	Creates Simple line
circle	Creates Circle
rect	Creates Rectangle
ellipse	Creates Ellipse
polygon	Creates Polygon
polyline	Creates Multiline Shape
path	Creates Arbitrary Path
text	Allows to Creates Text

 

 

The line element draws the line. You can create a line definition by defining the starting and ending X and Y co-ordinates. Code to draw a line in SVG is given below:

The root element SVG has two attributes, height and width, that decides the area for an SVG image. In the preceding example x1 and y1 attributes are the starting co-ordinates of the line and x2 and y2 attributes are ending attributes of the line. You can also change the direction of the line by just changing the co-ordinates of the line.

 

Output: The output of the code above is as given below:

 

This circle element is used to define the circle in SVG. To define the circle you need to define a X, Y attribute that will be the center of the circle and you need to define the radius of the circle. The code to draw a circle in SVG is given below:

In the preceding example cx and cy attributes define the center of the circle that will be relative to the canvas defined by SVG width and height. The output of the code above is given below.

Output 

 

 The rect Element

The rect element draws a line in SVG. Creating the rectangle is as simple as defining a width and height. The code to draw a rectangle is given below:

Output

 

The ellipse element is used to draw an ellipse in SVG. Drawing of an ellipse is similar to drawing a circle but to define an ellipse you need to define 2 radii. The code to draw an ellipse in SVG is given below:

In the code above cx and cy are the attributes of the ellipse that defines the center of the ellipse and rx and r are the attributes; rx defines the radius for the x axis and ry defines the radius for the y axis. The output of the code above is given below:

 

 

Polygons are 2-dimensional shapes. They are made of straight lines and the shape is "closed" (all the lines connect).

To draw a triangle we need 3 co-ordinates or we can say 3 points in the preceding example you can see there are 3 points.

1. 150,10 
2. 10, 200
3. 300,200

To create an 8-sided polygon you need to define 8 points for the polygon element. The code to draw a simple 8-sided polygon is given below:

Output

 

The following code creates a star using polygon:

Output

 

A polyline is a drawing consisting of multiple line definitions. The code and example of a polyline is given below:

You can create a polyline using the point attribute and by defining x and y co-ordinates separated by commas. In the code above the first point is 0,50 where 0 is the x value and 50 is the y value. However, to display anything in the SVG a single set of points are not sufficient because that only tells the SVG renderer where to start. To display something at a minimum you need 2 set of points, which will decide the start point and end point.

Output: the output of the code above is given below:

 

Create an irregular line by using polyline element:

Output

 

To draw all the elements and all other complex elements you can use the path element. Using the path element you can create an arbitrary drawing. The path element supports some commands that are listed in the following table:

 

Command	Description
M	Move to
L	Line to
H	Horizontal line to
V	Vertical line to
C	Curve to
S	Smooth curve to
Q	Quadratic Bezier curve to
T	Smooth quadratic Bezier curve to
A	Elliptical arc to
Z	Close path to

 

Note: You can use the commands in either uppercase or in lowercase. When the command is used in uppercase then the absolute positioning is applied and when the command is used in lowercase then relative positioning is applied.

 

The following creates a triangle using the path element: 

In the preceding example "d" is the attribute. By using this you can define all the commands. The drawing starts from x co-ordinate 150 and y co-ordinate 0; here we have used the M command because we want to move from here to some other direction. The next point or co-ordinate is 75,200 and used here the L command means we want to create a line from the moving point. So we have used (L75 200). Now we have created another line (L255 200) then we used the z command that closes the path. So it will create a line from the current position to the starting position.

 

 

The following creates a custom drawing using the path element:

Output

 

The text element draws text in the SVG. An example is given below:

Output