qr-code-styling
qr-code-styling copied to clipboard
kozakdenys
Exported svg clip paths cannot be imported into other tools
Hi,
I am exporting a QR Code with some basic settings (see below). The QR Code is readable by browser and file previewer. However, once I import it into Figma, I get the following (see attached screenshot). As far as I understood this is due to clip paths, that are currently not supported by Figma. Is it possible to export svg without clip paths, such that every tool is able to read the file correctly? If not is there a workaround you can propose (i.e. tools for converting clip-paths to whatever)? Thanks!
This Could be Fixed By Removing the Clip Path Method Of Assigning Color to Doc and Using Class and Style Blocks to Handle this.
I was looking into it (code wise) and switching "http://www.w3.org/2000/svg", "clipPath" to "http://www.w3.org/2000/svg", "g". and add .setAttribute("class", 'QR'); then you add a style block inside the SVG element then set the chosen color to the QR element. But this will break any gradient flowing across the QR. the fix could be doing what is talked about in this thread https://stackoverflow.com/questions/53101754/how-do-i-fill-several-svg-path-by-one-gradient. Which might not work on the gradient too but at least where supported the gradient will display and where not it will fail over and still show a QR code.
Alright. Thank you haven't tried it yet. However, this seems rather complicated and is likely not viable. Also not sure what other tools might support that or not. Seems that the SVG standard isn't that standard after all (due to multiple versions) and various degree of implementation in some tools (i.e. Figma).
EDIT: Not sure if I understood this correctly. Do you suggest an implementation that you can add to this package? Or is this a workaround I can use to import this into Figma?
The (g) tag has been standard in svgs since their initial development. While complicated it should be more widely supported than clip paths. The clip path is only needed for gradients to be rendered across the qr. I'd you don't have to have gradients then it's as simple as modifying the Js to generate it all in a group and not clip path.
On Mon, Jan 3, 2022, 2:28 AM Stefan Neidig @.***> wrote:
Alright. Thank you haven't tried it yet. However, this seems rather complicated and is likely not viable. Also not sure what other tools might support that or not. Seems that the SVG standard isn't that standard after all (due to multiple versions) and various degree of implementation in some tools (i.e. Figma)
— Reply to this email directly, view it on GitHub https://github.com/kozakdenys/qr-code-styling/issues/92#issuecomment-1004030632, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGIXG63RIWOMRHJVJBITVR3UUGB7JANCNFSM5HYJMERA . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you commented.Message ID: @.***>
