How to Style SVG Images with CSS: A Simple Guide
Today, we’re diving deeper into Scalable Vector Graphics (SVG). As mentioned in our previous post, one of the great things about SVG is that you can style it using CSS.
SVG Styling Properties
Styling SVGs is similar to styling regular HTML elements. They even share some common properties. However, SVGs have unique properties that are separate from standard CSS.
For example, in standard HTML, you can set the background color using either the background-color or background CSS properties. In SVG, you use the fill property to set the background color. Similarly, the border of an SVG element is set using the stroke property, not the border property like in HTML. You can find the complete list of SVG-specific properties here.
If you’re familiar with vector editors like Adobe Illustrator, you’ll quickly realize that SVG property names are inspired by such editors.
How to Style SVG Elements
There are multiple ways to add styles to SVG elements. Let’s explore them:
Suggested Reading: Understanding CSS Style Priority
Presentation Attributes
If you’ve looked at the complete list of SVG properties, you’ll know that you can add these directly to the SVG element to change its appearance. For instance, you can add the fill and stroke properties directly to a rect element like this:
<svg> <rect width="200" height="200" fill="slategrey" stroke="black" stroke-width="3"/> </svg>
Here’s what the rectangle will look like:
Inline Style Sheet
You can also use the style attribute to add styles. In the example below, we add fill and stroke to the rect element, but this time within the style attribute. We also rotate it using the CSS3 transform property:
<svg> <rect x="203" width="200" height="200" style="fill:slategrey; stroke:black; stroke-width:3; -webkit-transform: rotate(45deg);"/> </svg>
The rectangle will look the same, but it will also be rotated:
Internal Styles
Adding internal styles to SVG elements in an HTML document is similar to how you would do it for regular HTML elements. The example below demonstrates how to use the style tag to style SVG elements in an HTML file.
<style type="text/css" media="screen">
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
</style>
When working with SVG files, which are XML-based, you’ll need to wrap your style declarations in cdata. This is necessary to avoid conflicts with XML parsers. Here’s how to do it:
<style type="text/css" media="screen">
<![CDATA[
#internal rect {
fill: slategrey;
stroke: black;
stroke-width: 3;
-webkit-transition: all 350ms;
}
#internal rect:hover {
fill: green;
}
]]>
</style>
The use of cdata is essential, especially when your CSS includes characters like > that could conflict with XML parsers. So, it’s highly recommended to use cdata when embedding styles in SVG files.
External Style Sheet
External style sheets work the same for SVG elements in HTML files.
<link rel="stylesheet" type="text/css" href="style.css">
In SVG files, you’ll need to use xml-stylesheet to link the external style sheet, like this:
<?xml-stylesheet type="text/css" href="style.css"?>
Grouping Elements
You can group SVG elements using the <g> tag. This allows you to apply the same styles to all elements in the group. Here’s an example:
<g style="fill:slategrey; stroke:black; stroke-width:3; fill-opacity: 0.5;"> <rect x="203" width="200" height="200"/> <circle cx="120" cy="106" r="100"/> </g>
Both the rectangle and the circle will look the same.
Final Thoughts
We’ve covered the basics of styling SVG elements with CSS. This is just one benefit of using SVG for graphics. Stay tuned for more insights in our next post.