css Set svg color

In web development, we often need to use vector graphics on pages, and a commonly used vector graphics format is SVG (Scalable Vector Graphics).

SVG is an XML-based markup language that can define two-dimensional graphics and the behavior of graphical applications. Due to its scalability and flexibility, SVG is widely used in web design, data visualization, and graphic editing.

When using SVG elements, we may need to set different colors as needed to meet design and visual requirements. This article details how to set the color of SVG elements using CSS.

1. Introduction to SVG Elements

SVG elements can be embedded in HTML in two ways: using the <img> tag or inserting the SVG code directly into the HTML file. Regardless of which method is used, SVG elements can be styled using CSS.

SVG elements can be selected and manipulated similarly to HTML elements. For example, SVG elements can be selected and styled using ID selectors, class selectors, and attribute selectors.

2. Selecting SVG Elements Using CSS Selectors

When selecting SVG elements using CSS selectors, there are some special syntax and rules to be aware of. Here are some common selector examples:

2.1. Select the SVG element with the id “my-svg”

#my-svg {
fill: red;
} 

2.2. Select the SVG element with the class “svg-icon”

.svg-icon {
fill: blue;
} 

2.3. Select all SVG elements

svg {
fill: green;
} 

Through the above methods, we can select specific SVG elements and set different styles for them.

3. Use the fill attribute to set the fill color of an SVG element

The fill attribute of an SVG element can be used to set its fill color. The fill attribute accepts various color values, such as hexadecimal color codes, RGB color values, and color names.

Here are some sample codes and their results:

<svg>
<rect x="10" y="10" width="100" height="100" fill="#ff0000"></rect>
<circle cx="150" cy="60" r="50" fill="rgb(0, 255, 0)"></circle>
<ellipse cx="300" cy="60" rx="50" ry="30" fill="blue"></ellipse>
<polygon points="450,10 480,90 540,90 510,10" fill="rgba(255, 255, 0, 0.5)"></polygon>
</svg>

In the above code, four different colors (red, green, blue, and semi-transparent yellow) are used to fill a rectangle, a circle, an ellipse, and a polygon.

4. Use the stroke attribute to set the stroke color of SVG elements

In addition to the fill color, we can also use the stroke attribute to set the stroke color of SVG elements. The stroke attribute also accepts various color values.

The following is a sample code and its running results:

<svg> 
<circle cx="100" cy="100" r="50" stroke="black" stroke-width="2" fill="none"></circle> 
</svg> 

In the above code, we create a circle with a radius of 50 and set its stroke color to black (stroke=”black”) and stroke width (stroke-width=”2″). Since we don’t set a fill color (fill=”none”), the circle has no fill.

5. Use CSS pseudo-classes to select and set the color of SVG elements

We can also use CSS pseudo-classes to select and set the color of SVG elements. Common pseudo-classes include :hover, :active, and :focus.

Here are some sample codes and their results:

circle:hover {
fill: yellow;
}

polygon:active {
fill: orange;
}

rect:focus {
fill: purple;
}

In the above code, when the mouse hovers over a circle, its fill color changes to yellow. When a polygon is clicked, its fill color changes to orange. When a rectangle has focus, its fill color changes to purple.

6. Using CSS Variables to Set SVG Element Colors

CSS variables are reusable values ​​defined in CSS. We can use CSS variables to set the color of SVG elements and then reference and modify them wherever needed.

The following is a sample code snippet and its output:

:root {
--my-color: green;
}

circle {
fill: var(--my-color);
}

In the above code, we define a CSS variable named “my-color” in the root element (:root) and set its value to green. Then, within the circle element, we use this variable to set its fill color: fill: var(–my-color).

Later, if we need to change the fill color, we simply modify the value of the CSS variable in the root element.

7. Summary

This article detailed how to set the color of SVG elements using CSS. By using selectors, attributes, CSS pseudo-classes, and CSS variables, we can flexibly set the color of SVG elements.