Scalable Vector Graphics (SVG) is a powerful tool in web development, allowing for the creation of dynamic and interactive graphics directly in HTML. Unlike traditional image formats like JPEG or PNG, SVG is resolution-independent, meaning it looks crisp and clear at any size or scale. In this article, we’ll explore what SVG is, how it differs from Canvas, and how to use SVG in your web projects.
What is SVG?
SVG is an XML-based markup language for describing two-dimensional vector graphics. It can be used to create shapes, paths, text, and more, making it ideal for creating logos, icons, and illustrations on the web. SVG images are defined using XML tags, which makes them easily scalable, customizable, and accessible.
SVG vs. Canvas
While both SVG and Canvas are used for creating graphics on the web, they differ in how they are implemented and used. SVG is an XML-based language for describing vector graphics, meaning each element in an SVG image is part of the DOM and can be manipulated with CSS and JavaScript. Canvas, on the other hand, is a bitmap-based drawing API that is used to draw graphics programmatically. This means that while SVG is ideal for static and interactive graphics, Canvas is better suited for complex animations and real-time rendering.
Getting Started with SVG
To use SVG in your HTML document, you can embed an SVG image directly using the <svg> tag or include an external SVG file using the <img> tag. Here’s a simple example of embedding an SVG image:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
In this example, we create a red circle with a radius of 40 pixels centered at (50, 50).
Full Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SVG in HTML</title>
</head>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="red" />
</svg>
</body>
</html>Output:
P.S: You can change width, height, and color according to your wish.
SVG Shapes and Paths
Rectangles: <rect>
<!DOCTYPE html>
<html>
<head>
<title>SVG Rectangle Example</title>
</head>
<body>
<svg width="200" height="100">
<rect x="10" y="10" width="180" height="80" fill="blue" />
</svg>
</body>
</html>
Path (<path>)
<!DOCTYPE html>
<html>
<head>
<title>SVG Path Example</title>
</head>
<body>
<svg width="200" height="200">
<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="black" />
</svg>
</body>
</html>
Text (<text>)
<!DOCTYPE html>
<html>
<head>
<title>SVG Text Example</title>
</head>
<body>
<svg width="200" height="100">
<text x="20" y="50" font-family="Arial" font-size="20" fill="black">Hello, SVG!</text>
</svg>
</body>
</html>
Line (<line>)
<!DOCTYPE html>
<html>
<head>
<title>SVG Line Example</title>
</head>
<body>
<svg width="200" height="200">
<line x1="10" y1="10" x2="190" y2="190" stroke="black" />
</svg>
</body>
</html>
Adding Interactivity to SVG
SVG elements can be made interactive using JavaScript. You can add event listeners to SVG elements to respond to user interactions such as clicks, hovers, and drags. Here’s an example of how to change the color of a circle when clicked:
<!DOCTYPE html>
<html>
<head>
<title>SVG</title>
</head>
<body>
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" fill="red" />
</svg>
<script>
document.getElementById('myCircle').addEventListener('click', function() {
this.setAttribute('fill', 'blue');
});
</script>
</body>
</html>
Let’s see another example:
We will use SVG to create a star shape which is animated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated SVG Star Shape</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
svg {
animation: rotate 5s linear infinite;
}
</style>
</head>
<body>
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<polygon points="50,0 61.8,37.5 100,37.5 70.9,61.5 82.7,100 50,80.5 17.3,100 29.1,61.5 0,37.5 38.2,37.5" style="fill: #f1c40f;" />
</svg>
</body>
</html>
Output:
Still want see another example:
here it is – SVG wave
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Wave Animation</title>
<style>
body {
margin: 0;
overflow: hidden;
}
svg {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
fill: none;
stroke: #3498db;
stroke-width: 2;
animation: wave 2s linear infinite;
}
@keyframes wave {
0% {
d: path("M 0 100 Q 50 150 100 100 T 200 100 T 300 100 T 400 100 T 500 100 T 600 100 T 700 100 T 800 100 T 900 100 T 1000 100 V 0 H 0 Z");
}
100% {
d: path("M 0 100 Q 50 50 100 100 T 200 100 T 300 100 T 400 100 T 500 100 T 600 100 T 700 100 T 800 100 T 900 100 T 1000 100 V 0 H 0 Z");
}
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 100">
<path d="M 0 100 Q 50 150 100 100 T 200 100 T 300 100 T 400 100 T 500 100 T 600 100 T 700 100 T 800 100 T 900 100 T 1000 100 V 0 H 0 Z" />
</svg>
</body>
</html>
SVG Text Path Animation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Text Path Animation</title>
<style>
body {
margin: 0;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}
svg {
width: 80%;
height: auto;
font-size: 24px;
}
text {
fill: #3498db;
font-family: Arial, sans-serif;
text-anchor: middle;
}
path {
stroke: #3498db;
stroke-width: 2;
fill: none;
animation: draw 4s linear forwards;
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
</head>
<body>
<svg viewBox="0 0 1000 100">
<path id="path" d="M 100 50 Q 250 0 400 50 T 700 50" />
<text>
<textPath href="#path">SVG Text Path Animation</textPath>
</text>
</svg>
</body>
</html>
Output:
Conclusion
SVG is a powerful tool for creating scalable and interactive graphics on the web. Its XML-based format allows for easy manipulation and customization, making it ideal for a wide range of applications. By understanding the basics of SVG and how it differs from Canvas, you can create stunning visuals for your web projects with ease.
In summary, SVG is a versatile and powerful tool for creating graphics on the web, offering a wide range of features and capabilities. Whether you’re creating simple icons or complex illustrations, SVG provides the flexibility and scalability you need to bring your designs to life.
Leave a Reply