endroid / qr-code

QR Code Generator
https://endroid.nl
MIT License
4.45k stars 726 forks source link

Remove explicit width and height from SVG format #381

Closed iquito closed 2 years ago

iquito commented 2 years ago

I would like to suggest to remove the explicit width and height values on the <svg> element in SvgWriter, as they make it difficult to inline an SVG and are not necessary.

A big plus of SVG files compared to other file formats is the option to directly inline them into HTML (as the SVG format is valid within HTML, at least if you also remove the XML declaration), but an explicit width and height for inlined SVGs also determine the size of the SVG within the document (this is not the case when you include the SVG from a file or inline it with an <img>-data element), making it difficult to set a reasonable size of the SVG as it does not adapt to its parent container size. If you need more explanation on this, this blog article should make it clearer.

An explicit width and height is not necessary to render the SVG, as the viewBox attribute already covers the size of the SVG and the whole format is built around being adaptable to different sizes, not just one size. As far as I experienced it, old Internet Explorer versions had some bugs around SVGs where sometimes explicit width/height helped (not always though), but these have long been unsupported, and inlining SVGs is a much more likely use case nowadays, especially with a QR code, so making it easier to inline SVGs would be a big plus from my perspective.

Not much to do in terms of code changes except to not add the attributes for width and height on the svg element - I can make a pull request if that would help.

Trismegiste commented 2 years ago

Firefox also has bugs with SVG without height/width when drawing in a <canvas>

https://bugzilla.mozilla.org/show_bug.cgi?id=700533

iquito commented 2 years ago

I am not sure how adding a QR code SVG image in a canvas element via the Javascript drawImage function (as that is the very specific case of that bug) would commonly occur when showing a QR code somewhere - that seems like a niche Firefox bug that will be hard to encounter.

Including an SVG directly in a HTML document on the other hand is a common use case of SVG in browsers, and one of the strengths of the format, but only if the width/height can adapt to its container, which only works without explicit width/height definitions.

endroid commented 2 years ago

Hi @iquito I understand, good point. I could create a BC solution by adding a writer option / flag to include (default) or exclude the explicit dimensions in the svg element if you like.

endroid commented 2 years ago

Writer option is now available from release 4.5.0.