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
Watch Video
<!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:
SVG Circle:
SVG Rectangle
Watch video
SOURCE CODE:
<!DOCTYPE html>
<html>
<head>
<title>Rectangle</title>
</head>
<body>
<h1>Rectangle</h1>
<h1>
<svg height="100" width="400">
<rect height="100" width="400" fill="red" stroke="blue" stroke-width="4">
</svg>
<svg height="100" width="400">
<rect height="100" width="400" fill="pink" stroke="green" stroke-width="4">
</svg>
<svg height="100" width="400">
<rect height="100" width="400" fill="grey" stroke="blue" stroke-width="4">
</svg>
</h1>
</body>
</html>
OUTPUT:
<!DOCTYPE html>
<html>
<head>
<title>Rectangle</title>
</head>
<body>
<h1>Rectangle</h1>
<h1>
<svg height="100" width="400">
<rect height="100" width="400" fill="red" stroke="blue" stroke-width="4">
</svg>
<svg height="100" width="400">
<rect height="100" width="400" fill="pink" stroke="green" stroke-width="4">
</svg>
<svg height="100" width="400">
<rect height="100" width="400" fill="grey" stroke="blue" stroke-width="4">
</svg>
</h1>
</body>
</html>
OUTPUT:
No comments:
Post a Comment