What are the real world usage of CSS with SVG ?
Last Updated :
11 Jan, 2023
SVG stands for Scalable Vector Graphics. It is an image format like HTML for designing 2D graphics. Vector images are different from raster images, raster images are those having .png, .jpeg format uses a grid of tiny pixels to create an image and as you zoom in on the image the pixels of the image becomes larger, making the image blurry as pixels of the image get stretched.
A vector image is created based on mathematical terms like curve, slope, dimensions, etc. that’s why an image can be scaled to any size you want without losing its resolution because its appearance is based on geometry unlike pixels of raster images.
You can create SVG images using tools like illustrator or sigma or can create by writing code directly, which is easier than you might think, and probably it will open the door to demanding animation.
Real-world Usage of CSS with SVG
To know why SVG is enacted with CSS in place of traditional image formats, we must first compare them. Traditional image containers like PNG, JPS, and GIFs have their disadvantages. While PNG and BMP containers can compress the image with a zip-like compression, effectively retaining all the details, JPG is a lossy compression and removes unnecessary details. But Bitmaps are only suitable for images like pictures of any other images that are reproduced. SVG furthermore are vector graphics that are embedded in the XML.
SVG has a rich set of advantages compared to bitmaps. PNG and JPEG images are fixed scalable, unlike SVG’s which are infinitely scalable. You can zoom in as much as you can, unlike PNG which has pixelated boundaries. SVG images also have a transparent background, so you can easily embed them to suit any theme and later manipulate it with CSS scripting. Using Java or CSS script, SVG images can be manipulated in real-time on the server as well as the browser.
SVG is mostly used in animation, logo designing, graphical diagrams, etc. In photography SVG is impractical, It is necessary to understand the basic level of SVG to use it with CSS scripting.
Example: Here we will create an SVG, no CSS will be there, just a wavy SVG.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<div class="cls-div">
<h1>GeeksforGeeks</h1>
<path fill="#00cba9"
fill-opacity="1"
d="M0,0L48,26.7C96,53,192,107,288,122.7C384,139,480,
117,576,90.7C672,64,768,32,864,58.7C960,85,1056,
171,1152,186.7C1248,203,1344,149,1392,122.7L1440,
96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,
320,960,320,864,320C768,320,672,320,576,320C480,320,
384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>
</body>
</html>
|
Output:
Example: Here we will show you how can we add CSS to a pre-existing SVG and make it more attractive.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.cls-div
{
background: red;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.cls-div h1{
font-size: 5rem;
color: aliceblue;
text-transform: capitalize;
}
.cls-div p{
color: aliceblue;
font-size: 2rem;
}
</style>
</head>
<body>
<div class="cls-div">
<h1>GeeksforGeeks</h1>
<p>SVG with CSS</p>
<path fill="#00cba9" fill-opacity="1"
d="M0,0L48,26.7C96,53,192,107,288,122.7C384,139,480,
117,576,90.7C672,64,768,32,864,58.7C960,85,1056,
171,1152,186.7C1248,203,1344,149,1392,122.7L1440,
96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,
320,960,320,864,320C768,320,672,320,576,320C480,320,
384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>
</body>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...