An issue in Preview

[RbnJrg]

Originally Posted by KevinH

So this is a bit of a nasty piece of code that should help improve Sigil!

Why nasty piece of code Kevin? But I have more for you and this time maybe it can help you to find the solution. Open the epub I attach; you'll see two others way to apply svg filters under epub.

The first way is by including the filter in body, as I do for the first image. Now, with the filter included in body, if I change the color there, then the change operates at once. Of course, this is not an economic way to include a svg filter because you need to include in every .xhtml file where you want to apply it.

The second way in by including it in the css stylesheet, inside a class. In this case, I created a class named ".myCustomFilter" and I defined the filter there. But when I apply the class, the filter is not working (watch the second image).

In the third image you see another svg filter, that I defined also in the css stylesheet and that filter works!! I don't know why one filter works and the other doesn't (they should work both). By in this case I think is not a bug of Sigil because I can't see the metal effect filter applied in no place (Chrome, Firefox, Thorium, etc.) when is defined in the css.

[RbnJrg]

Originally Posted by DiapDealer

It's probably not a very satisfying workaround, but this all seems to work (including in an AppImage built with Qt 6.8.2) if you simply embed the svg filter define (from Metal_Filter.svg) in the xhtml of Section0001.xhtml rather than defining it in a separate file.

That is what I said in my previous post to Kevin. If you want to apply the filter to all .xhtml files in an epub, then you need to write the code many times, when in the svg file you only write once. And all programs seem to honor this way to define the filter. The other way to define the filter is including it in the .css stylesheet, but this particular code is not being supported.

[KevinH]

