SVG won't export as SVG if contain gaussian blur

[chro-witbe]

We made an illustration on Adobe Illustrator which contain some elements with Gaussian blur. Afterwhat we export the illustration as a SVG and then import it onto Adobe XD. Once imported on an artboard and  "Mark for export" the SVG we update our shared link for developement with the Downloadable assets checked.

When trying to downlaod the assets (from the shared link) there are only 2 choice available: PNG and PDF file format. SVG file format only appears as an option when we remove the Gaussian layers from the SVG.

So it appears that XD have some trouble to render SVGs with Gaussian blur and thus export it.

[Rishabh_Tiwari · Accepted solution]

Hi there,

Sorry to hear about the trouble. I understand that this could be a piece of sad news for you as there are certain un-supported features of SVG files in Adobe XD. For more information please refer to this link: https://helpx.adobe.com/xd/kb/import-export-issues.html#SVG-files-with-unsupported-properties

Feel free to reach out if you need any further assistance.

Regards

Rishabh

[chro-witbe]

Thanks for your response Rishabh

One further question though. There isn't any plan for making unsupported properties into supported one anytime soon?

Regards,

Charles

[Rishabh_Tiwari]

Sorry for the delay in response, Charles. As of now, we don't have an official word on it however let me assure you, I will share your feedback with the Engineering Team.

[Sirko27710804sxs6]

I am a programmer and I believe that XD is a web browser based software. And it has equivalent capabilities like Chromium and a V8 engine.

According to this info

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur

browsers have implemented this feature a long time ago. It's strange that the Adobe development team hasn't been able to implement this thing since 2023.

But if anyone still loves XD xd) you can fix it like me.

- SVG export.

- Then open it with a code editor such as (sublime, notepad++).

- Add new filter with unique id (id="blurMe") and set blur (stdDeviation="50").

Example:

<filter id="blurMe">
<feGaussianBlur stdDeviation="50" />
</filter>

- Find the path you want to blur and add a property with your filter ID (filter="url(#blurMe)")

Example:

<path id="shape_3" data-name="shape 3" d="M-15390.033-16249.094l424.966,121.833H-13716.9l-136.849-1312.312s-500.541,844.055-832.558,810.16S-15390.033-16249.094-15390.033-16249.094Z" transform="translate(15691 17070)" fill="url(#linear-gradient-2)" filter="url(#blurMe)"/>

To be honest, I think it's not a problem for the development team to implement this.

But for users, it is a big problem, since it is easier to implement this in a graphical editor and export to SVG than to do it using CSS.