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.
Apply for HTML5 Certification Now!!
http://www.vskills.in/certification/Certified-HTML5-Developer
