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

real multiply effect with svg? – Photoshop

I was wondering if there was a way to apply a real multiply effect on a svg element ? I tried various solution found here but it seems like the multiply effect in svg is applyied on the object itself not on the elements behind like photoshop does. Is there a way to do it in svg or with any other method ?

Here is the code : http://jsfiddle.net/pool4/H7GLE/

    <div id="bg">
    <svg id="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 55.7" xml:space="preserve">
        <filter id="multiply">
            <feBlend mode="multiply"/>
        </filter>
        <g>...
    </svg>
    </div>

#logo:hover {
        filter:url(#multiply);
}
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Ok so I found 2 different ways to do it thanks for Paulie_D.

    1) Pixastic : http://www.pixastic.com/lib/

    it's a javascript library allowing the use of blend mode. However it isn't compatible with IE however according to the doc IE has a way to it with some native filters.

    2) In my case I just wanted to see the lines of my file, thus by using photoshop channels I made a alpha mosaic of the wall.

    I dont really know which one is the more optimized option but I went for the second option as it made my background lighter due to the mosaic (arround 40kb vs 200kb before).

    Thanks a lot to Paulie, I really do hope that in the future they'll implement a multiply effect in browsers.


  2. 0

    It is not currently possible to multiply an SVG shape with a CSS-defined background (except for the very very new compositing and blending stuff which is only available behind a flag to the best of my knowledge.)

    It is possible to get a multiply effect with SVG filters, but you have to follow SVG filter conventions as well as be aware of the subset of filter capabilities that are implemented in today’s browsers. It can be challening to shoe-horn a properly sized filter effect into an existing SVG file that’s combined with CSS because of unit system differences & quirks.

    This is a version of your graphic done entirely within an SVG inline element that shows that it’s possible to get a multiply effect but if it’s all done within the SVG universe. 

     <defs>
    <filter id="multiply">
       <feImage xlink:href="http://imageshack.com/a/img21/7676/y2hg.jpg" result="bg"/> 
       <feBlend mode="multiply" in="SourceGraphic" in2="bg"/>
    </filter>
 </defs>
   <g filter="url(#multiply)"> etc.

    FWIW: the interactions between CSS and SVG unit systems as well as filter units make this challenging to size correctly.

    Login or Signup to reply.
  3. 0

    You will be able to do this with ‘mix-blend-mode’, when browsers implement the Compositing and Blending Level 1 specification.

    #logo:hover {
    mix-blend-mode: multiply;
}

    See fiddle.

    In Chrome Canary, enable the experimental web platform features flag (chrome://flags/#enable-experimental-web-platform-features), to see it working.

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

Back To Top
Search