Unable to export SVG's with background blur effect in XD.

Report · May 05, 2021

Im really struggling with XD as I have created a Web layout with icons/illustrations within the XD file (That include both Background Blur and a gradient) and when exported as individual SVG's it removes both effects from the artwork. Why is this? Is there anything that Adobe can to correct these issuses.

Thanks

James

Report · May 05, 2021

Here is some tips for expoting SVG from Adobe Xd. Did you try them?

When you export objects or artboards as SVG, you can set the visual styling to Presentation Attributes or Internal CSS.

Presentation Attributes: Uses separate XML attributes for each individual style property on each SVG tag. This format is required to use SVG assets with Android Studio.
Internal CSS: Uses a single style tag with CSS classes and shares the styling settings between objects with same styles leading to smaller file sizes.

You can save them as embedded or linked images.

Embed: The bitmap image is encoded into the SVG file.
Link: The bitmap image is stored separately with a reference to the SVG file.

Report · May 05, 2021

Hi, I've tried these different SVG settings previously and they still don't export out the background blur and gradient added to the illustrations/icons I have made in XD. I'm thinking this might be a known problem in XD but would be useful to hear from Adobe about this and if there is a work around or an update coming to correct this issue. Thanks anyway for your advice...

Report · May 07, 2021

Hi @Ares Hovhannesyan is there any further feedback from Adobe on this? Really hindering my workflow thanks.

Report · May 07, 2021

Hi there,

Sorry for the trouble. Could you please share the XD sample file with us so that we can check at our end? Please upload the file to a shared location such as Creative Cloud or Dropbox and share the URL with us. Could you please share the XD and the OS version of your machine?

We will try our best to help.

Thanks,

Harshika

Report · May 08, 2021

Hi Thanks for getting back to me.

Below is the link to the sample/test file with a couple of icon examples that I have been trying to export as a SVG unsuccesfully. The XD version is 39.0.12.12 and OS is Mac Big Sur - Version 11.2.3.

Any help you can give me would be very much appreciated 🙂

https://www.dropbox.com/s/wjm8e9b798z3out/James%20McGregor%20Test%20file.xd?dl=0

Thanks

James

Report · May 08, 2021

From what I understand, the SVG file format cannot create a background blur so you'll have to export those as PNG (or JPEG) instead of SVG.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Report · May 11, 2021

Hi @Dan Rodney Do you think this will ever be something that is updated in SVG files? Especially with the wider use of the background blur and gradients (which dont export properly to SVG either!) Or something I can request to be added?

Is this something a third party plugin might be able to help with? Converting the background blur for SVG use...

It would be great if there was a XD functionality that could 'expand' out the artwork, while keeping it a vector but still have the effect present for SVG export purposes.

Any help on this would be great - there no point having the function present if you cant even export it for use of a website...

Thanks James

Report · May 13, 2021

Hi James,

We understand your concern. As Dan rightly informed there are some unsupported features in the SVG files in XD mentioned here: https://helpx.adobe.com/xd/user-guide.html/xd/kb/import-export-issues.ug.html#SVG-files-with-unsuppo...

I am not sure of any plugin but will definitely check with the team and share your feedback on supporting some unsupported features in SVG file formats.

I found this on google, please have a look if that helps you: https://graphicdesign.stackexchange.com/questions/115220/css-equivalent-to-adobe-xds-background-blur...

Thanks,

Harshika

Report · May 14, 2021

A background blur is very useful when implemented as a blurred background via coding in websites and apps. Imagine a tab bar at the bottom of an app (or a navbar at the top of a website) that live blurs the content that scrolls behind it. That's how this feature is designed to be used (and that works). It's used in many iOS and Mac apps for example.

It's not really meant for creating vector graphics (but keep in mind it can be used to create pixel-based graphics). Plugins can't help because they can't change the coding standards of websites or apps. I understand where you're coming from, but how you're using the background blur is not how it's intended to be used. It's a cool way you're using it and you're not wrong for wanting it to work! But you'll have to use pixel-based graphics if you want that effect in a graphic.

There is a body that decides coding standards for websites, but considering that CSS can already do this already (which is different than SVG) they either know about it and may already have a plan to implement it (who knows when), or it might not be something they plan on adding to SVG). Either way it's out of Adobe's control and web coding standards can be slow to change.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Report · May 31, 2021

Hi Dan,

With what you have said above in mind, is there a way to seemlessly transfer the artwork produced (with all added affects intacked) over to to photoshop or illustrator. I have tried including the artwork into a library but the blur function and gradients don't transfer over.

any help would be appreciated thanks

Report · May 08, 2021

SVG is a coded file format, relying on web tech to create the graphic. I believe it's a limitation that SVG cannot create a background blur.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Report · Dec 26, 2022

SVG is a coded file format, relying on web tech to create the graphic. I believe it's a limitation that SVG cannot create a background blur.
By @Dan Rodney

Incorrect.

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:

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

Example:

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.

Report · Dec 26, 2022

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:

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

Example:

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.

Report · Dec 26, 2022

From everything I know about XD, it is not a browser-based app, not that it really matters though for how it created SVG files.

As far as it being strange Adobe hasn't fixed this... it's because XD development is basically done at this point. Adobe announced their purchase of Figma (which should be completed in 2023) so XD won't get anything more than basic maintanence updates until people have time to switch to Figma.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Report · Dec 26, 2022

GaussianBlur and Background Blur are very different things. Background blur will live blur any object dynamically as it moves behind the element. So it's blurring an area (and anything in that area, even if those objects are only partially visible and partially outside)... not specific whole objects.

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

Report · Dec 26, 2022

There was a comment here with: 1. Guidance on how to solve this problem. 2. Some criticism for Adobe. My comment has been removed. I think because of point 1? xD