Opening exported SVGs in Illustrator has a warning, changes appearance

[garrettjstevens]

I generated an SVG using "Export SVG" in the LGV menu. Here's the share link for the session: https://s3.amazonaws.com/jbrowse.org/code/jb2/main/index.html?config=test_data%2Fvolvox%2Fconfig.json&session=share-uRx1o5nNO-&password=acTeT

Here's the exported SVG:

When I open this SVG with Adobe Illustrator 2023, I get this warning:

I then used "Save a copy..." in Illustrator and saved the SVG. I had to make sure to select "Image Location: Embed" while saving because Illustrator by default moves the embedded PNGs to external files. This is the resulting SVG:

It looks like the scale marks on the top and the side are lost, and semitransparent labels in the multi bigwig get made opaque.

[garrettjstevens]

I tried doing the same thing in Inkscape, and I didn't get any warnings when opening or saving as "Plain SVG", and the saved SVG seems to look unchanged. I tried to save as "Optimized SVG", however, I got this error:

/usr/share/inkscape/extensions/output_scour.py:6: DeprecationWarning: The distutils package is deprecated and slated for removal in Python 3.12. Use setuptools or check PEP 632 for potential alternatives
  from distutils.version import StrictVersion
Traceback (most recent call last):
  File "/usr/lib/python3.10/xml/dom/minidom.py", line 809, in removeAttribute
    attr = self._attrs[name]
KeyError: 'stroke'

During handling of the above exception, another exception occurred:

Traceback (most recent call last):
  File "/usr/share/inkscape/extensions/output_scour.py", line 72, in <module>
    ScourInkscape().run()
  File "/usr/share/inkscape/extensions/inkex/base.py", line 131, in run
    self.save_raw(self.effect())
  File "/usr/share/inkscape/extensions/inkex/base.py", line 156, in save_raw
    self.save(self.options.output)
  File "/usr/share/inkscape/extensions/output_scour.py", line 69, in save
    stream.write(scourString(self.svg.tostring(), self.options).encode('utf8'))
  File "/usr/lib/python3/dist-packages/scour/scour.py", line 3818, in scourString
    _num_attributes_removed += moveCommonAttributesToParentGroup(child, referencedIds)
  File "/usr/lib/python3/dist-packages/scour/scour.py", line 1079, in moveCommonAttributesToParentGroup
    num += moveCommonAttributesToParentGroup(child, referencedElements)
  File "/usr/lib/python3/dist-packages/scour/scour.py", line 1079, in moveCommonAttributesToParentGroup
    num += moveCommonAttributesToParentGroup(child, referencedElements)
  File "/usr/lib/python3/dist-packages/scour/scour.py", line 1079, in moveCommonAttributesToParentGroup
    num += moveCommonAttributesToParentGroup(child, referencedElements)
  [Previous line repeated 3 more times]
  File "/usr/lib/python3/dist-packages/scour/scour.py", line 1137, in moveCommonAttributesToParentGroup
    child.removeAttribute(name)
  File "/usr/lib/python3.10/xml/dom/minidom.py", line 811, in removeAttribute
    raise xml.dom.NotFoundErr()
xml.dom.NotFoundErr

[cmdcolin]

some interesting information here (make sure to scroll thru all answers, theres a variety of perspectives)

also https://www.reddit.com/r/svg/comments/jr7r20/svg_and_illustrator/

[scottcain]

@garrettjstevens did you try running it through https://jakearchibald.github.io/svgomg/ before going to Illustrator as suggested in @cmdcolin 's reddit link? It did shrink the sample I tried by half, but the changes it was making didn't say anything about clipping so I have no idea if it helped. It's a JS library (https://github.com/svg/svgo) so one could imagine making a JB plugin that generated Illustrator-happy SVG if it helps.

[cmdcolin]

meant to link this thread also with my "some interesting information here" comment https://community.adobe.com/t5/illustrator-discussions/clipping-will-be-lost-on-roundtrip-to-tiny/td-p/1203608

the reddit thread is useful also though

[garrettjstevens]

I tried optimizing it with svgo (I used the CLI, not the website), but it didn't change much. It shrank my sample from177 KB to 169 KB. It also made it so that the scale bars on the top did not disappear when I imported the SVG to Illustrator, but then they are still missing from the SVG that is exported from Illustator.

[cmdcolin]

the thing with the scale bar is interesting. it may be related to SVG not accepting "rgba" colors (it wants a separate opacity prop) and we are using rgba in the color for the tick marks/scale bar (and that rgba comes from MUI theme palette)

[cmdcolin]

(browsers and modern svg renderers will probably accept the rgba but some other svg renderers might balk at it)

[cmdcolin]

some amount of this should be fixed now. tricky to fully fix but reopen if needed