8
SVG (Scalable Vector Graphics) is an XML-based format for creating vector graphics in HTML5.
SVG allows you to create resolution-independent graphics directly in your HTML, making it ideal for creating shapes, charts, and interactive visualizations.
In this tutorial, you’ll learn:
- What SVG is and why it’s useful.
- Basic SVG shapes and elements.
- Styling and animating SVGs.
- Combining SVG with JavaScript for interactivity.
- Embedding and using SVG in HTML5.
1. What is SVG?
SVG stands for Scalable Vector Graphics, and its main features are:
- Resolution Independence: SVG images look sharp on any screen size or resolution.
- Lightweight: SVGs are XML-based, making them lightweight compared to raster images like PNG or JPEG.
- Scriptable: SVGs can be styled and animated using CSS and manipulated with JavaScript.
2. Basic SVG Shapes
SVG provides basic shapes such as rectangles, circles, lines, and polygons.
Example 1: Drawing Basic Shapes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic SVG Shapes</title>
</head>
<body>
<h1>Basic SVG Shapes</h1>
<svg width="500" height="300" style="border: 1px solid black;">
<!-- Rectangle -->
<rect x="50" y="50" width="100" height="50" fill="blue" />
<!-- Circle -->
<circle cx="200" cy="75" r="40" fill="red" />
<!-- Line -->
<line x1="300" y1="50" x2="400" y2="150" stroke="green" stroke-width="3" />
<!-- Ellipse -->
<ellipse cx="100" cy="200" rx="50" ry="30" fill="purple" />
<!-- Polygon -->
<polygon points="300,200 350,250 250,250" fill="orange" />
</svg>
</body>
</html>
Explanation:
- <rect>: Draws a rectangle.
- <circle>: Draws a circle.
- <line>: Draws a straight line.
- <ellipse>: Draws an ellipse.
- <polygon>: Draws a shape with multiple points.
3. Adding Text in SVG
SVG supports text elements using the <text> tag.
Example 2: Adding Text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Text</title>
</head>
<body>
<h1>SVG Text Example</h1>
<svg width="400" height="200" style="border: 1px solid black;">
<!-- Simple Text -->
<text x="50" y="50" font-family="Arial" font-size="20" fill="black">
Hello, SVG!
</text>
<!-- Rotated Text -->
<text x="150" y="100" font-family="Arial" font-size="20" fill="blue" transform="rotate(45, 150, 100)">
Rotated Text
</text>
</svg>
</body>
</html>
Explanation:
- <text>: Adds text to the SVG canvas.
- x and y: Specify the starting position of the text.
- transform=”rotate(angle, cx, cy)”: Rotates the text by a given angle around a center point.
4. Styling SVG with CSS
SVG elements can be styled using inline attributes or external CSS.
Example 3: Styling SVG with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG with CSS</title>
<style>
.circle {
fill: yellow;
stroke: black;
stroke-width: 3;
}
.rectangle {
fill: lightblue;
stroke: darkblue;
stroke-width: 2;
}
</style>
</head>
<body>
<h1>SVG Styled with CSS</h1>
<svg width="300" height="200" style="border: 1px solid black;">
<rect class="rectangle" x="50" y="50" width="100" height="50"></rect>
<circle class="circle" cx="200" cy="100" r="40"></circle>
</svg>
</body>
</html>
Explanation:
- You can style SVG elements with CSS classes for reusability.
- CSS properties like fill, stroke, and stroke-width control appearance.
5. Animating SVG
SVG supports animations using the <animate> and <animateTransform> tags.
Example 4: SVG Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Animation</title>
</head>
<body>
<h1>SVG Animation Example</h1>
<svg width="300" height="200" style="border: 1px solid black;">
<!-- Moving Circle -->
<circle cx="50" cy="100" r="20" fill="red">
<animate attributeName="cx" from="50" to="250" dur="2s" repeatCount="indefinite" />
</circle>
<!-- Rotating Rectangle -->
<rect x="100" y="50" width="50" height="50" fill="blue">
<animateTransform attributeName="transform" type="rotate" from="0 125 75" to="360 125 75" dur="2s" repeatCount="indefinite" />
</rect>
</svg>
</body>
</html>
Explanation:
- <animate>: Animates attributes like cx or fill.
- <animateTransform>: Animates transformations like rotation or scaling.
- dur=”2s”: Duration of the animation.
- repeatCount=”indefinite”: Makes the animation repeat infinitely.
6. Responsive SVG
Make your SVG responsive by using viewBox and setting width and height to percentages.
Example 5: Responsive SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive SVG</title>
</head>
<body>
<h1>Responsive SVG Example</h1>
<svg viewBox="0 0 400 200" style="width: 100%; height: auto; border: 1px solid black;">
<rect x="50" y="50" width="100" height="50" fill="lightgreen" />
<circle cx="200" cy="100" r="40" fill="orange" />
<line x1="300" y1="50" x2="350" y2="150" stroke="purple" stroke-width="2" />
</svg>
</body>
</html>
Explanation:
- viewBox=”minX minY width height”: Defines the coordinate system for the SVG.
- style=”width: 100%; height: auto;”: Makes the SVG responsive.
7. Embedding External SVG
You can embed external SVG files using <img> or <object> tags.
Example 6: Embedding External SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Embed External SVG</title>
</head>
<body>
<h1>Embedding External SVG</h1>
<!-- Using <img> -->
<img src="example.svg" alt="External SVG" width="200">
<!-- Using <object> -->
<object type="image/svg+xml" data="example.svg" width="200"></object>
</body>
</html>
Explanation:
- <img>: Embeds SVG as an image.
- <object>: Allows interaction with the SVG content.
8. Interactive SVG with JavaScript
Add interactivity to SVG elements using JavaScript.
Example 7: Interactive SVG
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Interactive SVG</title>
</head>
<body>
<h1>Interactive SVG Example</h1>
<svg width="300" height="200" style="border: 1px solid black;">
<circle id="myCircle" cx="150" cy="100" r="40" fill="blue"></circle>
</svg>
<script>
const circle = document.getElementById("myCircle");
circle.addEventListener("click", () => {
circle.setAttribute("fill", "green");
alert("Circle clicked!");
});
</script>
</body>
</html>
Explanation:
- JavaScript interacts with SVG elements using DOM methods like getElementById.
- Event listeners can trigger actions on user interaction.
Conclusion
In this tutorial, you learned:
- How to create basic shapes in SVG.
- How to style and animate SVG elements.
- How to make SVG responsive.
- How to embed and interact with SVG.
SVG is a powerful tool for creating scalable, interactive, and visually appealing graphics. Experiment with these examples to enhance your web projects