Some SVG files appear to be all black in color

[oskay]

Some SVG files, when opened in RoboPaint, show the correct shapes, but filled with solid black color. As this appears in the edit mode, where the file can be imported, it has consequences for using the file elsewhere in RoboPaint as well.

Background: There are quite a few different methods of indicating what the styles of objects are within an SVG file, including tags on the individual objects, inherited tags, and css, both inline and by named style. (Perusing the SVG export options within Adobe Illustrator is somewhat instructive about the variety of different methods available.) It seems likely that some, but not all, of these methods are not being understood/interpreted correctly.

We believe that the following are true:

• The choice of machine does not affect this behavior.
• Some, not all, SVG files are affected.

Information needed: To proceed with understanding and fixing this issue, we need a set of SVG files that can reproduce the problem. If you know of one or more, please ZIP the file and attach it to this issue, ideally with a screen shot as well.

Questions to be answered:

• Are only some computers/platforms affected?
• Does the file still print correctly in multiple colors, even if it appears all black on the screen?
• Do the affected files have a consistency about how their styling is applied?
• Were the affected files generated by the same software?

[RI0]

I had the same problem with files created in Adobe Illustrator.
Sometimes it was possible to flatten the image or export individual
layers and then re-layer the images in RoboPaint.

[oskay]

If you can provide an example for us to work with, that would be helpful. :)

[RI0]

It looked like Illustrator added extra header information and it
created a style sheet in the SVG.

`

<style type="text/css"> .st0{fill:#FFFFFF;} .st1{fill:#ED2224;} .st2{fill:#37429A;} .st3{fill:#010101;} </style>`

We removed all of this and made it look more like an SVG generated by RoboPaint.

We created a simple drawing in RoboPaint with the colours I wanted to use and then
used the colour codes to modify the SVG exported from Illustrator.

As mentioned above, we also tried importing individual shapes into RoboPaint, changing
the colours and then saving the file as an SVG. This sometimes would produce a clean
SVG that would render in the print section of RoboPaint.

Most of the time it is fine in edit mode but then turns black in the print/paint mode
if the SVG is not clean.

Hope this helps

[RI0]

Since Github will not accept an SVG the extension was changed to txt
PPT.txt

[oskay]

I would recommend using a zip archive for SVG files; they can be attached here, and it's a way to prevent corruption by browsers during the upload/download process. (See also, original request.)

[ajpiano]

It seems the difference is rooted in one of the export options from Illustrator; selecting "Style Attributes" results in RoboPaint being able to deal with the colors, "Style Elements" results in all black in RoboPaint, as you can see in this screenshot where I imported each svg into robopaint.

I have attached this zip file with both files in it for y'all to review

[oskay]

Interesting; I have seen various errors with AI SVG export (with other options) before. Thank you for labeling these files clearly!

One possible approach (depending on where the offending SVG parsing code lies) would be to give the user a warning, and some words about how to properly export from AI. However, this is a little unkind, since many people will be working from artwork of unknown origin. Another approach would be to parse the elements upon opening the file, and apply those styles as attributes instead.

[arcovirtual]

LOGO_SVG_.zip

I have a problem, my svg logo is all in black on the main page but by taking the full path only the svg is seen correctly, and the css load is external I can not understand why that happens.

look https://mallregional.cl/portal error logo see all black
direct svg look correct https://mallregional.cl/image/catalog/1_SISTEMA/LOGO_SVG_.svg

:(

the solution was to use object not to use img to show, but now it is not a link :( xD I will continue investigating

[oskay]

See: #275 (comment)

[kritikaperiwal12]

Hello,
While showing SVG file on view using Pocket SVG Framework it is showing black color filled. Please tell me the reason behind it.

[arcovirtual]

I solved it and I created a mod for opencart https://www.opencart.com/index.php?route=marketplace/extension/info&member_token=qC6vrvaV71qxSuUggfC1gRL28UKkwXH7&extension_id=35539 regards

[ammar23]

first, It must be tag style such as ' <style type="text/css"> '
second, Resave file SVG on Adobe xd and export as SVG

[docsmooth]

hacky fix for the original files: https://github.com/docsmooth/fix-svg