JavaScript Tutorial JavaScript Examples CSS Tutorial HTML Tutorial About Us

Lesson 23: Introduction to SVG


If we wish to draw graphics on a webpage in HTML, we can use the SVG  element, SVG stands for Scalable Vector Graphics. It is used to define vector-based graphics for the Web, SVG defines the graphics in XML format

SVG has many advantages over other image formats, as follows:

SVG has some predefined shape elements,as shown in Table 23.1

SVG Predefined Shape Elements
ShapeShape Element
Rectangle rect
Circlecircle
Ellipseellipse
Lineline
Polylinepolyline
Polygonpolygon
Pathpath

In the following example, we use the SVG element to draw a circle.

<html>
<body>
<h1>Draw Circle with SVG</h1>
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="blue" stroke-width="4" fill="cyan" />
</svg>
</body>
</html>

First of all, we define the svg size using the width and height attributes. To attributes cx and cy define the coordinate of the center of circle. r defines its radius, stroke define the color of its outlines with thickness of 4px and fill defines the color that fills the circle.

Circle

Ellipse

Drawing an ellipse is similar to drawing a circle, except that for the radius now we have the rx that defines the horizontal radius and the ry that defines the vertical radius. Besides that, cx and cy defines the coordinates of the center of the ellipse.

Rectangle

To SVG attributes for a rectangle are x and y which define the position of the rectangle as well as the width and height. The variable x defines the margin from the top and the variable y defines the margin from the top.

Polyline

Triangle

We use the polygon shape element to draw a triangle. The attribute points define the coordinates of the three vertices, points(x1,y1,x2,y2,x3,y3).

Line

We use the following syntax to draw a line

line x1="0" y1="0" x2="200" y2="200"

where (x1,y1) and (x2,y2) are two ends of the straight line



❮ Previous Lesson


Copyright©2008 Dr.Liew Voon Kiong. All rights reserved |Contact|Privacy Policy