How can I control SVG color from a CSS variable?

Yes, you can control the color of an SVG using CSS variables. There are a few different methods, and the most appropriate one depends on how the SVG is implemented and what properties you want to control.

Here's a breakdown of the common approaches:

1. Inline SVG with `fill` or `stroke`:

If the SVG code is directly embedded in your HTML (inline SVG), you can target the SVG elements using CSS and set their `fill` or `stroke` properties to a CSS variable.

Example:

HTML:

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" class="my-circle"/>
</svg>

CSS:

:root {
  --my-svg-color: blue;
}

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

In this case, the circle's `fill` color is controlled by the `--my-svg-color` CSS variable. Changing the variable will update the color of the circle.

2. SVG as an `` tag source:

When using an SVG file as the `src` of an `<img>` tag, direct CSS styling is limited. You can't directly target elements within the SVG from your page's CSS. However, you can use CSS filters to manipulate the color.

Example:

CSS:

:root {
  --my-svg-color: #007bff; / Example Blue /
}

.svg-image {
  filter: var(--my-svg-filter);
}

/ Function to convert hex color to filter /
/ Credit: https://stackoverflow.com/a/48008937 /
function hexToFilter(hex) {
  hex = hex.replace('#', '');
  let r = parseInt(hex.substring(0, 2), 16);
  let g = parseInt(hex.substring(2, 4), 16);
  let b = parseInt(hex.substring(4, 6), 16);
  r /= 255;
  g /= 255;
  b /= 255;
  const k = [r, g, b];
  const lumR = 0.2126;
  const lumG = 0.7152;
  const lumB = 0.0722;
  const lum = lumR r + lumG g + lumB b;
  const S = 0;
  const L = 0;
  const filter = `grayscale(1) sepia(1) hue-rotate(${(-lum360)}) saturate(10) brightness(${1})`;
  return filter;
}

document.documentElement.style.setProperty('--my-svg-filter', hexToFilter('--my-svg-color'));

HTML:

<img src="my-image.svg" alt="SVG Image" class="svg-image">

3. SVG as a Background Image:

Similar to using an `<img>` tag, you can use an SVG as a background image. The same limitations regarding direct CSS targeting apply, making CSS filters the primary means of color manipulation.

4. Using JavaScript to Manipulate SVG Attributes:

Regardless of how the SVG is included, you can always use JavaScript to directly access and modify the attributes of the SVG elements. This is particularly useful when you need dynamic or complex color changes based on user interactions or other application state.

Example (using inline SVG):

HTML:

<svg width="100" height="100" id="mySvg">
  <circle cx="50" cy="50" r="40" id="myCircle"/>
</svg>

JavaScript:

document.addEventListener("DOMContentLoaded", function() {
  const circle = document.getElementById("myCircle");
  circle.setAttribute("fill", "var(--my-svg-color)");
});

Important Considerations:

- Accessibility: Ensure your color changes provide sufficient contrast for users with visual impairments.

- Specificity: Be mindful of CSS specificity. If your SVG styles are being overridden, use more specific selectors or the `!important` declaration (though sparingly).

- Browser Compatibility: CSS variables have excellent browser support. However, CSS filters and more advanced SVG features may have some compatibility issues with older browsers.

By understanding these methods, you can effectively control SVG colors using CSS variables and adapt the approach to fit your specific project requirements.

Learn more about this