1

For webshop purposes I would like to allow users to change product colors.

Let's take the next example...This is the product that consists of three other products where every product should be recolorable. So, I quess, I should create SVG element and change the fill of every product shown on image, via CSS.

Product

Thus, I thought I should create the image that consists of 6 layers, 2 for each product, as shown below. The below layer containing the original image and the overlay in Hue blend mode with some color.

Layers

Note: the selected colors should be as realistic as possible.

Then, every time user choose the new color, the svg element fill attribute changes.

So, how to achieve this? When it's done in the way described above, svg doesn't contain the elements for both layer, neither I can change the color of one of them

The exporting looks like this:

SVG export

The color is not realistic and the svg takes only second layer. What it be better if using Illustrator?

3 Answers 3

0

The problem is complex. Your attempt failed because taking the hue from a layered object doesn't change luminosity nor saturation. A little better single hue colorizing is possible with blending mode color. We can test it without programming in a program which knows blending modes. Here is an example in Inkscape.

enter image description here

In the left we have a BW photo of a pillow. The pillow was made of dark, but glossy red fabric. The photo was desaturated and it's tone range was adjusted in Photoshop with the curves tool to show well the glossiness.

In the middle we have a filled path. It's actually the same photo traced.

In the right the colored path is placed on the photo with blending mode = color. That mode takes the luminosity from the backdrop image, hue and saturation are taken from the top shape.

As well you could swap the places of the parts and use blending mode luminosity. The math of the most common blending modes is explained here: https://www.adobe.com/content/dam/acom/en/devnet/pdf/pdf_reference_archive/blend_modes.pdf

I used BW image only because the tracing is never exact, some red at the edges would be disturbing. The blending itself doesn't need a desaturated photo.

The color is absolutely right only at those areas of the photo which have nearly the same luminosity as the colored path. You cannot for ex. get rid of the glossiness if it was in the photo except by radically reducing the contrast. That unfortunately affects also the decorative stripe pattern.

One way to reduce contrast with blending modes is to place something non-disturbing below the photo and reduce its opacity:

enter image description here

The opacity of the photo is now 60%. The non-disturbing bottom object is, of course, a copy of the colored path.

Often blending mode multiply is used for colorizing. It doesn't make light areas washed, because it only darkens. The fully white areas of the photo will get the color of the colored path:

enter image description here

So, no washing with blending mode = multiply, but the apparent color is much darker than the color of the filled path.

The washed look of the light areas with blending mode color could be avoided if the blending took the chroma instead of saturation. That would easily cause clipping (=need of higher than 255 or negative RGB numbers) so it's never implemented in RGB color system.

Other ways:

In Photoshop one could easily get the wanted single hue colorizing with adjustment layers. Only add 2 of them. Brightness & Contrast or Levels layer which sets the luminosity to a good range and one Hue & Saturation layer which gives the right color. An example:

enter image description here

In the left there's the original quite dark red version. In the right there's a copy of it, but colored to light blue with adjustment layers.

That suggest to search adjustment layer equivalents in programming languages. Unfortunately my programming skills are so poor that I cannot write a proper example, but as a guess I suggest checking this:

https://www.w3schools.com/csSref/css3_pr_filter.asp

Warning: Making RGB colors of the products freely adjustable can easily produce versions which are out of the really available color range. Also many pigment colors are not at all displayable as RGB.

0

I have not tested this, but I would use a black and white version of the pillows to add shadows and use a blend mode multiply to add the color.

The SVG could just be the silhouette to mask the specific pillow.

background-blend-mode: multiply;

https://css-tricks.com/basics-css-blend-modes/

The problem is that a real image do not have only one specific hue, but has slight changes in tone.


But probably it is better to prepare different colored versions of the images and switch them.

0

Catalogue images are rarely svg files. I don’t think I have ever seen it to be honest, you certainly wouldn’t find it on retailer giants. They are mostly saved as jpeg files, optimised for the web. If I were you, I’d simply change the hue of the image in photoshop, to thereabouts, you could colourise it, and then save each variation. Then, you could just change image on hover or use a simple jquery show hide. You’ll save yourself half the work this way too.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.