SVG exported from Illustrator displaying with random black fills when imported to web app

[juliejacob]

Hello, 
I recently used Illustrator to create an SVG system map. It has many layers and paths with various fills. The problem I'm having is that we experienced some class collisions with other SVGs  created similarly using internal CSS, so we changed everything to inline. ALL of the other SVGs imported and displayed properly, but the system map had five large paths filled with black. This fill is not inside the path as it overlaps all paths that should be displayed in front of the affected path. When changed back to internal styles, with no other alterations to the graphic or procedure, it displays as expected. Can anyone explain why this is happening? We are loathe to have to keep saving SVGs with different CSS methods.

[Monika Gause]

So you edited the SVG after exporting?

Does it look OK when you open it in the browser (directly after exportwithout uploading)?

Does it look OK in Inscape?

[juliejacob]

The file was not edited after export. It does look okay in the browser, raw. The black occurs when imported into a React App with SVGLoader. I don't use Inkscape, should I be?

[Monika Gause]

If the file is OK directly after saving, but then gets torn apart after loading it with third party apps, then the third party app is the problem and there's not a lot you can do in Illustrator.

Inkscape is free, so try if it helps saving the file from it. SVG is its native file format, so it might save them slightly differently. But I fear that it might not help either.

[juliejacob]

I find it curious that it worked just fine before switching to inline styles. It would be helpful if Illustrator allowed the user to prefix class names on each svg to avoid class colisions.