Switching Color Modes in SVG

Common practice with showing a serie of logos in an attractive way in a webpage, is to present gray scaled – or monochrome versions, to neutralize the (potentially clashing) distracting colors from the images. One way of doing this could be to manipulate the full-color images in photo-editing software and save copies in gray scaled versions. An even quicker way would be to use css– or svg-filters.

With CSS-filters one is limited to the grayscale- or sepia filters, which will be sufficient in most use-cases. SVG filters are more powerful and have more options, while being more complex in a syntax which may have to be studied to be used well (in a more customized way).

Alternative approach with SVG

In this article I like to explore a different workflow, and suggest an alternative approach. It won’t be harder to accomplish but it will be more work, and harder to maintain. But it can be better suitable for let’s say a logo gallery for a graphic designer on a portpolio website, where demands on (the quality and appearance of) the images will be of more outspoken nature, because graphic designers are of a separate species; they have ink flowing through their veins.

Graphic designers are of a separate species; they have ink flowing through their veins

In using the currentColor keyword in CSS combined with opacity for logos we can get monochrome images in just one color but keep the possibility to have gradations in tonality, like it is done at Logomoon. Data-attributes1 (for values of colors and opacity on SVG shapes) combined with javaScript can make switching between the monochrome-and full-color mode happen by the click of a button.

The flexibility of the CSS keyword currentColor can be used here to our advantage; currentColor picks up whatever value for color is set on – or is inherited by – the element in CSS, and behaves in that way like a variable. Whenever the color of the monochrome images needs to be changed, this can be done by editing just one value in the CSS.


<polygon
  opacity="0.56"
  fill="currentColor"
  data-color="#E44D26"
  data-opacity="0.56"
  points="107.644,470.877 74.633,100.62 437.367,100.62 404.321,470.819 255.778,512"/>

See the Pen Monochrome SVG Logo Gallery by Bram de Haan (@atelierbram) on CodePen.

How this color-mode switching works in the demo: the default mode is monochrome, and the values for fill are stored in custom data-attributes.

DIY tinkering

One trick to get the right values for opacity is to have another instance of your SVG image temporarily on the page, or a copy of the whole page, but now with using CSS-filter grayscale, like -webkit-filter: grayscale(1);. When setting a background-color: hsl(0,0%,0%) on the page and moving the last value for lightness up and down with the arrow keys of your keyboard within DevTools, in comparison to the grayness of the SVG-image, this will give you the right number, when you subtract it from 100.

Notes

  1. It seems data-* attributes on SVG elements are officially supported in the current draft of SVG2. The current spec allows the xml methods of custom name-spaces, but these are hard to handle and a pain to use for targeting elements with javaScript. As far as I know all major browsers tolerate data-attributes in SVG.

Resources

This article was also published on Codepen