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.

SVG Editor Interface

How to Style SVG Elements

There are multiple ways to add styles to SVG elements. Let’s explore them:

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:

Styled SVG Rectangle
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:

Rotated and Styled SVG Rectangle
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.

Example of styled SVG rectangle
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.

Example of Grouped SVG Elements

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.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail