Skip to main content
J
jmcgregor
Participating Frequently
May 5, 2021
Question

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

  • May 5, 2021
  • 5 replies
  • 8517 views

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>

    This topic has been closed for replies.

    5 replies

    S
    Sirko27710804sxs6
    Participant
    December 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

    S
    Sirko27710804sxs6
    Participant
    December 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:

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

    Dan Rodney
    Community Expert
    Dan RodneyCommunity Expert
    Community Expert
    December 27, 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
      Dan Rodney
      Community Expert
      Dan RodneyCommunity Expert
      Community Expert
      May 8, 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
        S
        Sirko27710804sxs6
        Participant
        December 26, 2022
        quote

        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:

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

        J
        jmcgregorAuthor
        Participating Frequently
        May 7, 2021

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

        HARSHIKA_VERMA
        Community Manager
        HARSHIKA_VERMACommunity Manager
        Community Manager
        May 7, 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

          J
          jmcgregorAuthor
          Participating Frequently
          May 8, 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

           

           

          Ares Hovhannesyan
          Community Expert
          Ares HovhannesyanCommunity Expert
          Community Expert
          May 5, 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.
            J
            jmcgregorAuthor
            Participating Frequently
            May 5, 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...

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices