Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
What are the real world usage of CSS with SVG?
CSS with SVG provides powerful styling capabilities for scalable vector graphics. SVG (Scalable Vector Graphics) are vector-based images created using mathematical functions rather than pixel grids, making them infinitely scalable without quality loss. When combined with CSS, SVG becomes a versatile tool for creating interactive, animated, and responsive graphics.
Syntax
/* Target SVG elements directly */
svg element {
property: value;
}
/* Target SVG elements by class */
.svg-class {
property: value;
}
/* Target SVG elements by ID */
#svg-id {
property: value;
}
Real-World Applications
| Use Case | Application |
|---|---|
| Logo Design | Scalable company logos that work on any device |
| Icon Systems | Interactive icons with hover states and animations |
| Data Visualization | Charts and graphs with dynamic styling |
| Interactive Graphics | Clickable infographics and illustrations |
Example 1: Basic SVG Styling
The following example demonstrates basic SVG styling using CSS properties to control appearance
<!DOCTYPE html>
<html>
<head>
<style>
circle {
fill: #3498db;
stroke: #e74c3c;
stroke-width: 3;
}
svg {
border: 1px solid #ddd;
margin: 20px;
}
</style>
</head>
<body>
<h3>Using CSS with SVG to style vector graphics</h3>
<svg viewBox="0 0 100 100" width="200" height="200">
<circle cx="50" cy="50" r="30" />
</svg>
</body>
</html>
A blue circle with a red border appears inside a bordered SVG container, demonstrating basic SVG styling capabilities.
Example 2: Interactive Hover Effects
This example shows how to create interactive SVG elements with hover effects for better user experience
<!DOCTYPE html>
<html>
<head>
<style>
.shape {
fill: #27ae60;
transition: fill 0.3s ease;
cursor: pointer;
}
.shape:hover {
fill: #e74c3c;
}
svg {
margin: 20px;
}
</style>
</head>
<body>
<h3>Interactive SVG shapes with hover effects</h3>
<svg viewBox="0 0 300 200" width="400" height="250">
<rect class="shape" x="50" y="50" width="60" height="60" />
<circle class="shape" cx="200" cy="80" r="30" />
</svg>
</body>
</html>
Green rectangle and circle shapes that smoothly change to red when hovered over, demonstrating interactive SVG functionality.
Example 3: SVG Animations
This example demonstrates how to animate SVG elements using CSS keyframes for dynamic visual effects
<!DOCTYPE html>
<html>
<head>
<style>
#bouncing-ball {
animation: bounce 2s infinite ease-in-out;
transform-origin: center;
fill: #9b59b6;
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-40px);
}
}
svg {
border: 1px solid #ddd;
margin: 20px;
}
</style>
</head>
<body>
<h3>Animated SVG with CSS keyframes</h3>
<svg viewBox="0 0 100 100" width="300" height="300">
<circle id="bouncing-ball" cx="50" cy="70" r="15" />
</svg>
</body>
</html>
A purple circle continuously bounces up and down in a smooth animation, demonstrating CSS animation capabilities with SVG.
Conclusion
CSS with SVG enables creation of scalable, interactive graphics perfect for modern web development. From basic styling to complex animations, this combination offers unlimited possibilities for creating engaging visual content that performs well across all devices and screen sizes.
189 Views
