Home > DeveloperSection > Blogs > HTML5 – SVG

HTML5 – SVG


HTML5 HTML5 
Ratings:
0 Comment(s)
 2449  View(s)
Rate this:

HTML5 – SVG

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>


Don't want to miss updates? Please click the below button!

Follow MindStick