Unable to view exported SVG fully in Adobe Illustrator

[lyqht]

Description

Why this happens

In https://github.com/tsayen/dom-to-image/issues/64, it was mentioned that toSvgElement doesn't actually create a proper SVG element with paths/shapes. It simply creates a foreignObject, which is usually recognizable on web browsers. This is also why the exported SVGs render as expected on this GitHub repo's README.md.

However graphic editor softwares like InkScape, Adobe illustrator cannot recognize the SVG file format.

Issue

This issue is reported by Mihai Scelcunov

Logo missing

---

Workaround

[!NOTE] Use png/jpg export. If you find that PNG/JPG export quality is not good enough, remember that you can adjust the width & height so that it's bigger, and then resize the images manually in the softwares you're using the image in.

[rucksman]

Same here. If I remove the logo in mini-qr-code-generator.vercel.app with preset "Default" and try to open the SVG in Illustrator, I get the error message

Clipping is lost when exporting to SVG Tiny format

After confirming the message with "OK", I can only see the corner elements in Illustrator:

All the other elements are there somehow which can be seen by pressing CTRL+a, but they are not filled:

[lyqht]

I might have to create a fork of the qr code library that i'm using to generate the qr code to fix this issue, it's not trivial

[lyqht]

Hello @rucksman, i merged a fix, give it a try, it should work now!

[rucksman]

Unfortunately it does not work for me.

First try: Used default profile in https://mini-qr-code-generator.vercel.app/. There is an error message in Illustrator (something like "Clipping is lost when exporting to SVG Tiny format"). After confirming with "OK", again there are no elements visible, at least the logo is there: And as before after selecting everthing, I can see that the elements exist (but are not visible):

Second try: Uploaded a SVG for the image. Same error message and no logo at all:

Third try: As before but with a PNG. Same error on opening, logo is there, but no other elements visible:

[lyqht]

Aww, It looked fine on Inkscape, but Illustrator probably processes it differently, i will reopen the issue. Thanks for helping to replicate!

[jacobgkau]

I'm just seeing the SVG exports appear as a solid black square in Inkscape, regardless of any settings (colors, background, etc) in the QR code generator.

Tried with Inkscape versions 1.1 and 1.4.

[rucksman]

Same for me (Inkscape 1.3.2.). And the same result in Illustrator: only a black square. Of course one could fiddle around with the layers and delete the one(s) that produce the black square, but that is not really an option in the long run. And in Illustrator the dots are still not filled with a color so they still are invisible. Only the corner squares are visible (after deleting the big black square that covers all).

[lyqht]

Closing this issue, after several complaints, i've decided not to support svg option anymore here since the underlying library has no plans to fix it.

[lyqht]

reopening because many users requested reinstating the svg export, and that not being able to view the exported svg fully in illustrator softwares is fine for them. this issue still perists.

[Martin511]

Unfortunately SVG does not work at all in my case. I have ty mention that I use Affinty Designer and not Adobe. Is EPS an alternative for another try?

[KoraktorXV]

FreeCAD was somewhat able to make something out of it, but it had many overlapping layers and the borders where some away from the QR code.

i used for generation: {"props":{"data":"test","image":"","width":200,"height":200,"margin":0,"dotsOptions":{"color":"#000000","type":"rounded"},"cornersSquareOptions":{"color":"#000000","type":"square"},"cornersDotOptions":{"color":"#000000","type":"square"},"imageOptions":{"margin":0},"qrOptions":{"errorCorrectionLevel":"Q"}},"style":{"borderRadius":"0px","background":"transparent"},"frame":{"text":"Jellyfin Server","position":"bottom","style":{"textColor":"#000000","backgroundColor":"#ffffff","borderColor":"#000000","borderWidth":"1px","borderRadius":"8px","padding":"16px"}}}

FreeCAD spit this out after importing - idk if you find this useful but that is all i have.

19:34:15 existing group transform: [Matrix ((0.264583,0,0,0),(0,0.264583,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,0),(0,1,0,0),(0,0,1,0),(0,0,0,1)), Matrix ((1,0,0,278.683),(0,1,0,-159),(0,0,1,0),(0,0,0,1))] 19:34:15 existing group style: [[None, None, None], [None, None, None], [None, None, None], [None, None, None], [None, None, None], [None, None, None], [None, None, None], [None, None, None], [None, None, None]] 19:34:15 pyException: Traceback (most recent call last): File "", line 2, in File "C:\Program Files\FreeCAD 1.0\bin\Lib\site-packages\freecad\module_io.py", line 16, in OpenInsertObject getattr(importerModule, importMethod)(objectPath, *importArgs, **importKwargs) File "C:\Program Files\FreeCAD 1.0\Mod\Draft\importSVG.py", line 1788, in insert parser.parse(pyopen(filename)) File "C:\Program Files\FreeCAD 1.0\bin\Lib\xml\sax\expatreader.py", line 111, in parse xmlreader.IncrementalParser.parse(self, source) File "C:\Program Files\FreeCAD 1.0\bin\Lib\xml\sax\xmlreader.py", line 125, in parse self.feed(buffer) File "C:\Program Files\FreeCAD 1.0\bin\Lib\xml\sax\expatreader.py", line 217, in feed self._parser.Parse(data, isFinal) File "D:\bld\python-split_1749047464851\work\Modules\pyexpat.c", line 423, in StartElement File "C:\Program Files\FreeCAD 1.0\bin\Lib\xml\sax\expatreader.py", line 347, in start_element self._cont_handler.startElement(name, AttributesImpl(attrs)) File "C:\Program Files\FreeCAD 1.0\Mod\Draft\importSVG.py", line 852, in startElement self.fill = getcolor(data['fill']) ^^^^^^^^^^^^^^^^^^^^^^ File "C:\Program Files\FreeCAD 1.0\Mod\Draft\importSVG.py", line 280, in getcolor return (r, g, b, 1-a) ^ <class 'UnboundLocalError'>: cannot access local variable 'r' where it is not associated with a value

if you can fix this this would be realy cool! i would like to 3D Print some QR codes with your program ^^