The SVG element is used to create 2D Graphics in HTML5. Now we create a Web page named 2dgraphicsusingsvgelement.html to see how to create 2G graphics using the SVG element.
////2dgraphicsusingsvgelement.html ////
<!doctype html>
<head>
<title>2D Graphics using SVG element </title>
</head>
<body>
<h1> 2D Graphics using SVG element in HTML5 </h1>
<SVG id="svgelem" xmlns="http://www.w3.org/2000/svg">
<CIRCLE id="redcircle" cx="50" cy="50" r="50" fill="red">
<LINE x1="200" y1="10" x2="200" y2= "100"
style="stroke:purple;stroke-width:4">
<POLYGON points=" 50, 100,30,20,170,50" fill="lime">
<DEFS>
<RADIALGRADIENT id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<STOP offset="0%" style="stop-color:rgb(100,250,150);
stop-opacity:0">
<STOP offset="100%" style="stop-color:rgb(0,100,255);
stop-opacity:1">
</RADIALGRADIENT>
</DEFS>
<ELLIPSE cx="500" cy="50" rx="100" ry="50"
style="fill:url(#gradient)">
<RECT x="50" y="50" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9;padding:10,50;">
</SVG>
</html>
The SVG element is used to create 2D images in the Web page. Different elements used to display different shapes such as CIRCLE, LINE, and POLYGON. An ellipse shape is also drawn with radial color effects.
////2dgraphicsusingsvgelement.html ////
<!doctype html>
<head>
<title>2D Graphics using SVG element </title>
</head>
<body>
<h1> 2D Graphics using SVG element in HTML5 </h1>
<SVG id="svgelem" xmlns="http://www.w3.org/2000/svg">
<CIRCLE id="redcircle" cx="50" cy="50" r="50" fill="red">
<LINE x1="200" y1="10" x2="200" y2= "100"
style="stroke:purple;stroke-width:4">
<POLYGON points=" 50, 100,30,20,170,50" fill="lime">
<DEFS>
<RADIALGRADIENT id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<STOP offset="0%" style="stop-color:rgb(100,250,150);
stop-opacity:0">
<STOP offset="100%" style="stop-color:rgb(0,100,255);
stop-opacity:1">
</RADIALGRADIENT>
</DEFS>
<ELLIPSE cx="500" cy="50" rx="100" ry="50"
style="fill:url(#gradient)">
<RECT x="50" y="50" width="250" height="250"
style="fill:blue;stroke:pink;stroke-width:5;
fill-opacity:0.1;stroke-opacity:0.9;padding:10,50;">
</SVG>
</html>
The SVG element is used to create 2D images in the Web page. Different elements used to display different shapes such as CIRCLE, LINE, and POLYGON. An ellipse shape is also drawn with radial color effects.
No comments:
Post a Comment