0

Greeting. I faced wierd problem I've got next.js project (default config) with svg filter

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id='roughpaper'>
        <feTurbulence type="fractalNoise" baseFrequency='0.02' result='noise' numOctaves="5" />
        <feDiffuseLighting in='noise' lighting-color='white' surfaceScale='2'>
            <feDistantLight azimuth='45' elevation='60' />
        </feDiffuseLighting>
    </filter>
</svg>

and import like this

import styled from 'styled-components';

export const Paper = styled.img`
  position: absolute;
  width: 100%;
  height: 100%;
  filter: url('/filters/paper.svg#roughpaper');
  opacity: 0.5;
`;

Reference here And it works properly for me in Chrome and Firefox (looks like white paper)

But in next project there is a big differences. For Firefox it looks like this

And for Chrome like this

Does any body know, why could it be?

I've already tried to set color-interpolation-filters="sRGB", but it changes nothing.

Improve this question
1
  • This looks 100% correct. Maybe check that your live project has the exact same filter?
    – Michael Mullany
    Commented Jan 24 at 12:51

1 Answer 1

Reset to default
0

Well, I've tested different solutions. And the only thing that works properly is just put this svg inside html code of the page and do not import it from outside. Looks like there is some issue with next.js and it should be imported in some other way. Didn't found proper one yet.

Improve this answer
2
  • One possibility - are you serving the filter from the same domain as the content? Filter content security doesn't allow cross-domain filter application for certain primitives - and Chrome may be disallowing the lighting primitive (correctly I think) whereas Firefox may be allowing it.
    – Michael Mullany
    Commented Jan 25 at 12:05
  • Yes, even on localhost
    – user3770299
    Commented Jan 25 at 16:02

Not the answer you're looking for? Browse other questions tagged or ask your own question.