4

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.

  • If you've found any of the below to answer your question please mark it as the accepted answer. – DᴀʀᴛʜVᴀᴅᴇʀ May 31 '18 at 13:58
0

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.

  • Thanks for your comment on an alternate approach. But this approach would require a lot of trial an error to reach the desired color. In Adobe Illustrator I could also do some hue rotation, but this does not seem to be as straight-forward as replacing the color component by a certain color and retaining the luminance from the SVG. – Fabian Jäger Aug 13 '15 at 16:32
  • Welcome. I never said it would be easy :) But I'd thought I'd share, since this is a pure CSS approach, that might be useful for people who don't have AI, or don't want to use it. – PieBie Aug 14 '15 at 7:13
0

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.

-1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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