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

Reduce SVG output size by using CSS and paths #41

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

Oblomov
Copy link

@Oblomov Oblomov commented Feb 8, 2014

This commit series obtains a reduction of the output SVG size by a factor of 7, by enacting the following changes:

  • using CSS instead of tag attributes for colors and opacity; this, by itself, is enough to reduce the SVG size by about 30% to 50%, depending on whether colors have an alpha channel or not;
  • using a single path instead of a number of rects to describe the ‘foreground’ of the QR Code; this is true gainer (7× size reduction).

As a bonus, there is a patch that makes the SVG ‘dimensionless’ when the DPI is set to 0. I also needed autogen.sh to create the m4 directory, so I've included a patch to do that.

@d4ndo
Copy link
Contributor

d4ndo commented Feb 8, 2014

Hi @Oblomov.

I like the idea with the styles instead of tag attributes. But please have a look at issue #28 .
qrencode --rle does have a similar behavior as using a single path.
A single path would rather be an improved version of rle (run length encoding) instead of default behavior.

thx.

@Oblomov
Copy link
Author

Oblomov commented Feb 8, 2014

Good point. I will rework the patch set to change only the rle path then.

@Oblomov
Copy link
Author

Oblomov commented Feb 8, 2014

Ok I've updated the patch set. Now the last commit only changes the RLE behavior, leaving the non-RLE path with a rectangle for each bit.

@Oblomov
Copy link
Author

Oblomov commented Feb 15, 2014

(Rebased on current master.)

@fukuchi
Copy link
Owner

fukuchi commented Feb 18, 2014

Hi @Oblomov , thank you for your contribution. It seems great, but couple of tests with some tools is required. Give me some time to do it.

This produces a smaller SVG (about 30% smaller for SVG without
alpha channels, closer to 50% with alpha channels).
Allow the generation of SVGs without explicit dimensions set by setting
DPI to 0. Since SVGs are perfectly scalable, there is no need to set the
size, in general.
This reduces the SVG output size by nearly a factor of 7. As a bonus,
rendering of the resulting SVG at high resolutions does not show the
striping which was clearly visible with the previous approach.
Most scanlines are built from alternating small strides of black and
white pixels, therefore using relative motions results in smaller
numbers passed to the `m` command. On the larger QR Codes this can lead
to savings of as much as 30% of the previous output file size in RLE
mode.
@Oblomov
Copy link
Author

Oblomov commented Sep 21, 2014

Hello, any news about this?

The changeset has been updated on top of latest master. You may want to cherry-pick ef6fcd2, which fixes an off-by-one, regardless of the rest of the changeset.

@fukuchi
Copy link
Owner

fukuchi commented Oct 2, 2014

Hello @Oblomov,

I have just tested your patch. While it works very well with Inkscape, OpenOffice's Draw could not load the SVG file. Probably it means OO does not support style element but I'm not sure. Would you mind to test it?

@Oblomov
Copy link
Author

Oblomov commented Oct 6, 2014

I can confirm that the SVG is not displayed correctly by:

  • LibreOffice (even the latest development branch)
  • imagemagick
  • and in general anything that depends on librsvg, which apparently doesn't handle CSS stylesheets in SVG correctly

I would say that these are bugs in librsvg/LibreOffice (that should be fixed upstream: the respective bugzillas mention related issue), but I can understand if you'd rather wait for these to be fixed before merging.

@fukuchi
Copy link
Owner

fukuchi commented Oct 6, 2014

@Oblomov ,

Thank you for the study. I encourage you to post the report to librsvg's community. As you concluded, let us wait for these to be fixed because librsvg is widely used.

I'll keep this request open till the issue is resolved by librsvg.

@ConnyOnny
Copy link

Can we please already merge the "one path" patch, without using the problematic css part yet? That would help with some rendering problems (more details in the link below).
https://cberhard.wordpress.com/2015/01/15/qrencode-svg-avoid-white-lines-between-pixels/

@fukuchi
Copy link
Owner

fukuchi commented May 5, 2015

I have cherry-picked @Oblomov 's single path hack to the main trunk. See b4205db. 1e91256 is not cherry-picked yet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants