It is a
graphics format in which the shapes are specified in XML. SVG is a language for
describing two-dimensional vector graphics in XML.
SVG Features –
§ W3C
Standard.
§ Image
Scaling.
§ Smaller
file size.
§ SVG
tools are already available.
§ SVG
images can be searched, indexed, scripted and compressed.
§ SVG
images can be printed with high quality at any resolution.
§ Compatibility.
§ Accessibility.
§ Search
Engine Optimization.
Syntax - <svg xmlns=http://www.w3c.org/2000/svg>
-----</svg>
SVG supports the following list of shapes –
§ Rectangle <rect>
§ Circle <circle>
§ Ellipse <ellipse>
§ Line <line>
§ Polyline <polyline>
Create SVG
Rectangle
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2> SVG
Rectangle</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<rect width="200px"
height="100px" fill="lightblue"
stroke="green">
</svg>
</body>
</html>
WITH STYLE ATTRIBUTES
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2 style="color:red"> SVG Rectangle</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<rect width="200px"
height="100px" style="fill:rgb(0,255,0);stroke-width:1;stroke:rgb(255,0,0)">
</svg>
</body>
</html>
SVG RECTANGLE WITH RADIUS
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2 style="color:red">SVG Rectangle</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<rect x="50"
y="20" rx="20"
ry="20" width="200"
height="100" style="fill:pink;stroke:green;stroke-width:5">
</svg>
</body>
</html>
SVG CIRCLE
With the
help of circle keyword we can design circles on the webpage.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2 style="color:red">SVG Circle</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<circle cx="100px"
cy="60px" r="50px"
style="fill:red;stroke:green;stroke-width:3px">
</svg>
</body>
</html>
SVG ELLIPSE
This element
is used to create an ellipse. It is closely related to the circle.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2 style="color:red">SVG Ellipse</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<ellipse cx="150px"
cy="60px" rx="100px"
ry="50px" style="fill:red;stroke:green;stroke-width:3px">
</svg>
</body>
</html>
SVG LINE
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<h2 style="color:red">SVG Line</h2>
<svg xmlns="http://www.w3c.org/2000/svg">
<line x1="0"
y1="0" x2="100"
y2="100" style="fill:red;stroke:green;stroke-width:3px">
</svg>
</body>
</html>
No comments:
Post a Comment