Introduction
SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics. Unlike raster images (like JPEG or PNG), SVG images are scalable and do not lose quality when resized. SVG is widely used for creating icons, logos, charts, and other graphics that need to scale well across different screen sizes and resolutions.
Basic SVG Structure
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic SVG Example</title>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- SVG content goes here -->
</svg>
</body>
</html>
Common SVG Elements
<rect>
The <rect> element is used to create rectangles.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue" />
</svg>
<circle>
The <circle> element is used to create circles.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<circle cx="200" cy="200" r="50" fill="red" />
</svg>
<ellipse>
The <ellipse> element is used to create ellipses.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="200" cy="200" rx="100" ry="50" fill="green" />
</svg>
<line>
The <line> element is used to create straight lines.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<line x1="50" y1="50" x2="200" y2="200" stroke="black" stroke-width="2" />
</svg>
<polyline> and <polygon>
The <polyline> element is used to create open shapes, while the <polygon> element is used to create closed shapes.
Example: Polyline
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<polyline points="50,50 150,150 50,150" fill="none" stroke="black" stroke-width="2" />
</svg>
Example: Polygon
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<polygon points="200,50 250,150 150,150" fill="yellow" stroke="black" stroke-width="2" />
</svg>
<path>
The <path> element is used to define complex shapes using a series of commands.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 L 300 100 L 200 300 Z" fill="purple" stroke="black" stroke-width="2" />
</svg>
<text>
The <text> element is used to display text.
Example
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<text x="50" y="50" font-family="Arial" font-size="24" fill="black">Hello SVG</text>
</svg>
Styling SVG with CSS
You can style SVG elements using CSS either inline or via external stylesheets.
Example: Inline CSS
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" style="fill:blue;stroke:black;stroke-width:2;" />
</svg>
Example: External CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG with External CSS</title>
<style>
.blue-rect {
fill: blue;
stroke: black;
stroke-width: 2;
}
</style>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" class="blue-rect" />
</svg>
</body>
</html>
Example: Combining Different SVG Elements
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Combined SVG Elements</title>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Rectangle -->
<rect x="50" y="50" width="100" height="100" fill="blue" />
<!-- Circle -->
<circle cx="200" cy="200" r="50" fill="red" />
<!-- Ellipse -->
<ellipse cx="200" cy="300" rx="100" ry="50" fill="green" />
<!-- Line -->
<line x1="50" y1="200" x2="150" y2="300" stroke="black" stroke-width="2" />
<!-- Polyline -->
<polyline points="50,50 150,150 50,150" fill="none" stroke="black" stroke-width="2" />
<!-- Polygon -->
<polygon points="200,50 250,150 150,150" fill="yellow" stroke="black" stroke-width="2" />
<!-- Path -->
<path d="M 100 100 L 300 100 L 200 300 Z" fill="purple" stroke="black" stroke-width="2" />
<!-- Text -->
<text x="50" y="350" font-family="Arial" font-size="24" fill="black">Hello SVG</text>
</svg>
</body>
</html>
Interactivity and Animation in SVG
SVG supports interactivity and animation using JavaScript and SMIL (Synchronized Multimedia Integration Language).
Example: Simple SVG Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Animation</title>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="30" fill="red">
<animate attributeName="cx" from="50" to="350" dur="5s" repeatCount="indefinite" />
</circle>
</svg>
</body>
</html>
Example: Interactive SVG with JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive SVG</title>
<script>
function changeColor(evt) {
var rect = evt.target;
rect.setAttribute("fill", "orange");
}
</script>
</head>
<body>
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg">
<rect x="50" y="50" width="100" height="100" fill="blue" onclick="changeColor(event)" />
</svg>
</body>
</html>
Conclusion
SVG is a powerful and flexible tool for creating vector graphics on the web. It supports a wide range of shapes, text, and images, and can be styled with CSS and manipulated with JavaScript. Understanding the basic elements and capabilities of SVG is essential for creating scalable and interactive graphics for modern web applications.