There is a bug where an SVG doesn't inherit the opacity of its parent container div.

I have attached 3 examples:

no_opacity.html - this shows an SVG with no opacity applied, renders perfectly.

opacity.html - this shows an SVG with fill-opacity set at 50% on its groups (as recommended in this forum). However this shows up with hairlines both in the browser and the rendered PDF.

working.html - this shows the same svg as in no_opacity.html but with a 50% opacity applied to the parent div. Browsers render this perfectly (as a complete SVG with 50% opacity). However Prince doesn't apply the opacity to it at all in the PDF. This is the bug.

Can you please advise any workarounds or ways to get this SVG to render in the PDF at 50% opacity without the hairlines.

Thanks,
Rob

1. Prince_SVG_Opacity_Hairlines.zip‎ 8.1 kB ‎
   zip of example files mentioned in post

The rectangles in the SVG overlap, which is why there are darker lines in the output. If the rectangles are adjacent and do not overlap then it should be fine.

Prince does not yet support full opacity for arbitrary elements, although we may be able to fake it shortly via rasterising the SVG to a bitmap image once we have filter support.

Thanks for the reply Mike.

I've simplified the issue using an SVG where there is definitely no overlap. I haven't applied any opacity to this one (so it may in fact be another issue). However, there are some hairlines visible in the PDF but not in the browser.

1. Archive.zip‎ 7.1 kB

Ah that's frustrating; actually I see the hairlines in the browser as well, they come and go as the zoom level is increased.

Hey,

I am dealing with similar problem. What I am trying to achieve is to make entire group - element <g/> - partially transparent in the way it shows below:



I am able to get each element of <g/> tag transparent separately, but not as a group.

I have prepared simple example where I implemented 3 different ways of doing that for web browser. Two of those solutions are not supported by Prince, but the third one seems like its supported, but the result is buggy.

@mikeday - do you have any suggestion how to get Prince working for the following case?

1. print-svg.zip‎ 100.4 kB

Currently the only way to get this to work is to use the Prince latest builds and force rasterisation of the group by applying "filter: opacity(0.5)" or an SVG filter, as proper opacity on groups is not supported yet.

Hey Mike,

thanks a lot for you reply and effort. The latest build with implemented filter: opacity(...) works, and its already a huge step forward to what I am looking for.

However I would like to give some feedback/report of the feature:

- filter: opacity(0.5) works only for generating PDF, browser does not support this (recent Chrome)
- I found implementation of custom opacity filter, which works fine for both - webrowser, and generating PDF

  <filter id="constantOpacity">
   <feComponentTransfer>
     <!-- http://stackoverflow.com/questions/14386642/if-two-partially-opaque-shapes-overlap-can-i-show-only-one-shape-where-they-ove/14387859:  
          This transfer function leaves all alpha values of the unfiltered
          graphics that are lower than .5 at their original values.
          All higher alpha above will be changed to .5.
          These calculations are derived from the values in
          the tableValues attribute using linear interpolation. -->
     <feFuncA type="table" tableValues="0 .5 .5" />
   </feComponentTransfer>
 </filter>

  <g filter="url(#constantOpacity)">
    [expected transparent content]
  </g>

- I have a simple example of SVG file for which adding any kind of filter is causing Prince crash. (look at attached file)
- since we cant keep SVGs as vectors if filter is applied my question is if there is param to choose raster quality, in order to adjust it to stakeholders needs.

Thanks,

Michal

1. buggy-case.zip‎ 2.7 kB

There is a command-line argument --raster-dpi=300 (default value is 96). This will increase PDF output size by scaling up filtered images. We will investigate the crash.

Thanks.

We have released an updated latest build which fixes some scaling bugs affecting filters.