HTML Tutorials for Beginners to Advance

HTML Basic Structure, Elements in HTML, HTML Headlines, List in HTML, Insert Images in Web Pages, Tables in HTML, HTML form design, HTML5 Elements, HTML Canvas, etc.

HTML SVG

SVG stands for Scalable Vector Graphics

SVG is used to define graphics for the Web

SVG is a W3C recommendation

The HTML <svg> Element

The HTML <svg> element is a container for SVG graphics.

SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

HTML5 − SVG Circle

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

<body>

<h2>HTML5 SVG Circle</h2>

<svg>
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

</body>

output:

HTML5 SVG Circle

HTML5 − SVG Rectangle

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

See this example:

<body>

<h2>HTML5 SVG Rectangle</h2>

<svg>
<rect id="redrect" width="300" height="100" fill="red" />
</svg>

</body>

Output:

HTML5 SVG Rectangle

HTML5 − SVG Line

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

See this example:

<body>

<h2>HTML5 SVG Line</h2>

<svg>
<line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-width:2"/>
</svg>

</body>

Output:

HTML5 SVG Line

HTML5 − SVG Polygon

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

See this example:

<body>

<h2>HTML5 SVG Polygon</h2>

<svg>
<polygon points="20,10 300,20, 170,50" fill="red" />
</svg>

</body>

Output:

HTML5 SVG Polygon

HTML5 − SVG Polyline

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

See this example:

<body>

<h2>HTML5 SVG Polylin</h2>

<svg>
<polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="red" />
</svg>

</body>

Output:

HTML5 SVG Polyline
Previous Next
Applied Art and Communication Design Course in Mumbai
Index Solutions - Web Design and Development Company Mumbai
Advance Digital Marketing Course Online
Advance Digital Marketing Course in Thane Mumbai
Online Full Stack Developer Course in Mumbai Thane
Online Job Portal in India
Index Solutions - Web Design and Development Company in Mumbai India