What is 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.
SVG Circle Codding...
<!DOCTYPE html>
<html>
<head>
<title>Circle</title>
</head>
<body>
<h1>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="40px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="30px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="40px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="20px" fill="red" stroke="blue" stroke-width="5">
</svg>
</h1>
</body>
</html>
OUTPUT:
<html>
<head>
<title>Circle</title>
</head>
<body>
<h1>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="40px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="30px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="40px" fill="red" stroke="blue" stroke-width="5">
</svg>
<svg height="100px" width="100px">
<circle cx="50px" cy="50px" r="20px" fill="red" stroke="blue" stroke-width="5">
</svg>
</h1>
</body>
</html>
OUTPUT:
SVG Circle:
No comments:
Post a Comment