search

kozakdenys / qr-code-styling

Automaticly generate your styled QR code in your web app.
https://qr-code-styling.com
MIT License
1.35k stars 439 forks source link

Downloaded svg does not work in Illustrator #125

Open clausharup opened 2 years ago

clausharup commented 2 years ago

I guess the use of clip-path rather than native path makes the .svg not working in Illustrator :-(

chiptu commented 2 years ago

I have also problem in canva

HenkVanMaanen commented 2 years ago

Same problem. Does anybody have a solution?

chiptu commented 2 years ago

seems linked to this issue https://github.com/kozakdenys/qr-code-styling/issues/92

iamdangavin commented 2 years ago

Forked this and I am working on a version that uses g if you are simply passing a color option. It groups the dots and corners separately and creates a style attribute with the appropriate classes for each g element. If you pass the gradient option it will perform how it currently does with using a clip-path to render whatever element you're using the gradient option on.

Once I get it cleaned up to handle that portion I will focus on getting the clip-path with the gradients cleaned up. Not trying to step on the creators toes here. I really like the options for this library, but I agree with everyone above that the clip-path solution kind of defeats the purpose of the svg use in other programs.

Example

qrcode qrcode-svg-code
HenkVanMaanen commented 2 years ago

@iamdangavin very nice work! Do you know if this impacts the wrong dots orientation problem? See: https://github.com/sallandpioneers/qr-code-styling/commit/638824f8561b165c529f99c88e4af3ad56e99021

And issue:

49

iamdangavin commented 2 years ago

@HenkVanMaanen I wasn't aware of that issue yet, but good good to know. I modified my version to include that swap of the draw order that you referenced in: https://github.com/sallandpioneers/qr-code-styling/commit/638824f8561b165c529f99c88e4af3ad56e99021

I will say, that I am only editing the QRSVG.ts file at the moment. I felt like for the canvas rendering (for me at least) the creation of the svg didn't matter too much because it's contained in the canvas object.

Still working through some things on my end so might take me about another week or so to get it available. Not sure if best plan is to get @kozakdenys to update his repo or we all combine forces and create a new one or something. Any input from anyone is welcome. I just know that it would be great to get this all updated and up on npm.

HenkVanMaanen commented 2 years ago

@iamdangavin any update on this?

chiptu commented 2 years ago

@iamdangavin i would be curious too 👀