Photoshop Question posted in
The official user guide can be found here.

How to mimic PS Gradient Map effect with SVG feColorMatrix? – Photoshop

I’ve been struggling to understand SVG feColorMatrix equation.

I’m more home with Photoshop than SVG scripting. In Photoshop there is “Gradient Map” adjustment layer for applying your gradient to photo:

enter image description here

Some how I think that should be also achieved with SVG color matrix, but how?

Here’s a simple codepen with svg filter above and desired Photoshop output below.

I have made this filter:

<filter id="colored">
  <feColorMatrix type="matrix" in="SourceGraphic"
    values="0.3334 0      0      0 0
            0      0.8196 0      0 0
            0      0      0.6471 0 0
            0      0      0      1 0 "/>
</filter>

.. but this does not do the job:

enter image description here

All hints welcome!

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Yeah, I think I came pretty close by combining two filters:

    <filter id="colors">
  <feColorMatrix result="A" in="SourceGraphic" type="matrix"
    values="0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0.3333 0.3333 0.3333 0 0
            0      0      0      1 0 "/>
  </feColorMatrix>
  <feColorMatrix color-interpolation-filters="sRGB" in="A" type="matrix" 
    values="0.3334 0      0      0 0
            0      0.8196 0      0 0
            0      0      0.6471 0 0
            0      0      0      1 0 "/>         
  </feColorMatrix>
</filter>

    enter image description here

    See codepen


  2. 0

    The example here is not working, but the code is explained:
    http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/

    Basically, what you seek is this:

    <svg version="1.1" width="0" height="0">
    <filter id="filter-1438364318222">
        <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
        <feComponentTransfer color-interpolation-filters="sRGB">
            <feFuncR type="table" tableValues="0 0.3333333333333333"></feFuncR>
            <feFuncG type="table" tableValues="0 0.8196078431372549"></feFuncG>
            <feFuncB type="table" tableValues="0 0.6470588235294118"></feFuncB>
            <feFuncA type="table" tableValues="1 1"></feFuncA>
        </feComponentTransfer>
    </filter>
</svg>

    0.3333 is 85/255 and so on…you get the idea…

    Here is a codepen with the end result: http://codepen.io/anon/pen/QbzEXV

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search