Downloaded SVG has no entities

[CaptainLexington]

Downloading an SVG with any settings on Opera and on Firefox creates a 1.98 MB file that has no layers when opened in Inkscape or GIMP.

[sebastienb]

i think this might be an issue with qr-code-styling library

[lyqht]

yeap, this is a result from the library, so the app doesn't have control over this. You can consider making a contribution to the qr-code-styling library.

[CaptainLexington]

If the app can't fix this bug, perhaps at least disable or remove the "Export to SVG" button, since you know it doesn't work?

[CaptainLexington]

Also, without knowing how either of you came to the conclusion that the library was at fault, I'm not able to make a meaningful bug report, let alone attempt to write a fix.

[lyqht]

Hello @CaptainLexington, I understand the issues you raised, let me try to explain more on them.

If the app can't fix this bug, perhaps at least disable or remove the "Export to SVG" button, since you know it doesn't work?

I don't think every user uses an SVG image as an actual SVG image, requiring its layers for modification, that's why the SVG option is still available. Figma does the same where you can export a selection as SVG, and it may not necessarily have all the layers you expected it to have.

For the issue on how we figure out it's the library that is causing the problem, you can try out the official library sandbox, https://codesandbox.io/embed/qr-code-styling-react-example-l8rwl?file=/src/App.js&codemirror=1

Modifying one of the options to SVG to export the qr as SVG, the output also won't have proper SVG layers.

If you look into this project's codebase, what this app does is to add on a background and border in addition to the component provided by this library so that it looks better. So if the core library doesn't have a proper SVG output, it's likely the cause. I assume that's how the other dev guessed it too. But feel free to investigate more if you like.

Another comment for you as the project owner, I think you can phrase your concerns in a nicer way, and not so angrily. This is a open source project I do in my free time outside work, and some others have contributed because they like the project and checked the codebase themselves to understand how it works. I'll be happy to answer questions and try to address issues, but it's not very nice to get strongly phrased demands. Same for open source projects by other folks.

Hope you understand, thanks!

I've reopened the issue if you're still keen to work on it.

[CaptainLexington]

Sorry, I didn't mean to sound rude. I understand that maintaining open source software is just a hobby and requires a lot of time and energy. I responded brusquely because I felt I had been responded to brusquely. I realize now my bug report was incomplete. I tried importing the SVG into an existing file and the result was empty - no QR code was visible, there were no entities, it was empty. I didn't try opening the SVG by itself - it didn't occur to me try - so I thought that the downloaded file was itself empty, with just 2 MB of metadata and boilerplate. That's why I thought it was odd this bug was closed - even if the bug was upstream, it seemed one feature of the app did not work at all as a result. I was wrong.

Having tried it now, I see that opening the SVG in my browser works correctly. So the "Export to SVG" button does work, even if the SVG produced may be malformed in some way. Again, my apologies.

As you may infer, I am not an SVG expert and I am very unlikely to be able to fix this. You can close the issue.

Thank you, though, for making far and away the best SVG generator on the internet, and running it for free and without ads.

[lyqht]

Sorry, I didn't mean to sound rude. I understand that maintaining open source software is just a hobby and requires a lot of time and energy. I responded brusquely because I felt I had been responded to brusquely. I realize now my bug report was incomplete. I tried importing the SVG into an existing file and the result was empty - no QR code was visible, there were no entities, it was empty. I didn't try opening the SVG by itself - it didn't occur to me try - so I thought that the downloaded file was itself empty, with just 2 MB of metadata and boilerplate. That's why I thought it was odd this bug was closed - even if the bug was upstream, it seemed one feature of the app did not work at all as a result. I was wrong.

Having tried it now, I see that opening the SVG in my browser works correctly. So the "Export to SVG" button does work, even if the SVG produced may be malformed in some way. Again, my apologies.

As you may infer, I am not an SVG expert and I am very unlikely to be able to fix this. You can close the issue.

Thank you, though, for making far and away the best SVG generator on the internet, and running it for free and without ads.

No worries, i'm glad we got the misunderstanding sorted, happy to hear that the SVG files are displaying as intended for you.

Just some trivia on SVG file export:

The QR codes in this project README are also SVG files that were directly exported from the app - so they should be displayed fine in most places where you use the file.

It's also very common in many apps that the SVG file exported won't be formed in the best way e.g. they may not use the best shape elements/entities for creating the image, even though the image still looks as intended. That is unless you use designer tool apps like Adobe Illustrator where you created the shapes manually yourself, then the exported SVG file will have more accurate entities. But as a developer, if you prioritize getting an optimized file size version of the SVG file by compressing them with a tool like SVGOMG, you will lose some of these entities too.

Unless you're animating the shapes/entities individually in the SVG file using web animations, it is usually ok if the SVG file is not formed in the best structure it can be.

Hope this trivia is helpful.

[lyqht]

hi @CaptainLexington, good news i finally got some time and merged a fix #54

[CaptainLexington]

Amazing, thank you so much!