Skip to content

Reduce SVG output size by using CSS and paths#41

Open
Oblomov wants to merge 5 commits into
fukuchi:masterfrom
Oblomov:svg-path
Open

Reduce SVG output size by using CSS and paths#41
Oblomov wants to merge 5 commits into
fukuchi:masterfrom
Oblomov:svg-path

Conversation

@Oblomov

@Oblomov Oblomov commented Feb 8, 2014

Copy link
Copy Markdown

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

d4ndo commented Feb 8, 2014

Copy link
Copy Markdown
Contributor

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

Oblomov commented Feb 8, 2014

Copy link
Copy Markdown
Author

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

@Oblomov

Oblomov commented Feb 8, 2014

Copy link
Copy Markdown
Author

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

Oblomov commented Feb 15, 2014

Copy link
Copy Markdown
Author

(Rebased on current master.)

@fukuchi

fukuchi commented Feb 18, 2014

Copy link
Copy Markdown
Owner

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

Oblomov commented Sep 21, 2014

Copy link
Copy Markdown
Author

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

fukuchi commented Oct 2, 2014

Copy link
Copy Markdown
Owner

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

Oblomov commented Oct 6, 2014

Copy link
Copy Markdown
Author

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

fukuchi commented Oct 6, 2014

Copy link
Copy Markdown
Owner

@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
Copy Markdown

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

fukuchi commented May 5, 2015

Copy link
Copy Markdown
Owner

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

@fukuchi fukuchi force-pushed the master branch 4 times, most recently from 0577499 to cf2b1a8 Compare October 5, 2017 06:06
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