SVG stands for Scalable Vector Graphics and it is an XML-based vector image format which is needed for two-dimensional graphics providing support for animation and also for interactivity.All the present popular browsers such as Chrome, Safari and Mozilla all contain at least some degree of SVG rendering support. It was initially released in the year 2001 on 4th of September. The development of SVG was done by W3C and it is an open standard.
Example:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>SVG</title>
<style>
svg{
background:green;
}
</style>
</head>
<body>
<header style="background:grey;width:400px;text-align:center;margin:auto;">
<h1>SVG Example</h1>
<p>simple SVG example</p>
</header>
<div style="margin:auto; background:grey;">
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" stroke="red" stroke-width="2" fill="blue" />
<circle cx="100" cy="100" r="60" stroke="red" stroke-width="2" fill="green" />
<circle cx="100" cy="100" r="40" stroke="red" stroke-width="2" fill="black" />
<circle cx="100" cy="100" r="20" stroke="red" stroke-width="2" fill="white" />
Your browser does not support SVG.
</svg>
<svg width="300" height="200">
<ellipse cx="150" cy="100" rx="100" ry="10" style="fill:red;" />
<ellipse cx="150" cy="80" rx="80" ry="10" style="fill:blue;" />
<ellipse cx="150" cy="60" rx="60" ry="10" style="fill:yellow;" />
</svg>
</div>
</body>
</html> 
No comments:
Post a Comment