Why not add filter=url(./MetalFilter.svg#metal) as one of the parameters in the Image1.svg file?

[RbnJrg]

Originally Posted by KevinH

Why not add filter=url(./MetalFilter.svg#metal) as one of the parameters in the Image1.svg file?

When you use the filter attribute directly on an SVG file, the rendering engine attempts to apply the filter as part of the rendering process.

The filter's SourceGraphic and SourceAlpha refer to the contents of the file where the filter is defined. Since the Metal_Filter.svg file only contains the filter definition and no shapes (such as a <path>), the SourceGraphic is empty. It's a "blind" filter that doesn't have a source image to operate on. Therefore, it doesn't generate any results.

For it to work, the filter and the shape must be in the same SVG file. You should need something like:

Spoiler:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    width="188"
    height="188.00005"
    viewBox="0 0 188 188.00005"
    version="1.1"
    id="svg135"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:svg="http://www.w3.org/2000/svg">

    <defs id="defs132">
        <filter id="metal">
            <feGaussianBlur stdDeviation="3" result="blur"/>
            <feSpecularLighting result="spec" in="blur" specularExponent="35" lighting-color="#ccc">
                <fePointLight x="75" y="100" z="200"/>
            </feSpecularLighting>
            <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="3d_efect"/>
            <feFlood flood-color="#ffff00" result="solid_color"/>
            <feComposite in="solid_color" in2="SourceAlpha" operator="in" result="clipped_color"/>
            <feBlend in="clipped_color" in2="3d_efect" mode="overlay"/>
        </filter>
    </defs>

    <g
        id="layer1"
        transform="translate(-324.31148,-460.62293)">
        <path
            fill="#333" 
            filter="url(#metal)"
            d="m 412.96619,646.87295 c -0.26404,-0.9625 -0.76642,-3.55 -1.1164,-5.75 -0.86094,-5.41195 -3.17588,-12.59078 -6.77181,-21 -10.64158,-24.88573 -36.7796,-48.35304 -63.2665,-56.80213 -3.89031,-1.24098 -15.30727,-3.69787 -17.18366,-3.69787 -0.17399,0 -0.31634,-2.25 -0.31634,-5 0,-2.75 0.14235,-5 0.31634,-5 1.87639,0 13.29335,-2.45689 17.18366,-3.69787 26.4869,-8.44909 52.62492,-31.9164 63.2665,-56.80213 3.59593,-8.40922 5.91087,-15.58805 6.77181,-21 1.19712,-7.52515 1.17545,-7.5 6.46169,-7.5 5.27947,0 5.22223,-0.066 6.5019,7.5 0.92965,5.49656 5.6437,18.87463 8.98865,25.50907 11.38498,22.58113 34.15014,42.636 58.27731,51.33916 3.93185,1.41829 10.09256,3.09135 13.69048,3.7179 l 6.54166,1.13918 v 4.89734 c 0,2.69354 -0.18541,4.89735 -0.41203,4.89735 -0.22662,0 -3.74385,0.63748 -7.81606,1.41662 -27.84018,5.32671 -56.78273,27.80094 -70.28136,54.57431 -3.34495,6.63444 -8.059,20.01251 -8.98865,25.50907 -1.27967,7.56603 -1.22243,7.5 -6.5019,7.5 -3.784,0 -4.97191,-0.38891 -5.34529,-1.75 z"
            id="path1" />
    </g>
</svg>

On the other hand, with the <img> tag, the rendering engine FIRST loads Image1.svg and renders it (so, at this point, the engine already knows the shape and alpha channel of the image). Then, the css filter property tells the engine to take this already rendered image and apply the filter. The filter's SourceGraphic refers to this rendered image and now it works because the filter has a "canvas" to work on.

[KevinH]

This is so strange. I can not see why the .myCustomFilter class version fails and the other one works.

Your original example when unpacked from the epub will not work straight up in Safari either.

So my guess this style attribute filter approach will only work with a limited number of web browsers as well as limited epub3 ebook e-readers.

[KevinH]

Okay, by sheer trial and error, after clearing the web cache, if I use setUrl(QUrl("")); on the QWebEngineView it seems to finally force a full reload of everything.

I need to clean this up a bit and I will commit it to master tomorrow. With these changes your original demo epub will work properly with Qt 6.9.1 and later.

FYI - we still have no plans to update our Windows, AppImage, and MacOS builds to Qt 6.9.1 for the next release as there are still too many outstanding bugs in Qt 6.9.1.

[RbnJrg]

Originally Posted by KevinH

This is so strange. I can not see why the .myCustomFilter class version fails and the other one works.

I also haven't been able to find the reason why one filter works and the other doesn't. I tried applying it to .png images (filters work on any type of image: SVG, PNG, JPG, etc.) and got the same result: one filter is applied and the other isn't when the filter is defined in a .css sheet.

Your original example when unpacked from the epub will not work straight up in Safari either.

Yes, Safari since always has had serious issues with rendering SVG filters. So I'm not surprised this filter doesn't work there.

So my guess this style attribute filter approach will only work with a limited number of web browsers as well as limited epub3 ebook e-readers.

Fortunately, the vast majority of epub3 e-readers are based on Readium/Webkit and so far seem to support this kind of complex SVG filters quite well.

[RbnJrg]

Originally Posted by KevinH

Okay, by sheer trial and error, after clearing the web cache, if I use setUrl(QUrl("")); on the QWebEngineView it seems to finally force a full reload of everything.

I need to clean this up a bit and I will commit it to master tomorrow. With these changes your original demo epub will work properly with Qt 6.9.1 and later.

Great, thank you!!

FYI - we still have no plans to update our Windows, AppImage, and MacOS builds to Qt 6.9.1 for the next release as there are still too many outstanding bugs in Qt 6.9.1.

No problem That is ok for me.

[KevinH]

Note, all e-readers on iOS devices must use Safari's webkit (even Chrome and Firefox browsers use the Safari Webkit) on iOS, and that includes Books as well. So none of them will support this in e-readers on iOS as far as I can tell.

[KevinH]

FWIW, people filed a bug report in Chrome to support external urls for filters way back in 2012 and it was not until last fall (2024) that this was fixed in a released version of chrome. It took them over 12 years to implement this.

Qt 6.8.x is based on Chrome 130 series whereas I think Qt's 6.9.x series is based on Chrome 138 series or later.

So support for this feature will be really hit and miss depending on which version of chrome's blink was used for a specific e-readers firmware, or if they are running on iOS or not. So use these features at your own risk as support is not widespread.

[KevinH]

Okay, I have pushed the final set of changes needed to support using url's in style attribute filter properties to master.

I have also updated the base for translations since so much code was added, removed, or modified.

Note: With a fresh build from master, the first testcase posted by RbnJrg in this thread should now work (without a need to switch tabs) in Qt 6.9.1 based systems.

Even with this change in place. Sigil will still *not* show the style flood color in any version of Sigil based on Qt 6.8.2 or earlier, including our forthcoming release. ie. it will not work on AppImage, Windows, and MacOS versions of Sigil.

When the test case files are unpacked from the epub, even the very very latest Safari browser will NOT work. So beware of using these techniques if you want your epub to work on iOS based or even older chrome based e-readers, as the fix for chrome to handle this case was not completed until last August (2024) and not very many Qt versions include it as of yet.