New and returning users may sign in

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
← Adobe XD: Feature Requests

Request details

Feedback

Adobe XD: Feature Requests: 05 : Asset exporting

Categories

  • CATEGORIES
  • All ideas
  • My feedback
  • 01 : Design mode 1366 ideas
  • 02 : Prototype mode 370 ideas
  • 03: Share mode 50 ideas
  • 04 : Sharing on the web 216 ideas
  • 05 : Asset exporting 157 ideas
  • 06 : Extensibility 38 ideas
  • 07 : Integration with other tools 118 ideas
  • 08 : Mobile (iOS) 25 ideas
  • 09 : Mobile (Android) 19 ideas
  • 10: Developer Handoff 140 ideas
  • 11: Plugins 135 ideas
  • Other 109 ideas

(thinking…)
  • Searching…

    No results.

    Clear search results
    • Adobe XD: Feature Requests 2,870 ideas

Export SVG With Inline Styles

If you'll use exported SVG graphics as a code embedded into your HTML (but not as an external .svg image) you encounter CSS issues.
The problem is in <style></style> which you generate on SVG export. Every path in SVG has its class name and they all are named like "a", "b", "c" etc… (image 1 attached)
1. These classes may cause conflict with existing classes, in case I already have "a", "b", "c" classes in my HTML.
2. These classes will interfere styles of other SVGs exported from XD and embedded on the page.

Solution:
Remove classes and generate inline styles for each SVG element (image 2).

Workaround:
For now I have to rewrite the inline styles for each SVG manually. Or, first, export assets to Illustrator and then export assets from Illustrator. Because Illustrator has the inline option (image 3).

But I suggest to make inline styles in SVG by default.

  •  
    Export Asset.png 23 KB
  •  
    image3.png 30 KB
  •  
    image2.png 43 KB
  •  
    image1.png 51 KB
107 votes

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Aleksei shared this idea  ·  January 23, 2017  ·  Flag idea as inappropriate…  ·  Delete…  ·  Admin →

How important is this to you?

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Tweet
  • Remove
Attach a File

We're glad you're here

Please sign in to leave feedback

Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Lee commented  ·  August 16, 2021 03:51  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Our devs are struggling with this problem too. We need an "Inline Style" option for Shared Link with Design Specs so that developers can download and use SVG easily. As a designer, I'm frustrated to manually export all SVG files via Ai and send them to developers instead of giving them a good option via shared link.

    Submitting...
  • Gopal Chavan commented  ·  June 16, 2021 22:13  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Please don't mark this as fixed for export popup only. The issue is still there in dev specs of shared links as well.

    Submitting...
  • Zoe commented  ·  June 09, 2021 08:15  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Has this been fixed yet? I'm having major issues with my devs using the exported SVG's

    Submitting...
  • Amir commented  ·  September 24, 2020 08:58  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Exported SVG assets from XD need to be imported into Illustrator and re-exported just to be able to get the minification and inline styling. This is a problem that can be fixed easily but not sure why the option doesn't exist already.

    Submitting...
  • Florian Monfort commented  ·  July 01, 2020 23:49  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Hi,

    My engineering team is also reporting this as an issue. Definitely need that fixed.

    Submitting...
  • Jodi Bennett commented  ·  June 04, 2020 09:07  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    My devs have just raised this issue as well! What is the point of having a tool that allows for dev handoff when the devs can't use or have to seriously alter what you handoff to them?!

    My devs are having to strip/rewrite the SVG code or aren't sure where the actual SVG starts in some cases so they wind up creating them themselves! Recipe for disaster! (See screenshot.)

    Sounds like Sketch is the way to go from reading other comments!

    Submitting...
    •  
      Screen Shot 2020-06-04 at 5.03.05 PM.png 432 KB
  • Anonymous commented  ·  April 24, 2020 01:03  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Unbelievable, only XD doesn't support inline SVGs. I have no other option than to go back to Sketch.
    This issue was reported in 2017. Three years later nothing happened. Unbelievable. This is maybe the most important feature or MUST HAVE thing in the app. What's worth designing anything, when I cannot handover that design to the developer. Once again, UNBELIEVABLE!

    Submitting...
  • Mike M commented  ·  March 06, 2020 08:33  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I've come across the same issue packaging for development specs, a developer just asked this question and had the same issue where they need to manually edit the svg class. Can we get the choice in how SVGs are exported with dev specs - so we can choose inline, or fix the auto class naming convention so it's generated randomly for each different icon/svg?

    Submitting...
  • Bert de Weerd commented  ·  February 05, 2020 03:49  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    At least the choice between style and attribute would be a great solution for this. Now I have to export all assets and then open them in Illustrator to save with attribute styling to fix the class mixup. This is quite struggle for the hand-of to developers!

    Submitting...
  • Mauro commented  ·  July 26, 2019 13:05  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is important. It is an obstacle when I have to deliver the assets to DEV. Please, make it inline by default, or provide the options to choose from. Thx

    Submitting...
  • Joshua Curtis (Diary of a Dad Man) commented  ·  January 30, 2019 12:01  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    PLEASE PLEASE PLEASE FIX THIS! Might have to go back to using Sketch!

    Submitting...
  • Andre commented  ·  January 30, 2019 11:33  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    This is really getting on the way of our design to dev handoff... Very frustrating!

    Submitting...
  • Vinicius Alves commented  ·  December 17, 2018 03:12  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Please fix this, I always have to open the XD exported svg in Illustrator and export again to have inline styles.

    Submitting...
  • Anonymous commented  ·  July 11, 2018 08:40  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Export SVG with inle style (not internal css) for better interoperability ( ex: Application build in Qt )

    Submitting...
  • George K commented  ·  May 31, 2018 13:37  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    I don't think in-line styles would be the best solution for this. One of the main benefits of SVG is that you can easily style it in your CSS. So I can color my logo.svg using css vars and have that logo instantly update if I decide to change my color pallet (and by extension change the values of my CSS variables). Of course you can still do this with setting rules as !important, but that's usually undesireable.

    I think a cleaner fix is to keep the classnames, but simply prefix them with the filename (or anything else). So you would end up with stuff like logo1-cls-1 as the class name and can avoid the issue with multiple SVGs conflicting.

    As a workaround for the current situation, I just pull everything out of the style tag and drop it into my css, then add a parent class to all the rules.

    Submitting...
  • Gethin commented  ·  May 11, 2018 06:33  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    +1 please why hasn't this been fixed yet?

    Submitting...
  • Anonymous commented  ·  April 24, 2018 19:54  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Same issue here. Have to go through and rename the classes if there are multiple SVGs on one page. Can get very tedious when dealing with intricate SVGs.

    Submitting...
  • Marek commented  ·  September 07, 2017 08:08  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    Same problem here.

    Submitting...
  • Anonymous commented  ·  March 29, 2017 02:42  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    +1

    Submitting...
  • Adrian Klingen commented  ·  March 23, 2017 04:15  ·  Flag as inappropriate  ·  Edit…  ·  Delete…

    In Illustrator when you output the SVG you can select if you want the styles inline, or as presentation attributes. I think this would be a great addition to XD to select what way you want styling to be applied to SVG elements.

    Submitting...
← Previous 1 2 Next →

Adobe XD Feedback : Feature Requests & Bugs · UserVoice Terms of Service & Privacy Policy · Adobe Terms of Use · Adobe Privacy Policy