Using SVG tag in HTML, one can draw various shapes like rectangle, circle, ellipse and polygon in web page. Below is one demonstration of SVG tag including HTML file, CSS file and output image:
HTML File:
<!----------------------------------
Author: Qaidjohar
Creation Date: Aug 23,2016
Logical Comment: HTML file for SVG Demo
----------------------------------->
<html>
<head>
<title>SVG Demo</title>
<link rel="stylesheet" type="text/css" href="../css/blog_svg.css">
</head>
<body>
<!-------------------------Main Div-------------------------------->
<div class="main">
<!-------------------------Header Div------------------------------>
<div class="header">
<h1>Scalar Vector Graphics</h1>
</div>
<!-------------------------Container Div--------------------------->
<div class="container">
<svg height=100% width=100%>
<!----------------------Mountain and Sun--------------------------->
<polygon points="0,500 125,250 250,500" fill="brown" stroke="orange" stroke-width="3px"/>
<circle cx="365" cy="322" r="50px" fill="yellow"/>
<polygon points="187,375 250,250 375,375 312,500 250,500" fill="brown" stroke="orange" stroke-width="3px"/>
<polygon points="312,500 437,250 500,500" fill="brown" stroke="orange" stroke-width="3px"/>
<!-------------------------House----------------------------------->
<rect height="125px" width="60px" x="625" y="375" fill="cyan" stroke="black" stroke-width="2px"/>
<rect height="125px" width="190px" x="685" y="375" fill="cyan" stroke="black" stroke-width="2px"/>
<polygon points="625,375 655,312 685,375" fill="pink" stroke="black" stroke-width="2px"/>
<circle cx="655" cy="353" r="13px" fill="black"/>
<ellipse rx="5px" ry="8px" cx="662" cy="353" fill="grey"/>
<polygon points="655,312 845,312 875,375 685,375" fill="pink" stroke="black" stroke-width="2px"/>
<rect height="50px" width="30px" x="640" y="450" fill="grey" stroke="black" stroke-width="2px"/>
<rect height="25px" width="25px" x="720" y="410" fill="grey" stroke="black" stroke-width="2px"/>
<rect height="25px" width="25px" x="805" y="410" fill="grey" stroke="black" stroke-width="2px"/>
<!-------------------------Tree------------------------------------>
<rect height="63px" width="25px" x="927" y="437" fill="brown"/>
<polygon points="900,437 937,400 980,437" fill="green"/>
<polygon points="900,417 937,380 980,417" fill="green"/>
<polygon points="900,395 937,355 980,395" fill="green"/>
</svg>
</div>
<!-------------------------Footer Div-------------------------------->
<div class="footer">
<p>(: Open Source :)</p>
</div>
</div>
</body>
</html>
CSS File:
/*
Author: Qaidjohar
Creation Date: Aug 23,2016
Logical Comment: CSS file for SVG Demo
*/
*
{
margin:0px;
padding:0px;
}
body
{
background-color:pink;
}
.main
{
height:650px;
width:1000px;
margin-left:183px;
}
.header
{
height:100px;
width:1000px;
background-color:black;
}
h1
{
color:yellow;
text-align:center;
line-height:90px;
}
.container
{
height:500px;
width:1000px;
}
svg
{
background-color:#AAAAFF;
}
.footer
{
height:50px;
width:1000px;
background-color:grey;
}
p
{
color:white;
text-align:center;
line-height:50px;
font-size:20px;
}
Output:
No comments:
Post a Comment