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.
Aleksei
shared this idea
20 comments
-
Gopal Chavan
commented
Please don't mark this as fixed for export popup only. The issue is still there in dev specs of shared links as well.
-
Zoe
commented
Has this been fixed yet? I'm having major issues with my devs using the exported SVG's
-
Amir
commented
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.
-
Florian Monfort commented
Hi,
My engineering team is also reporting this as an issue. Definitely need that fixed.
-
Jodi Bennett
commented
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
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
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
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
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
-
Joshua Curtis (Diary of a Dad Man)
commented
PLEASE PLEASE PLEASE FIX THIS! Might have to go back to using Sketch!
-
Andre
commented
This is really getting on the way of our design to dev handoff... Very frustrating!
-
Vinicius Alves
commented
Please fix this, I always have to open the XD exported svg in Illustrator and export again to have inline styles.
-
Anonymous
commented
Export SVG with inle style (not internal css) for better interoperability ( ex: Application build in Qt )
-
George K
commented
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.
-
Gethin
commented
+1 please why hasn't this been fixed yet?
-
Anonymous
commented
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.
-
Marek
commented
Same problem here.
-
Anonymous
commented
+1
-
Adrian Klingen
commented
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
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.
