Styling SVG Images with CSS

Introduction

Scalable Vector Graphics (SVG) are a powerful way to display graphics on the web. Unlike raster images (like JPG or PNG), SVGs are defined using vector data, meaning they can be scaled infinitely without losing quality. While SVG offers great flexibility, styling them with CSS can sometimes be tricky, especially for beginners. This tutorial will guide you through the common techniques for modifying the appearance of SVG images using CSS.

Understanding SVG Structure

Before diving into styling, it’s important to understand the basic structure of an SVG file. An SVG file is essentially an XML document containing shapes, paths, and other visual elements. These elements have attributes that define their appearance, such as fill (the color inside a shape) and stroke (the color of the outline).

A simple SVG might look like this:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

This code creates a red circle with a radius of 40 pixels, centered at coordinates (50, 50) within a 100×100 SVG canvas.

Styling SVG Elements with CSS

You can style SVG elements using CSS just like you would with HTML elements. There are a few key methods:

1. Direct CSS Targeting:

If you include the SVG directly in your HTML, you can target its elements using CSS selectors. For example, if your SVG has the following structure:

<img src="logo.svg" alt="Logo" class="logo-img">

And the logo.svg file contains a path with a default fill color, you can override it using CSS:

.logo-img path {
  fill: #000; /* Change fill color to black */
}

This CSS rule will target all path elements within the image with the class logo-img and set their fill color to black.

2. Using currentColor

The currentColor keyword is a powerful tool for dynamically coloring SVGs. It adopts the value of the color property of the element on which it’s used or its parent.

First, modify your SVG to use fill="currentColor" on the elements you want to style:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="currentColor" />
</svg>

Then, in your CSS, set the color property of the SVG element or its parent:

.svg-container {
  color: blue;
}

The circle will now be colored blue. This method is especially useful for icons that need to match the surrounding text color.

3. Using CSS Variables (Custom Properties)

CSS variables offer another dynamic styling approach. Define a variable in your CSS:

:root {
  --svg-fill-color: green;
}

Then, use that variable within your SVG (you may need to inline the SVG for this to work effectively) or within a CSS rule targeting SVG elements:

<svg width="100" height="100" style="fill: var(--svg-fill-color);">
  <circle cx="50" cy="50" r="40"  />
</svg>

Or, targeting elements within the SVG:

.svg-element {
    fill: var(--svg-fill-color);
}

Now, you can easily change the fill color of the SVG by modifying the value of the --svg-fill-color variable.

4. Using filter property for simple color inversions

For quick color changes, the filter property provides a shortcut:

.logo-img {
  filter: invert(1); /* Inverts the colors */
}

This will invert all the colors in the SVG. You can use other filter functions for more complex effects.

Considerations

• Inline vs. External SVGs: Styling SVGs is generally easier when they are inlined directly into your HTML. When using external SVG files (like through an <img> tag), some browsers may restrict the application of certain CSS rules.
• Specificity: Pay attention to CSS specificity when styling SVGs. Ensure your CSS rules are specific enough to override any default styles defined within the SVG file.
• Browser Compatibility: While most modern browsers support SVG styling, it’s always a good idea to test your code in multiple browsers to ensure consistent rendering.