How to manipulate SVGs via CSS
SVGs and CSS
We can affect how SVGs are styled with CSS. SVGs are just a way of writing icons, shapes, and drawing illustrations in the browser using HTML.
Example
<body>
<svg>
<path d="M 10,60 40,30 50,50 60,30 70,80" />
</svg>
</body>
This is a cross between HTML and Canvas. The SVG provides a canvas-like area with a co-ordinate system where shapes can be drawn.
The code above is an SVG code that renders the following icon:
All SVGs are placed inside the SVG tag, so the browser knows it is dealing with graphics. The SVG code is an HTML code and the styling is like normal HTML elements using CSS.
Notice that the SVG tag is styled to have a width of
500px, a height of500px, and a border of1pxwith color solid light gray. This is CSS styling used in SVG.
<path> is used to draw points in the SVG and connect them. They can be opened or closed. <path> is styled to be filled with the color black, a gray stroke color, and the stroke width of 4px.
We have seen a little bit of how SVG components can be styled with CSS. Let’s see other ways to style SVGs with CSS.
Inline attributes
CSS can be applied to SVGs via inline attributes. In inline attributes styling, the styles are applied via attributes to the svg and its components.
<svg ... >
<path d="M 10,60 40,30 50,50 60,30 70,80"
fill="black" stroke="red" stroke-width="4px" />
</svg>
Here, the <path> is styled by directly specifying the attribute styles.
See the attributes:
-
fill: Sets the color the path is to be filled with. -
stroke: The outline color of the path. -
stroke-width: The width of the path outline.
These are styles but are defined as attributes to the SVG.
The style attribute
Our first example is an example of styling SVGs via the style attribute. Styling via style attributes involves specifying your styling in the style attribute of the SVG component.
Let’s take another look at our first example:
<svg>
<path d="M 10,60 40,30 50,50 60,30 70,80" />
</svg>
Here, SVG and path are styled via the style attribute. The style attribute is set on the component and the value is a string styling separated by a ;.
Example:
<svg>
<circle cy="100" cx="200" r="30" />
</svg>
We have a circle styled via the style attribute. The style attribute is set to fill:green;. This will fill the circle with the color green.
Inline stylesheets with the style tag
We can style paths and shapes in SVGs by defining a style tag, and writing our styling code between the <style /> tags. The style tags must be in between a tag. The styles selectors in the <style /> tag can be a class selector or a tag selector just like in HTML/CSS.
Example
<svg width="500px" height="500px">
<defs>
<style>
circle {
fill: orangered;
}
.path-1 {
fill: green;
stroke: palevioletred;
stroke-width: 4px;
}
</style>
</defs>
<path d="M 10,60 40,30 50,50 60,30 70,80" />
<circle cy="100" cx="200" r="30" />
</svg>
Here, we have styles defined in the <style /> tag. Class selector path-1 and an element selector circle.
The path defines a class attribute with a value of path-1. This will style it with the styling at .path-1. It will be filled with a green color, a stroke outline of palevioletred with a width of 4px wide.
The path has no styling but will be affected by the circle element selector in the <style />. So it will be filled with an orange-red color.
External stylesheets
This involves setting our SVG styling in external files in .css extension i.e., external stylesheets, similar to CSS.
We can use our styling code above and put it in the svg-stylesheet.css file:
/* svg-stylesheet.css */
circle {
fill: orangered;
}
.path-1 {
fill: green;
stroke: palevioletred;
stroke-width: 4px;
}
And then reference it from the SVG in its XML tag:
<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg width="500px" height="500px">
<path d="M 10,60 40,30 50,50 60,30 70,80" />
<circle cy="100" cx="200" r="30" />
</svg>
Conclusion
We saw ways through which we can manipulate SVG styling via CSS. We started by demonstrating how CSS affects SVGs because SVGs are HTML/XML tags. Then, we proceeded to show ways of manipulating SVG styling with CSS.
