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

[jmcgregor]

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

<The Title was renamed by moderator>

[Ares Hovhannesyan]

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.

[jmcgregor]

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...

[jmcgregor]

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

[HARSHIKA_VERMA]

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

[jmcgregor]

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

[Dan Rodney]

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.

[jmcgregor]

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

[HARSHIKA_VERMA]

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

[Dan Rodney]

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.

[jmcgregor]

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

[Dan Rodney]

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.