evil-mad / robopaint

The software for your friendly painting robot kit!
126 stars 34 forks source link

Some SVG files appear to be all black in color #275

Open oskay opened 8 years ago

oskay commented 8 years ago
screen-shot-2016-08-03-at-17 26 37

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:

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:

RI0 commented 8 years ago

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 commented 8 years ago

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

RI0 commented 8 years ago

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

`<?xml version="1.0" encoding="utf-8"?>

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 841.9 595.3" style="enable-background:new 0 0 841.9 595.3;" xml:space="preserve">

` 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 commented 8 years ago

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

oskay commented 8 years ago

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 commented 8 years ago

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.

screen shot 2016-08-30 at 19 12 32

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

oskay commented 8 years ago

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 commented 5 years ago

LOGOSVG.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 commented 5 years ago

See: https://github.com/evil-mad/robopaint/issues/275#issuecomment-243611442

kritikaperiwal12 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

first, It must be tag style such as '