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.

55 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 →

11 comments

Attach a File
Sign in
(thinking…)
Sign in with: Facebook Google
Forgot password?
Create a password
Signed in as (Sign out)
Close
Close
Submitting...
  • 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: 04 : Asset exporting

Feedback and Knowledge Base

(thinking…)