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