How to Change Styles of SVG Image using CSS ?
Last Updated :
31 May, 2023
SVG, or Scalable Vector Graphics, is a markup language for describing two-dimensional graphics. It allows for the creation of detailed and complex images that can be scaled up or down without losing quality. CSS (Cascading Style Sheet) is a style sheet language used for describing the presentation of a document written in HTML or XML. By combining SVG and CSS, we can create dynamic and customizable graphics on our web pages. In this article, we will explore how to change the styles of SVG images using CSS.
Syntax: To apply CSS styles to an SVG image, we need to use the “style” attribute. The “style” attribute is used to define the CSS properties and values that will be applied to the SVG element. The syntax for using the “style” attribute is as follows:
<svg>
<rect style="property1: value1; property2: value2;"></rect>
</svg>
Approaches: There are two main approaches to changing the styles of SVG images using CSS: inline styles and external stylesheets.
Approach 1: Inline styles: Inline styles are CSS styles that are included directly in the SVG code using the “style” attribute. This approach is useful for making quick and simple style changes to individual SVG elements. Here’s an example:
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>SVG changing the styles with CSS</title>
</head>
<body>
<svg>
<rect x="50"
y="50"
width="100"
height="100"
style="fill: blue;">
</rect>
</svg>
</body>
</html>
|
Output: In this example, we are using the “style” attribute to set the “fill” property of the “rect” element to the color blue.
OUTPUT OF EXAMPLE 1
Approach 2: External stylesheets: External stylesheets are separate CSS files that are linked to the HTML document containing the SVG code. This approach is useful for making more complex style changes to multiple SVG elements at once.
Example 1: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>SVG changing the styles with CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg width="300" height="200" class="star">
<polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<svg width="300" height="200" class="star">
<polygon points="100,10 40,198 190,78 10,78 160,198" />
</svg>
</body>
</html>
|
CSS
.star {
fill: lime;
stroke: rgba(47, 0, 128, 0.93);
stroke-width: 5;
fill-rule: evenodd;
}
|
Output: In this example, we are adding a “class” attribute to the polygon element and linking it to a CSS rule that sets the “fill” property to the color combination of lime and shade of blue. This allows us to apply the same style to multiple SVG elements by simply adding the “polygon” class to each element.
OUTPUT FOR EXTERNAL STYLE SHEET
Example 2: Here with the help of SVG and CSS we are creating a GFG Logo .
HTML
<!DOCTYPE html>
<html>
<body>
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%"
y1="0%" x2="100%"
y2="0%">
<stop offset="0%" style="stop-color:rgb(102, 255, 0);
stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0, 255, 140);
stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana "
x="50" y="86">
GFG
</text>
</svg>
</body>
</html>
|
OUTPUT:
OUTPUT FOR GFG LOGO
Conclusion: By combining SVG and CSS, we can create dynamic and customizable graphics on our web pages. Changing the styles of SVG images using CSS can be done using inline styles or external stylesheets. Inline styles are useful for making quick and simple style changes to individual SVG elements, while external stylesheets are useful for making more complex style changes to multiple SVG elements at once. With the power of SVG and CSS, the possibilities for creating stunning graphics on the web are endless.
Share your thoughts in the comments
Please Login to comment...