HTML - SVG

Previous
Next

HTML SVG (Scalable Vector Graphics) is used to define vector graphics in XML that can be embedded into HTML pages. SVG is different from normal images as it does not lose quality even after zooming it.

XML is an abbreviation that stands for Extensible Markup Language and it is a data description language. It does not have any predefined tags hence; the users are required to define their own tags depending on the need.

What is SVG?

  • SVG stands for Scalable Vector Graphics.
  • SVG helps us to draw any types of images using XML coding.
  • Zooming a XML vector does not lose it's quality
  • It is mostly useful for vector-type diagrams like Pie charts, and two-dimensional graphs in an X, Y coordinate system.
  • SVG became a W3C Recommendation on 14 January 2003.

SVG (Scalable Vector Graphics)

The PNG, GIF, and JPG files are bitmap graphics and SVG files are vector graphics. The main difference between these two is that bitmap graphics are made up of a grid of tiny pixels but, vector graphics are defined by coding hence vector graphics does not lose quality after zooming.

Ways to use SVG in HTML?

There are two ways of embedding the SVG files in HTML

Using <img> tag

We can directly embed the SVG files inside our web page using the src attribute of <img> tag as shown below. We can pass either the path or an online link to the svg image.

<img src = "yourfilename.svg"/>

Using <svg> tag

HTML allows embedding SVG directly using <svg>...</svg> tag which has the following syntax 

<svg>
   <!-- code to create graphics -->
</svg>

Tags inside SVG Element

There are some predefined SVG elements that are used to draw various shapes like circles, rectangles, lines and so on. They are as follows

Tags Description
<rect> Used to define a rectangle in vector graphics for given width and height as attribute.
<circle> Used to define circle for given coordinates of top-left corner and radius as attribute.
<ellipse> Used to define ellipse for given coordinates of top-left corner, length of major axis and length of minor axis as attribute.
<line> Used to draw line for for given two coordinates as attribute
<polyline> Used to define a polyline for given coordinates of series of connected points
<polygon> Used to define a polygon for given coordinates that joins in straight line.

The <svg> tag is the top level (root) element of the above mentioned tags. They are defined inside the svg element.

Attributes of SVG Elements

The following table contains a list of attributes of SVG Elements

Attribute Description
X

The top-left x-axis coordinate.
Y

The top-left y-axis coordinate.
width

The width of rectangle figure.
height

The height of rectangle figure.
rx

The x-axis' roundness of ellipse.
ry

The y-axis' roundness of ellipse.
style

Indicate an inline style.

Examples of HTML SVG Element

Following are some examples that shows how to draw different graphical elements using SVG tag.

Draw a Circle using HTML SVG Tag

Following is the SVG example which would draw a circle using <circle> tag inside SVG element. Here cx is x coordinate of top-left corner of circle, cy is y coordinate of top-right corner of circle 

<!DOCTYPE html>
<html>

<head>
   <title>SVG-Circle</title>
</head>

<body>
   <h2>HTML SVG Circle</h2>
   <svg height="500" >
      <circle cx="50" 
              cy="50" 
              r="50" 
              fill="red" />
   </svg>
</body>

</html>

Draw a rectangle using HTML SVG Tag

Following is the SVG example which would draw a rectangle using <rect> tag. We use height and width attributes to make a rectangle

<!DOCTYPE html>
<html>

<head>
   <title>SVG Rectangle</title>
</head>

<body>
   <h2>HTML SVG Rectangle</h2>
   <svg height = "200">
      <rect width = "300" 
            height = "100" 
            fill = "red" />
   </svg>

</body>
</html>

Draw a line using HTML SVG Tag

Following is the SVG example which would draw a line using <line> tag for provided coordinates of two points(x1,y1, x2,y2). We can also use the style attribute which allows us to set additional style information like stroke and fill colors, width of the stroke, etc.

<!DOCTYPE html>
<html>

<head>
   <title>SVG Line</title>
</head>

<body>
   <h2>HTML SVG Line</h2>		
   <svg  height="200">
      <line x1="0" y1="0" 
            x2="200" y2="100" 
            style="stroke:red;stroke-width:2"/>
   </svg>

</body>
</html>

Draw a Ellipse using HTML SVG Tag

Following is the SVG example which would draw an ellipse using <ellipse> tag. Here cx and cy are coordinates of top-left corner of ellipse, rx is radius along x axis and ry is radius along y axis. 

<!DOCTYPE html>
<html>

<head>
   <title>SVG Ellipse</title>
</head>

<body>
   <h2>HTML SVG Ellipse</h2>
   <svg height="200">
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               fill="red" />
   </svg>
   
</body>
</html>

Draw a Polygon using HTML SVG Tag

Following is the SVG example which would draw a polygon using <polygon> tag. The points attribute defines the vertices of the polygon. Each pair of coordinates (x, y) specifies a vertex, and the polygon is drawn by connecting these vertices with straight lines.

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Polygon</h2>
   <svg height="200">
      <polygon points="20,10, 300,20, 170,50, 130,70" 
               fill="red" />
   </svg>

</body>

</html>

Draw a Polyline using HTML SVG Tag

Following is the SVG example which would draw a polyline using <polyline> tag. We given coordinates of connected points in 'point' attribute of polyline tag.

<!DOCTYPE html>
<html>

<head>
   <title>SVG Polyline</title>
</head>

<body>
   <h2>HTML SVG Polyline</h2>
   <svg height="200">
      <polyline points="0,0 0,30 30,30 30,60 60,60" 
                fill="red" />
   </svg>
</body>

</html>

Filling Color Gradient for Shapes

Following is the SVG example which would draw an ellipse using <ellipse> tag and would use <radialGradient> tag to define an SVG radial gradient.

Similarly, you can use <linearGradient> tag to create SVG linear gradient.

<!DOCTYPE html>
<html>

<head>
   <title>SVG</title>
</head>

<body>
   <h2>HTML SVG Gradient Ellipse</h2>
   <svg height="200">
      <defs>
         <radialGradient id="gradient" 
                         cx="50%" cy="50%" 
                         r="50%" 
                         fx="50%" fy="50%">
            <stop offset="0%" 
                  style="stop-color:rgb(200,200,200);"/>
            <stop offset="100%" 
                  style="stop-color:rgb(0,0,255);"/>
         </radialGradient>
      </defs>
      <ellipse cx="100" cy="50" 
               rx="100" ry="50" 
               style="fill:url(#gradient)" />
   </svg>
</body>

</html>

Draw a star using HTML SVG Tag

Following is the SVG example which would draw a star using <polygon> tag.

<!DOCTYPE html>
<html>

<head>
   <title>SVG star</title>
</head>

<body>	
   <h2>HTML SVG Star</h2>
   <svg height="200">
      <polygon points="100,5 40,180 190,60 10,60 160,180" 
               fill="red"/>
   </svg>

</body>
</html>
Print Page
Previous
Next
Advertisements