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

SVG Sepia filter effect: mid-tones only – Photoshop

Could you please help me finding out how can I achieve the Sepia tone on the link bellow using SVG?

My Sepia Tone made with Photoshop’s Color Balance

I’ve tried the following code:

<svg class="defs-only">
  <filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%">
    <feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" />
  </filter>
</svg>

CSS:

img{
    -webkit-filter: url(#monochrome);
    filter:  url(#monochrome);
}

But the feColorMatrix Sepia Tone that I get is very different and appears not to be only affecting the mid tones as it does on Photoshop.

Note: I can’t use canvas.

Tags:

2

Answers


  1. 0

    I don’t know if you see this, but a feColorMatrix generator exists : https://codepen.io/mullany/pen/qJCDk

    You just have to change the image by yours :

    <image x="0" y="0" width="590" height="400" filter="url(#f1)" xlink:href="[YOUR IMAGE]"/>

    You can play with all the parameters like in Photoshop.
    Enjoy (ﾉ≧∀≦)ﾉ

    Login or Signup to reply.
  2. 0

    Well first of all, that’s not a proper sepia filter. It’s only using the red channel as input, so you’re losing about a third of your luminosity off the bat. The “official” W3C sepia filter is:

       <feColorMatrix type="matrix"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

    That gives you this result:

    enter image description here

    And if you just want to process the mid-tones then you need to pull the mid-tones out and process them separately. That looks like this:

    <filter id="mid-sepia" color-interpolation-filters="sRGB">
  <feColorMatrix type="luminanceToAlpha"/>
  <feComponentTransfer >
    <feFuncA type="table" tableValues="0 .2 0.5 1 1 1 0.5 .2 0"/>
  </feComponentTransfer>
 <feComposite operator="in" in="SourceGraphic"/>
   <feColorMatrix type="matrix" result="sepia-clip"
  values="0.39 0.769 0.189 0  0 
          0.349 0.686 0.168 0  0  
          0.272 0.534 0.131 0  0 
            0  0 0 1  0" />

  <feColorMatrix in="SourceGraphic" type="matrix" result="gscale"
                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" />
  <feComposite operator="over" in="sepia-clip" in2="gscale"/>
</filter>

    And gives you something that looks like this:

    enter image description here

    The magic here is the settings for feFuncA – which controls how wide the mid-tone selection is. “0 .2 0.5 1 1 1 0.5 .2 0” is a pretty wide selection – so if you want a narrower range given the sepia treatment, you might want to use something like “0 0 0 0.2 0.5 1 0.5 0.2 0 0 0” – play with it until you have something you like.

    http://codepen.io/mullany/pen/rjdYre?editors=1000#

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

Back To Top
Search