HTML5 and SVG

Certify and Increase Opportunity.
Be
Govt. Certified HTML5 Developer

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

HTML5 and SVG

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

HTML5 and SVG 2

 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

HTML5 and SVG 3

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

HTML5 and SVG 4

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

HTML5 and SVG 5

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

HTML5 and SVG 6

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.

Get industry recognized certification – Contact us

Menu