Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to view exported SVG fully in Adobe Illustrator #52

Open
lyqht opened this issue Sep 6, 2024 · 5 comments · Fixed by #54
Open

Unable to view exported SVG fully in Adobe Illustrator #52

lyqht opened this issue Sep 6, 2024 · 5 comments · Fixed by #54
Assignees
Labels
help wanted Extra attention is needed

Comments

@lyqht
Copy link
Owner

lyqht commented Sep 6, 2024

Description

Why this happens

In tsayen/dom-to-image#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

image

Logo missing

image


@lyqht lyqht changed the title Unable to view exported SVG in Adobe Illustrator Unable to view exported SVG fully in Adobe Illustrator Sep 6, 2024
@rucksman
Copy link

rucksman commented Sep 9, 2024

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:
image

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

@lyqht lyqht added the help wanted Extra attention is needed label Sep 20, 2024
@lyqht
Copy link
Owner Author

lyqht commented Sep 20, 2024

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
Copy link
Owner Author

lyqht commented Oct 6, 2024

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

@lyqht lyqht self-assigned this Oct 6, 2024
@rucksman
Copy link

rucksman commented Oct 8, 2024

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:
image
And as before after selecting everthing, I can see that the elements exist (but are not visible):
image

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

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

@lyqht
Copy link
Owner Author

lyqht commented Oct 9, 2024

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

@lyqht lyqht reopened this Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
help wanted Extra attention is needed
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants