Using CSS with SVG is a lot like using it with HTML. We can apply CSS using the style attribute of an SVG element, group CSS within a document using the <styLe> element, or link to an external stylesheet. The pros and cons of each method are the same as when using CSS with HTML.
1. Using the style Attribute
Here’s a simple SVG document where the code creates a black circle:
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 200 200″ enable-background=”new 0 0 200 200″>
<circle cx=”101.3″ cy=”96.8″ r=”79.6″ />
</svg>
The image below shows how that code renders in a browser.
Let’s give our circle a pink fill using CSS and the style attribute:
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 200 200″ enable-background=”new 0 0 200 200″>
<circle cx=”101.3″ cy=”96.8″=”79.6″ style=”fill: #f9f” />
</svg>
The effect of this is shown below.
Here’s one difference between using CSS with HTML and using it with SVG: property names. Many of the CSS properties that we use with HTML documents aren’t compatible with SVG, and vice versa. We’ll come back to this point later in the chapter.
Using the style attribute isn’t the best way to use CSS, of course. Doing so limits the ability to reuse those styles across multiple elements or documents. Instead, we should use inline or linked CSS.
2. Embedding CSS in SVG Documents
Instead of using the style attribute, we can use the <style> element:
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 200 200″ enable-background=”new 0 0 200 200″>
<style type=”text/css”> circle {
fill: #0c0;
}
</style>
<circle cx=”101.3″ cy=”96.8″ r=”79.6″ />
</svg>
Embedding CSS in an SVG document lets us reuse those styles for multiple elements within
the same document, but it prevents that CSS from being shared across multiple documents. That’s fine for logos and icons. But if you’re creating something like a library of chart styles, an external CSS file is a better bet.
Using a standard text editor, you can also add CSS to SVG images created with software such as Sketch, Inkscape, or Illustrator. Doing so won’t affect your ability to edit the image with the drawing application, but if you edit the file using image software, the application may rewrite or remove your CSS.
3. Linking from SVG to an External CSS File
As with HTML, linking to an external CSS file makes it possible to share styles across several SVG documents. To link an external CSS file, add <? xmL-styLesheet ?> to the beginning of your SVG file:
<?xml version=”1.0″ encoding=”utf-8″?>
<?xml-stylesheet href=”style.css” type=”text/css”?>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 200 200″ enable-background=”new 0 0 200 200″>
<circle cx=”101.3″ cy=”96.8″ r=”79.6″ />
</svg>
4. Using the <link> Element
Alternatively, use the HTML <Link> element. If you do use this method, you’ll need to include the xmLns namespace attribute, as shown below:
<link href=”style.css” type=”text/css” rel=”stylesheet”
xmlns=”http://www.w3.org/1999/xhtml” />
The <Link> element isn’t an SVG element. It belongs to HTML and XHTML. XHTML is a variant of HTML that’s parsed according to the rules of XML markup. According to the rules of XML, we can borrow elements and their behavior from other XML dialects, such as XHTML. To do so, however, we need to tell the browser which namespace the element belongs to using the xmlns attribute.
5. Using @import
We can also link to an external stylesheet by using @import inside <styLe> and </styLe> tags:
<style type=”text/css”>
@import(‘style.css’);
</style>
This method functions similarly to the <Link> method.
6. SVG and the <img> Element: Limitations
Linking from SVG files to external assets, including CSS files, doesn’t work with the <img> element. This is a security limitation of the <img> element that’s baked into browsers.
If you’d like to use linked CSS with your SVG images, you’ll need to do either of these two things:
- use the <styLe> element in your SVG document to place your CSS inline
- use an <iframe> or <object> element (see note below)
In general, you should use <iframe> over <object> . However, the <object> element can be the child of an <a> element, while <iframe> can’t. Using <iframe> or <object> also makes the SVG document tree available to the parent document’s document tree. This means that we can use JavaScript to interact with it (for example, with document.querySelector(‘iframe’).contentDocument ).
7. Inline SVG and External Assets
When adding SVG to HTML, the browser won’t load external assets referenced by the SVG document. We can, however, link to CSS for our SVG document from the <head> of our HTML document:
<head>
<link href=”svg.css” type=”text/css” rel=”stylesheet” />
</head>
SVG elements within HTML documents also become part of the HTML document tree. If you’re using inline SVG, it’s perfectly fine to combine your HTML-related and SVG-related CSS in the same stylesheet.
Source: Brown Tiffany B (2021), CSS , SitePoint; 3rd edition.