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

Community Beginner ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

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.

TOPICS
Bug, Import and export

Views

50

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 18, 2021 Feb 18, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Feb 22, 2021 Feb 22, 2021

Copy link to clipboard

Copied

LATEST

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines