How to Change the Color of an SVG Using the <img> tag

Introduction

SVGs have revolutionized the way we display images on the web, with their ability to scale and maintain resolution independence. However, changing the color of an SVG can be a challenge. In this blog post, we’ll explore a better approach to changing the color of an SVG using the tag, without losing the cache ability.

Changing SVG Color with Tag

One way to change the color of an SVG is by inlining the SVG html code and then applying CSS to it. However, this approach can lead to a loss of cache ability, which is not desirable. The better approach is to use the tag and change the color of the SVG by applying CSS to the parent container.

The tag allows us to reference the SVG file, which means that the browser can cache the file, making it faster to load. We can then apply CSS to the parent container, which will change the color of the SVG.

Here is an example of how to change the color of an SVG to orange (#F5B041) using the tag:

<div class="svg-container">
  <img src="icon.svg" alt="icon" />
</div>
.svg-container {
  filter: invert(70%) sepia(55%) saturate(697%) hue-rotate(334deg) brightness(109%) contrast(92%);
  transition: filter 0.5s;
}
.svg-container:hover {
  filter: invert(70%) sepia(55%) saturate(697%) hue-rotate(334deg) brightness(109%) contrast(92%)
    hue-rotate(30deg);
}

In the above example, we have applied the CSS filter property to the parent container of the tag. The filter CSS generated value is obtained using an online tool like https://isotropic.co/tool/hex-color-to-css-filter/. We have also added a hover effect to the CSS using the transition property.

Generating CSS Filter

When converting a color to a CSS filter, there is a possibility of conversion loss. Conversion loss refers to the difference between the original color and the color obtained after applying the CSS filter. To ensure a perfect result, the conversion loss needs to be minimized. Minimizing the conversion loss ensures that the color of the SVG remains true to the original color, even after applying the CSS filter.

To generate a CSS filter, you can use online tools like https://isotropic.co/tool/hex-color-to-css-filter/ or programmatically with NPM packages like https://www.npmjs.com/package/hex-to-css-filter.

Benefits of Changing SVG Color with Tag

There are several benefits of changing the color of an SVG using the tag. First, it ensures that we do not lose the cache ability, making the SVG faster to load. Additionally, it allows us to change the color of the SVG dynamically, without having to edit the SVG file. This makes it easier to maintain and update the SVG file.

Another benefit is that we can apply CSS filters to the parent container, which can change the color of the SVG in various ways. We can apply filters such as invert, grayscale, or sepia, to create different effects.

Optimizing SVG Files for Better Performance

SVG files can be optimized to ensure faster loading times and better performance on the web. One way to optimize SVG files is by using tools like SVGO (https://github.com/svg/svgo). SVGO is an open-source tool that optimizes SVG files by removing unnecessary code and reducing the file size.

SVGO can be used as a command-line tool or as a plugin in various build tools like Gulp, Grunt, and Webpack. Here is an example of how to use SVGO as a plugin in Gulp:

const gulp = require('gulp')
const svgo = require('gulp-svgo')

gulp.task('optimize-svg', () => gulp.src('src/**/*.svg').pipe(svgo()).pipe(gulp.dest('dist')))

In the above example, we have defined a Gulp task that optimizes SVG files using the gulp-svgo plugin. The plugin takes no options and removes unnecessary code from the SVG files.

By optimizing SVG files, we can ensure faster loading times and better performance on the web. This is especially important for websites that use a large number of SVG files.

Design Tokens

Design Tokens are a way to store design-related values like colors, typography, and spacing as variables. These variables can be used across different components and pages, ensuring consistency in design. The color palette used in the SVG can be converted into CSS filters and stored as design tokens.

By using design tokens, we can ensure consistency in design across different components and pages. We can also update the design easily by changing the variables in the design tokens. Here is an example of how to store design tokens for colors:

export const filters = {
  orange: 'invert(47%) sepia(2%) saturate(1158%) hue-rotate(207deg) brightness(91%) contrast(92%)',
  blue: 'invert(8%) sepia(6%) saturate(3443%) hue-rotate(220deg) brightness(99%) contrast(96%)',
}

We can define each color as a key-value pair in a JavaScript object and export the object as a constant. Each value should contain the CSS filter for the corresponding color.

We can then use these design tokens in our HTML and apply them to the parent container of the tag.

<div class="svg-container" style="filter: ${filters.orange}">
  <img src="icon.svg" alt="icon" />
</div>

By using design tokens, we can ensure that our code is more maintainable and easier to read.

Using Design Tokens in CSS-in-JS Libraries

We can use design tokens in CSS-in-JS libraries like Stitches.dev, Linaria.dev, and Styled Components. These libraries allow us to write CSS in JavaScript, making it easier to use design tokens.

Here is an example of how to use design tokens in Stitches.dev:

import { styled } from '@stitches/react'
import { filters } from './tokens'

const SVGContainer = styled('div', {
  filter: filters.orange,
})

In the above example, we have imported the filters design token and used it in the filter property of the SVGContainer component.

Here is an example of how to use design tokens in Linaria.dev:

import { css } from 'linaria'
import { filters } from './tokens'

const SVGContainer = css`
  filter: ${filters.orange};
`

In the above example, we have imported the filters design token and used it in the filter property of the SVGContainer component.

Here is an example of how to use design tokens in Styled Components:

import styled from 'styled-components'
import { filters } from './tokens'

const SVGContainer = styled.div`
  filter: ${filters.orange};
`

In the above example, we have imported the filters design token and used it in the filter property of the SVGContainer component.

Conclusion

In conclusion, changing the color of an SVG using the tag is a better approach as compared to inlining the SVG html code. It ensures that we do not lose the cache ability. Additionally, we can use CSS filters to change the color of an SVG dynamically. Minimizing the conversion loss ensures that the color of the SVG remains true to the original color, even after applying the CSS filter. We can also use design tokens to store the color palette used in the SVG as variables, ensuring consistency in design across different components and pages. By defining our design tokens in a JavaScript object, we can ensure that our code is more maintainable and easier to read. We can use CSS-in-JS libraries like Stitches.dev, Linaria.dev, and Styled Components to use design tokens in our CSS. This approach saves time and effort in maintaining the design of the website. We hope this blog post has been informative, and you are now ready to change the color of your SVGs like a pro!

Keep reading 💡

View all arrow