color issues with svg export from XD

Forum|Forum|4 years ago
March 30, 2021
1 reply
1476 views

Hi,

Im having issues with XD when I export a component from XD as a svg with a fill color of #000000 (black). The exported svg file does not have all the elements with a fill color of black as per how it is set up in the document. Visually the file looks fine but when it is being implement via code it appears different. When I change the fill color to #000001 (or any other color except #000000) it works fine meaning the exported svg has every element with a fill color assigned. Is this a bug or am I doing something wrong with export settings? The svg export setting I used are "Presentation Attributes" for Styling, "Embed" for Save images and optimised.

Import and export

This topic has been closed for replies.

Dan Rodney

Community Expert

Are you saying the exported SVG does not look like it does in XD? I just exported an SVG with black elements. While it does not have black listed in the code, the elements appear as black in a web browser (or when imported into a design app).

— Adobe Certified Expert & Instructor at Noble Desktop | Web Developer, Designer, InDesign Scriptor

ultradata5a31462225Author

Participant

Hi Dan,

Thanks Dan for looking into the issue. I faced the same issue today and feel the color black not being listed in the code is having some bearing in this. Have attached a file that shows the expected and actual result. When I changed the color value from #000000 to #000001 it works. So not sure what's happening.

L

Lewis Lane

Participant

We're having this same issue - it seems when exporting SVGs any blacks are converted into no fill, assuming the fall-back colour is black anyway, which it usually is. We however have a style rule in our design system which applies currentColor to anything without a fill, which means that anything that was intended to be black may end up not being black when rendered. Illustrator distinguishes between [Registration] (which applies no fill) and a colour fill (which can be black) and this is previously how we had tested this feature.

I have just tested this myself in Illustrator and it appears to be happening there also when exporting SVGs. Both black filled and [Registration] filled objects get no fill attribute, so it looks likely this affects multiple Adobe products.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded