HTML5 and SVG

HTML5 and 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. SVG became a W3C Recommendation 14. January 2003.

Embedding SVG – HTML5 allows embedding SVG directly using <svg>…</svg> tag which has following syntax

<svg xmlns=”http://www.w3.org/2000/svg”>

…

</svg>

Various SVG shapes can be drawn as illustrated.

SVG Circle – An example of the HTML5 version of an SVG example which would draw a circle using <circle> tag is

HTML code <svg id=”svgelem” height=”200″ xmlns=”http://www.w3.org/2000/svg”> <circle id=”redcircle” cx=”50″ cy=”50″ r=”50″ fill=”red” /> </svg>

Browser output

SVG Rectangle – An example of the HTML5 version of an SVG example which would draw a rectangle using <rect> tag is

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

Browser output

 SVG Line – An example of the HTML5 version of an SVG example which would draw a line using <line> tag is

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

Browser output

Style attribute can also be used to set additional style information like stroke and fill colors, width of the stroke etc.

SVG Polygon – An example of the HTML5 version of an SVG example which would draw a polygon using <polygon> tag is

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

Browser output

SVG Polyline – An example of the HTML5 version of an SVG example which would draw a polyline using <polyline> tag is

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

Browser output

SVG Gradient – An example of 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. Similarly <linearGradient> tag can be used to create SVG linear gradient.

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

Browser output

SVG Support – Most of the web browsers can display SVG just like they can display PNG, GIF, and JPG. Viewing SVG in Internet Explorer needs the Adobe SVG Viewer to view it.