Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different results with feImage #380

Closed
afdw opened this issue May 2, 2021 · 5 comments · Fixed by #720
Closed

Different results with feImage #380

afdw opened this issue May 2, 2021 · 5 comments · Fixed by #720

Comments

@afdw
Copy link

afdw commented May 2, 2021

Consider the following file:

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
    <defs>
        <filter id="filter-0" x="0%" y="0%" width="100%" height="100%">
            <feImage xlink:href="#compositing-group-0"/>
        </filter>
        <g id="compositing-group-0">
            <circle cx="10" cy="10" r="30"/>
        </g>
    </defs>
    <g filter="url(#filter-0)">
        <rect x="-25" y="-10" width="100" height="30"/>
    </g>
</svg>

The results are:

resvg rsvg Chrome, Inkscape
re r ink

Who is right here? I do not seem to understand the SVG specification on how all these coordinates work.

Also, removing the x="0%" y="0%" width="100%" height="100%" part changes the result in Chrome and Inkscape, but not in resvg and rsvg.

@RazrFalcon
Copy link
Collaborator

There is no such thing as correctly rendered SVG. SVG doesn't have a reference implementation after all. So your results are not that surprising.

Usage of relative coordinates, like %, is bad idea in general. They are badly supported. Stick with absolute one.

Also, I'm not sure what result are you trying to achieve, so no help here either. Can you explain what result do you expect?

@afdw
Copy link
Author

afdw commented May 3, 2021

There is no such thing as correctly rendered SVG. SVG doesn't have a reference implementation after all. So your results are not that surprising.

But there are specifications. If something important is not clear, I think they should be corrected.

I think the problem here arises from the fact that feImage has attributes x, y, width, height that are both filter-primitive-attributes and image/use attributes somehow, and different implementations interpret them differently.

Usage of relative coordinates, like %, is bad idea in general. They are badly supported. Stick with absolute one.

There is not much of relative coordinates here, and using absolute everywhere does not change the situation I think.

Also, I'm not sure what result are you trying to achieve, so no help here either. Can you explain what result do you expect?

I want to compose "layers" (of arbitrary sizes and not necessarily with only positive coordinates) with different filters. See #381 for a real example of generated code (I think I have managed to make it work in rsvg and Chrome and sometimes in Inkscape).

@RazrFalcon
Copy link
Collaborator

Filter primitive region is a very complicated and badly documented feature. You should not rely on it, because it's mostly broken in all implementations.
And since there are no reference implementation there is no correct answer.

@LaurenzV
Copy link
Contributor

LaurenzV commented Feb 4, 2024

The output from resvg seems to match Chrome and Inkscape now (ignore the red part), so I think this can be closed?

image

test

Probably fixed by the same commit as #381.

@RazrFalcon
Copy link
Collaborator

We should still add tests for both of those cases.

RazrFalcon pushed a commit that referenced this issue Feb 20, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants