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