HTML - SVG

What is SVG?

SVG stands for Scalable Vector Graphics and it is an XML-based markup language used for creating scalable 2D graphics and graphical applications. It is mostly useful for vector-type diagrams like Pie charts, and two-dimensional graphs in an X, Y coordinate system.

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.

Remember, 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 not.

SVG became a W3C Recommendation on 14 January 2003 and we can check latest version of SVG specification at SVG Specification. If you want to learn more about SVG, you can check out our dedicated SVG tutorial.

How to use SVG in HTML?

There are two ways of embedding the SVG files in HTML −

  • Using <img> tag

  • Using <svg> tag

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" height = "100px" width = "200px" />

Using <svg> tag

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

<svg>

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

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

  • <rect>

  • <circle>

  • <ellipse>

  • <line>

  • <polyline>

  • <polygon>

  • <path>

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

Some Common Attributes of SVG Elements

The following table contains a list of attributes of SVG Elements −

S.No. Attribute & Description
1

X

The top-left x-axis coordinate.
2

Y

The top-left y-axis coordinate.
3

width

The width of figure.
4

height

The height of figure.
5

rx

The x-axis' roundness.
6

ry

The y-axis' roundness.
7

style

Indicate an inline style.

HTML − SVG Circle

Following is the SVG example which would draw a circle using <circle> tag −

Example

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Circle</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
   </svg>
</body>
</html>

HTML − SVG Rectangle

Following is the SVG example which would draw a rectangle using <rect> tag −

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      #svgelem {
         position: relative;
         left: 50%;
         -webkit-transform: translateX(-50%);
         -ms-transform: translateX(-50%);
         transform: translateX(-50%);
      }
   </style>
   <title>SVG</title>
   <meta charset = "utf-8" />
</head>
<body>
   <h2 align = "center">HTML SVG Rectangle</h2>
   <svg id = "svgelem" height = "200" xmlns = "http://www.w3.org/2000/svg">
      <rect id = "redrect" width = "300" height = "100" fill = "red" />
   </svg>
</body>
</html>

HTML − SVG Line

Following is the SVG example which would draw a line using <line> tag. 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.

Example

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Line</h2>		
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
   </svg>
</body>
</html>

HTML − SVG Ellipse

Following is the SVG example which would draw an ellipse using <ellipse> tag −

Example

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Ellipse</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
   </svg>
</body>
</html>

HTML − SVG Polygon

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

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Polygon</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <polygon points="20,10 300,20, 170,50" fill="red" />
   </svg>
</body>
</html>

HTML − SVG Polyline

Following is the SVG example which would draw a polyline using <polyline> tag −

Example

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Polyline</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
   </svg>
</body>
</html>

HTML − SVG Gradients

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.

Example

<!DOCTYPE html>
<html>
<head>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>
   <h2>HTML SVG Gradient Ellipse</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <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-opacity:0"/>
            <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
         </radialGradient>
      </defs>
      <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
   </svg>
</body>
</html>

HTML − SVG Star

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

Example

<!DOCTYPE html>
<html>
<head>
   <style>
      #svgelem{
         position: relative;
         left: 50%;
         -webkit-transform: translateX(-40%);
         -ms-transform: translateX(-40%);
         transform: translateX(-40%);
      }
   </style>
   <title>SVG</title>
   <meta charset="utf-8" />
</head>
<body>	
   <h2>HTML SVG Star</h2>
   <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
      <polygon points="100,10 40,180 190,60 10,60 160,180" fill="red"/>
   </svg>
 </body>
</html>
Advertisements