Background Blur is not working

[yangsibai]

Expected Behavior

Background Blur is working.

Actual Behavior

Not working.

Steps to Reproduce the Problem

Add a shape, check the background blur, the exported svg don't have blur.

Specifications

• Version: 1.0.0-2
• Platform: macOS

[L2jLiga]

Root of this problem is that when you create background blur actually you create the shape over your shape with background. Looks like this things work different in XD and SVG.

Currently I have no ideas how to solve that, @yangsibai have you any ideas?

minimal example

[yangsibai]

It can be implemented by combine filters.

For example:

<filter id="blurMe" x="0" y="0" width="100%" height="100%">
  <feGaussianBlur in="SourceGraphic" stdDeviation="15" result="blur"/>
  <feComponentTransfer in="blur" result="op">
    <feFuncR type="linear" slope="50"/>
    <feFuncG type="linear" slope="50"/>
    <feFuncB type="linear" slope="50"/>
    <feFuncA type="linear" slope="0.56"></feFuncA>
  </feComponentTransfer>
</filter>
<image xlink:href="./image1.png" width="338" height="338" />
<rect x="50" y="100" width="200" height="60" fill="white" filter="url(#blurMe)" />

After some tests, I guess:

• stdDeviation of feGaussianBlur is the blur amount.
• slope of feFuncR, feFuncG, feFuncB can be used for brightness. (In XD, the value is -50~50, I think it need some transform to apply the value)
• slope of feFuncA can be used for opacity.

References:

• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feComponentTransfer
• https://webplatform.github.io/docs/svg/elements/feFuncA/
• https://webplatform.github.io/docs/css/functions/brightness/

@L2jLiga

[yangsibai]

blur-svg.zip

[L2jLiga]

Good idea to use feComponentTransfer and I guess it will be used by xd2svg in future, but it is exactly not what we are looking for..

About your example: we just have rectangle over the image with white half-transparent backgrounds, image still not blurred.

@yangsibai

[yangsibai]

Image is blurred by feGaussianBlur, it's not just half-transparent, it's blurred. I haven't find out how to map the parameters, but it's work.

You missed this comment: #33 (comment) ?

@L2jLiga

[L2jLiga]

@yangsibai I tried to use your solution and find something too..
Currently I decied to release 1.0.0 version, at least it can do more then Adobe XD when you try to export to svg :)

Best :)