SVG stands for Scalable Vector Graphics and it is a language for describing 2D-graphics and graphical applications in XML and the XML is then rendered by an SVG viewer.

SVG is mostly useful for vector type diagrams like Pie charts; Two-dimensional graphs in an X, Y coordinate system etc.

Embedding SVG in HTML5

HTML5 allows embedding SVG directly using <svg>...</svg> tag which has following simple syntax

<!DOCTYPE html>
<head>
<title>SVG</title>
<meta charset="utf-8" />
</head>
<body>
<h2>HTML5 SVG Shape</h2>
<svg xmlns="http://www.w3.org/2000/svg">
... 
</svg>
<body>
</html>

Following is the HTML5 version of an SVG example which would draw a different – different shape using <…> tag.

HTML5 - SVG Circle

Following is the HTML5 version of an SVG example which would draw a cricle using <circle> tag:

<svg id="svgelem" xmlns="http://www.w3.org/2000/svg">
    <circle id="redcircle" cx="100" cy="100" r="50" fill="LightGray" />
</svg>

Note:

id: This is a user define attribute that used for as a Names an element for use with Cascading Style Sheets.

cx, cy: Used for set padding horizontal and vertical.

r: radius of circle.

fill:  fill the color of circle.

HTML5 - SVG Rectangle

Following is the HTML5 version of an SVG example which would draw a rectangle using <rect> tag:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect id="redrect" width="300" height="100" fill="red" />
</svg>

Note:

Width: This is a numeric value, specifies the width of tables, images, or table cells.

Height: This is a numeric value, specifies the height of tables, images, or table cells.

HTML5 - SVG Line

Following is the HTML5 version of an SVG example which would draw a line using <line> tag:

<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>

Note:

X1, y1: Start origin point.

X2, y2: End origin point.

Style: This is a CSS Style sheet, specifies an inline style for an element.

HTML5 - SVG Ellipse

Following is the HTML5 version of an SVG example which would draw an ellipse using <ellipse> tag:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
</svg>

HTML5 - SVG Polygon

Following is the HTML5 version of an SVG example which would draw a polygon using <polygon> tag:

<svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
    <polygon  points="20,10 300,20, 170,50" fill="red" />
</svg>

HTML5 - SVG Polyline

Following is the HTML5 version of an SVG example which would draw a polyline using <polyline> tag:

<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>

HTML5 - SVG Gradients

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

Similar way you can use <linearGradient> tag to create SVG linear gradient.

<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>

HTML5 – SVG Paralellogram

Following is the HTML5 version of an SVG example which would draw a paralellogram using <polygon> tag:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

<polygon points="200,100 330,100 260,230 130,230" style="fill:LightGray;stroke:black;stroke-width:1" />
</svg>

  Modified On Sep-18-2014 01:24:05 PM

Leave Comment