Welcome Dialog

Welcome to the Community!

We have a brand new look! Take a tour with us and explore the latest updates on Adobe Support Community.


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

Community Beginner ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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>

TOPICS
Import and export, Known Issue, Missing feature

Views

1.4K

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

 

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 05, 2021 May 05, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 07, 2021 May 07, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 08, 2021 May 08, 2021

Copy link to clipboard

Copied

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

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 08, 2021 May 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 11, 2021 May 11, 2021

Copy link to clipboard

Copied

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

 

 

 

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
May 13, 2021 May 13, 2021

Copy link to clipboard

Copied

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

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 14, 2021 May 14, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 31, 2021 May 31, 2021

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 08, 2021 May 08, 2021

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines