Are there any plans to add CSS filter to div's/img elements in the near future? We were trying to add some different effects the user is allowed to add to their images, but none of them seem to work with prince at the moment. A list of the possible filters supported in current browsers is up at: https://developer.mozilla.org/en-US/docs/Web/CSS/filter. Even if support for all of them wasn't added, it would be nice to have support for some of them at least.

Do svg filters work?

Prince does not support filters in SVG or CSS yet. We are planning to add support for filters in the future. Filters do require rasterising SVG and CSS content and embedding it in the PDF as bitmap images, which can make the PDF file bigger and potentially decrease the print output quality.

If you only wanted to apply filters to non-SVG <img> elements, that would be an easier place to start.

Alright, I am playing around with trying to reproduce css filter effects using ImageMagick. The results have not been great though since the css filter seems to be working under entirely different definitions of the same effects ImageMagick implements.

Which CSS filter effects do you wish to use?

Drop shadow is definitely the most important and hardest to reproduce using a work around. Blur and Opacity are probably the next most important. But I will use any filter effects that are implemented since more options are always nice.

Hello, I just wanted to see whether you had a roadmap and timescale for implementation of filters as yet?

For my projects filters are critical - among other things to grayscale images.

Thanks

No timescale yet, but we are investigating rasterisation which is a requirement for filters.

Thanks for the quick reply.

Are there any alternative approaches you can recommend in the meantime? Among other things I need a simple way to grayscale and tint images, potentially at scale, within html documents generated through PHP.

ImageMagick, perhaps?

Just throwing in a little more support for this. We've had a couple users ask for this now in our support channel. http://www.imgix.com/ might be another option until it's Baked In™.

Hey mikeday,

we are evaluating prince and would love to use it, but need filters on bitmap images (so no vectors) placed in svg <image>.


We use following filters:

<filter color-interpolation-filters="sRGB">
  <!-- sepia -->
  <feColorMatrix type="matrix" values="0.250 0.669 0.090 0 0 0.220 0.600 0.130 0 0 0.280 0.420 0.111 0 0  0.000 0.000 0.000 1 0"></feColorMatrix>

  <! -- black & white -->
  <feColorMatrix type="saturate" values="0"></feColorMatrix>

  <! -- brightness -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1"></feFuncR>
    <feFuncG type="linear" slope="1"></feFuncG>
    <feFuncB type="linear" slope="1"></feFuncB> 
  </feComponentTransfer>

  <! -- contrast -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1" intercept="0"></feFuncR>
    <feFuncG type="linear" slope="1" intercept="0"></feFuncG>
    <feFuncB type="linear" slope="1" intercept="0"></feFuncB>
  </feComponentTransfer>

</filter>

If you have any questions or there is a way I can help you, please let me know.

Thanks
Marcel

Our latest builds support CSS filters on bitmap images, but not full SVG filters yet, they will come later.

Good to hear. Thanks. How can I be notified / see when this is implemented? Do you have a public roadmap / feature backlog?

We have a development roadmap, and you will receive an email when we update this forum thread to announce a new release.

Nice, many thanks! Looking forward using prince professional once this feature is shipped.

It would be nice if the css filters cascade. For example in my case I have a div wrapping a div wrapping a img. A bunch of the filters are actually applied on one of the two wrapper divs. I had to do this in order to be able to stack and control the order the filters were applied in (ie: drop-shadow + gray-scale. The drop-shadow has to be on the wrapper or else you get colored drop-shadow on a gray scale image). Doing a bit of quick testing it appears the filters are only supported directly on the img element.

We will take a look at this.

Following for updates

Hey Mike,

very happy to see that it's one of the next items in the pipeline. Any schedule yet? Looking so much forward to this feature.

Thanks a lot!
Marcel

It may be April Fools Day, but we have really released a Prince latest build with initial support for SVG filters!

There are limitations: some filters are not supported yet, SVG filters only apply to SVG elements and cannot be applied to other elements, and there are other issues we still need to fix.

But the existing support is already good enough to create some neat effects, give it a try!

Hey Mike,

thank you very much! I tested the latest build and the filters seem to work at the first glance!

As mentioned earlier we use those filters:

<filter color-interpolation-filters="sRGB">
  <!-- sepia -->
  <feColorMatrix type="matrix" values="0.250 0.669 0.090 0 0 0.220 0.600 0.130 0 0 0.280 0.420 0.111 0 0  0.000 0.000 0.000 1 0"></feColorMatrix>

  <! -- black & white -->
  <feColorMatrix type="saturate" values="0"></feColorMatrix>

  <! -- brightness -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1"></feFuncR>
    <feFuncG type="linear" slope="1"></feFuncG>
    <feFuncB type="linear" slope="1"></feFuncB> 
  </feComponentTransfer>

  <! -- contrast -->
  <feComponentTransfer>
    <feFuncR type="linear" slope="1" intercept="0"></feFuncR>
    <feFuncG type="linear" slope="1" intercept="0"></feFuncG>
    <feFuncB type="linear" slope="1" intercept="0"></feFuncB>
  </feComponentTransfer>

</filter>

Thanks again and have a nice day!
Marcel

Any thoughts on when support for the blur filter on images will appear in a minor release? I'm using DocRaptor which does not support the intermediate latest builds.

Filters won't be available in Prince 10, but perhaps DocRaptor can be convinced to offer a new version soon in the lead up to Prince 11.

Prince 11 is now out!

It looks like filters applied to div's with img elements underneath still doesn't work. Is there an update on when we can expect that sort of functionality?

Edit: Ignore this post

Edited 1 Mar 2017 by daneren2005

It looks like the layering sort of works. I am noticing some issues which may be symptoms of a larger problem:

1) <div style="filter..."><div><svg><image></svg></div></div> doesn't render but if I take out the empty inner div it does. This is partially why I thought it wasn't working in an earlier post. I definitely see some weird edge cases where the filter is not getting applied which makes me worry about how well it handles more complicated filter setups. For example in my case I have 3 divs with different filters going and an img underneath each one in order to get some layered effects going.
2) Chrome does Drop-shadow as "filter: drop-shadow(rgb(255, 0, 0) 9.6px 9.6px 6.4px)" but FF does it as "filter: drop-shadow(9.6px 9.6px 6.4px rgb(255, 0, 0))". It is stupid that they are different, but Prince detects the Drop shadow for FF but not for Chrome.

Edit: This is using the latest stable release of 11.1

Edited 1 Mar 2017 by daneren2005

Can you post a full example for the layering issue? It worked in a simple example I made.

Both Firefox 45 and Chromium 55 on my system (now?) allow the color as the first argument of drop-shadow. I have not seen that before. Prince supports the syntax in the Filter Effects Module Level 1.

I attached a debug file which works. I have also attached one where nothing is different except the rgb value is switched in the drop-shadow filter like Chrome puts it. I am now unable to reproduce the layering issue, so it must have been related to the Chrome issue or something else and I just wasn't realizing it.

1. debug_chrome.html‎ 1.1 kB
2. debug_works.html‎ 1.1 kB