How to correctly recolor in Adobe Illustrator?

Question

I have an SVG ( http://www.feingeist.io/wp-content/uploads/2015/08/Polygon_grey.svg), which I want to recolor. Initially, I wanted to achieve this by using CSS function

background-blend-mode: luminosity;
background-color: #83b5da;

Unfortunately, this is not supported by quite a number of modern web browsers. The above CSS method would use the luminance information from the SVG and the color information of the CSS background parameter.

As this is not working with some browsers, I want to fall back by performing the color overlay in the SVG already. I already found the "Recolor Artwork" feature in Adobe Illustrator, but somehow I cannot achieve the desired effect. The final result (including the color overlay with #83b5da should look like this: http://www.feingeist.io/wp-content/uploads/2015/08/Header_Webseite_blau.jpg).

Any hints on how to accomplish the described goal are highly appreciated.

Answer 1

DISCLAIMER: this isn't really an answer to the question, more of an alternate approach to what the OP said he has already tried.

You could go with a CSS filter called hue-rotate. It works on a scale between 0 and 360 degrees. It looks something like this:

img {
  -webkit-filter: hue-rotate(90deg);
  filter: hue-rotate(90deg);
}

I'd suggest you play around with it, see what you can achieve. You can also combine filters for other effects, like so:

img {
    -webkit-filter: sepia(1) hue-rotate(200deg);
    filter: sepia(1) hue-rotate(200deg);
}

Browser support is pretty good, although everyone favourite isn't playing along, as usual: see can i use for more info. There is a polyfill though, should you decide to go ahead and use this approach, and need to support older browsers.

To get the hang of filters I'd recommend this CSS tricks article, which is my go-to reference if ever I need to refresh my memory. This website gives a more visual approach.

Answer 2

Since this question has sadly suffered from link rot by the time I write this, I might be barking up the wrong tree, since I can't see the artwork in question.

However, it sounds to me like you might be looking for the "Select -> Same -> Fill" function.

Using the DIRECT selection tool (to ignore any groups you have in the svg), select a path that has the colour you want to change throughout the artwork. "Select same fill", then adjust the colour as needed. Rinse, repeat.

PS. You could use the "text editor equivalent" instead: using search-replace in the SVG file itself, but making the changes interactively in illustrator gives you the opportunity to "use your eye", and also gives you valuable, immediate feedback.

Answer 3

As above this might be an option will cost you a little but a wonderful and well worth plug-in for Illustrator. Works better than the "recolor artwork" built-in to Illustrator. Check it. Hope this helps.

http://astutegraphics.com/software/phantasm/