Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the real world usage of CSS with SVG?
Developers use CSS to style the web page's content and represent it properly. It can be used to make any content attractive.
The full form of the SVG is the scalable vector image. The SVG is one type of image like a jpg or png. The jpg or png are raster images created using the grids of the pixels. If we zoom in on the raster images, it starts getting blurry.
The vector image is created using the mathematical functions which draw vectors and joins them to make a shape. As it is not a grid of pixels, it never gets blurred, even if we zoom in more than 100x.
Whenever we use CSS with vector images, it makes it more attractive, and we can create powerful images on the web page. In this tutorial, we will learn the real world usage of CSS with SVG.
Example 1 (Adding Basic Style to the SVG Image)
In the example below, we have created the circle shape in the SVG format. We have used the ‘svg’ HTML tag to create an SVG image. Also, we have set the dimensions for the view box. Furthermore, we have set the x and y position of the circle in the view box.
We accessed the svg image in CSS using the ‘circle’ tag and styled it. Users can observe that they can control the fill color, stroke color, and stroke width from the CSS. However, they can add other styles also using the various CSS properties.
<html>
<head>
<style>
circle {
fill: blue;
stroke: red;
stroke-width: 3;
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to style the SVG image </i> </h2>
<svg viewBox="0 0 100 100">
<circle cx="20" cy="20" r="10" />
</svg>
</body>
</html>
Example 2 (Adding Hover Effect on SVG Image)
In the example below, we have created the two square shapes in the SVG vector format. Also, we have given the class name to every shape. We access the HTML elements in CSS using their class name and set the fill color. Also, we have set the hover effect for the shape. In the output, hover over the shape, and you can observe how its color changes.
<html>
<head>
<style>
.shape {fill: green;}
.shape:hover {fill: #ff0000;}
</style>
</head>
<body>
<h4> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h4>
<svg viewBox="0 0 960 600">
<g id="shapes">
<path class="shape" d="M100,100 L150,50 L200,100 L150,150 Z" />
<path class="shape" d="M400,100 L450,50 L500,100 L450,150 Z" />
</g>
</svg>
</body>
</html>
Example 3 (Adding the Animation to SVG Image)
In the example below, we added the animation to the SVG image. Here, we have created the circle shape using the SVG. In CSS, we have accessed the circle using its id and added the ‘move’ keyframes as an animation.
In the ‘move’ keyframes, we change the vertical position of the circle, which shows us a bouncing circle.
<html>
<head>
<style>
#ball {
animation: move 3s infinite;
transform-origin: center bottom;
}
@keyframes move {
0% {transform: translateY(0);}
50% {transform: translateY(-30px);}
100% {transform: translateY(0);}
}
</style>
</head>
<body>
<h3> Using the CSS with SVG <i> to add hover effect on the SVG image. </i> </h3>
<svg viewBox="0 0 100 100">
<circle id="ball" cx="30" cy="30" r="15" fill="aqua" />
</svg>
</body>
</html>
We learned to use the CSS with the SVG images. In the first example, we learned the basic uses of CSS with SVG. In the second example, we added the hover effect on the SVG image; in the last example, we added the animation to the SVG image.
In real development, users can use CSS with SVG, add animation, and create GIFs.
54 Views
