Home > Article > Web Front-end > What are the real-world applications of CSS and SVG?
What are the real-world applications of CSS and SVG?
- PHPzforward
- 2023-09-17 16:05:061207browse
Developers use CSS to style web content and represent it correctly. It can be used to make any content attractive.
The full form of SVG is Scalable Vector Image. SVG is an image type like jpg or png. A jpg or png is a raster image created using a grid of pixels. If we zoom in on a raster image, it starts to get blurry.
Vector images are created using mathematical functions that draw vectors and connect them to form shapes. Since it's not a pixel grid, it never becomes blurry even if we zoom in over 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'll learn CSS and SVG in action.
Example 1 (Adding basic styles to SVG images)
In the example below, we create a circle in SVG format. We use the "svg" HTML tag to create SVG images. Additionally, we set the size of the view box. Additionally, we set the x and y positions of the circle in the view frame.
We use the "circle" tag to access and style the svg image in CSS. Users can observe that they can control fill color, stroke color, and stroke width through CSS. However, they can also add additional styling using 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 (Add hover effect on SVG image)
In the example below, we have created two squares in SVG vector format. Additionally, we assigned a class name to each shape. We use the class name in CSS to access the HTML element and set the fill color. Additionally, we set up a 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 (Add animation to SVG image)
In the example below, we add animation to an SVG image. Here we have created a circle using SVG. In CSS, we access the circle using its id and add the "move" keyframe as animation.
In the Move keyframe, 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 CSS with SVG images. In this first example, we learned the basic usage of CSS and SVG. In the second example, we added a hover effect to the SVG image; in the previous example, we added animation to the SVG image.
In actual development, users can use CSS with SVG to add animations and create GIFs.
The above is the detailed content of What are the real-world applications of CSS and SVG?. For more information, please follow other related articles on the PHP Chinese website!