Request details

← Adobe XD: Feature Requests

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.

79 votes
Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close

We’ll send you updates on this idea

Aleksei shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

17 comments

Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
Submitting...
An error occurred while saving the comment
  • Jodi Bennett commented  ·   ·  Flag as inappropriate

    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!

  • Anonymous commented  ·   ·  Flag as inappropriate

    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!

  • Mike M commented  ·   ·  Flag as inappropriate

    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?

  • Bert de Weerd commented  ·   ·  Flag as inappropriate

    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!

  • Mauro commented  ·   ·  Flag as inappropriate

    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

  • Andre commented  ·   ·  Flag as inappropriate

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

  • Vinicius Alves commented  ·   ·  Flag as inappropriate

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

  • Anonymous commented  ·   ·  Flag as inappropriate

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

  • George K commented  ·   ·  Flag as inappropriate

    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.

  • Anonymous commented  ·   ·  Flag as inappropriate

    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.

  • Adrian Klingen commented  ·   ·  Flag as inappropriate

    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.

  • Dylan Pierce commented  ·   ·  Flag as inappropriate

    At the moment when Xd or Illustrator exports an SVG the SVG vectors are styled by classes:

    .cls-1 {
    fill: #fff;
    stroke: #6a6a6a;
    stroke-width: 3px;
    }

    .cls-2 {
    fill: #6a6a6a;
    }

    .cls-3 {
    stroke: none;
    }

    .cls-4 {
    fill: none;
    }

    But this is a problem because if you use multiple icons on a page their styles will override each other because they use the same classes.

    To fix, during the export process the program needs to use either inline styling (safest) or ID's to apply the styling.

Adobe XD: Feature Requests: 05 : Asset exporting

Categories

Feedback and Knowledge Base

(thinking…)