Here’s a simple example of how to style SVG elements using CSS. First our SVG document, which is a stand-alone file:
<?xml versions’ll” encoding=”utf-8″?>
<?xml-stylesheet href=”styles.css” type=”text/css” ?>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” xmlns:xlink=
“http://www.w3.org/1999/xlink” x=”0px” y=”0px” viewBox=”0 0 497
184″ enable-background=”new 0 0 497 184″ xml:space=”preserve”>
<polygon id=”star” points=”77,23.7 98.2,66.6 145.5,66.5 111.2,
106.9,119.3,154 77,131.8 34.7,154 42.8,106.9 8.5,67.5 55.8, 66.6 “/>
<circle id=”circle” cx=”245″ cy=”88.9″ r=”67.5″/>
</svg>
This markup creates the image shown below.
Although we can’t use most CSS properties with SVG documents, we can use CSS to change an element’s color. Let’s make our star yellow:
#star {
fill: hsl( 44, 100%, 50% );
}
You’ll often see the fiLL attribute used with SVG tags—for example, <circLe fiLL=”rgb( 255, 185, 0 )” cx=”3″ cy=”10″ r=”100″> —but it’s also a property that can be used with CSS.
We can also use CSS to adjust an element’s stroke , which is the outline of an SVG shape. A shape’s stroke exists, even if no stroke properties are set. Let’s give our circle a dark blue, dashed border that’s ten pixels wide. We’ll also set its fiLL property to cornfLowerbLue :
circle {
fill: cornflowerblue;
stroke: darkblue;
stroke-width: 10;
stroke-dasharray: 10, 15;
stroke-linecap: round;
}
Together this gives us the result below.
1. Using SVG Attributes as CSS Properties
We can also use CSS to set the coordinate values of some shape elements: <rect> , <circLe> , and <eLLipse> . Typically, we’d use SVG attributes for these elements:
<svg viewBox=”0 0 400 400″ xmlns=”http://www.w3.org/2000/svg”>
<rect x=”20″ y=”200″ width=”300″ height=”300″ fill=”#f60″ />
</svg>
However, SVG 2 redefined some SVG attributes as geometry properties. This means we can use CSS to set their values:
<svg viewBox=”0 0 400 400″ xmlns=,,http://www.w3.org/2000/svg,,>
<style type=”text/css”> rect {
x: 20px;
y: 50px;
width: 300px;
height: 300px;
fill: #f60;
}
</style>
<rect />
</svg>
Coordinate properties ( x and y ), center coordinate properties ( cx and cy ), and radius properties ( rx , ry , and r ), can be set using CSS. So can width and height . Units are optional for SVG attributes. CSS values, on the other hand, require units. Both lengths and percentages are valid for the properties mentioned here, but be aware that lengths work a bit differently with SVG documents. Remember that the S in SVG stands for scalable. The computed size of an SVG element also depends on:
- the computed width and height of the root SVG element
- the value of the root element’s viewBox attribute
- any scaling transforms applied to the element or its ancestors
In other words, the corners of our <rect> element are (20, 50) , (20, 320) , (350, 320) , and (20, 350) within the SVG coordinate system. However, the actual dimensions may be larger or smaller, depending on the factors above.
Not every SVG attribute is available via CSS—at least not in every browser. For example, Chrome and Edge support using the CSS path() function to set path data, or the d attribute:
path {
d: path(“M 454.45223,559.21474 -304.96705,163.45948 417.4767,-296.33928 Z”);
}
As of this writing, they are the only browsers that do. Work to add support in Firefox7 and WebKit has not yet begun.
For other shape elements, the SVG 2 specification is downright inconsistent. To date, you must use element attributes to set the properties of <Line> , <poLyLine> , and <poLygon> elements.
That said, we aren’t limited to using type (or element) selectors to set properties. We could, for instance, define small, medium, and large circles using class selectors:
<svg viewBox=”0 0 400 400″ xmlns=”http://www.w3.org/2000/svg”>
<style type=”text/css”>
.small {
cx: 20px;
cy: 20px;
r: 20px;
fill: #0c0;
}
.medium {
cx: 80px;
cy: 80px;
r: 60px;
fill: #fc0;
}
.large {
cx: 220px;
cy: 220px;
r: 120px;
fill: #00f;
}
</style>
<circle class=”small” />
<circle class=”medium” />
<circle class=”large” />
</svg>
Regardless of the selector, using CSS syntax to specify properties also makes it easy to animate them. We’ll take a look at how to do this in the next section.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.