Weasyprint: Unexpected SVG crop

Created on 31 Jul 2016 · 12Comments · Source: Kozea/WeasyPrint

Weasyprint 0.30 scales down svg image and crops it.
Source html:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <img src="naturelogofinal.svg" class="fit"/>
    <img src="naturelogofinal.png" class="fit"/>
</body>
</html>

style.css:

@page {
    size: A4 portrait;
    margin: 1cm;
}

img.fit {
    width: 100%;
    border: 1px solid black;
}

However same picture in png format works fine.
First image is SVG and the second one is PNG:

PNG and SVG images used:
naturelogofinal.zip

Source

mofr

Most helpful comment

I'm happy to inform that with the currently latest snapshot of cairo (1.15.4 available from the snapshots section) the problem seems to be fixed. Unfortunately this is not a stable release of cairo, but there were news on the website that the project has a new maintainer which hopefully means renewed energy to produce releases too.

_For those who like to try, this is how I did on Ubuntu:_
Build instructions in the source package were rather easy to follow and in Ubuntu it was really easy to get all the dependencies (include headers) right using apt-get build-dep cairo after adding the source repository to installation sources.
Unpack package with tar -xJf cairo-1.15.4.tar.xz
The regular:
./configure
make
sudo make install
Test by pointing to the newly built library (installed to /usr/local/lib by default):
LD_LIBRARY_PATH=/usr/local/lib weasyprint index.html Document.pdf

jmidgren on 12 May 2017

🎉3 ❤1

All 12 comments

Looks like #278: do you have the latest version of cairo?

If you do, could you please try to generate the PNG from the SVG with CairoSVG (cairosvg image.svg -o image.png)?

(Edit: it works for me.)

liZe on 1 Aug 2016

I have tried my currently installed version of cairosvg (1.0.22) and it produces correct result.
Command line: cairosvg naturelogofinal.svg -o naturelogofinal.png.
Sorry, is it related to initial problem? I thought that the issue is how the large image scaled down.

mofr on 1 Aug 2016

As your example works for me, I really think that your problem is #278. Could you try to install the latest version of cairo ?

liZe on 1 Aug 2016

I have tried cairosvg==2.0.0rc4, nothing changed. I double checked that really new version of cairosvg was used.

mofr on 2 Aug 2016

You have to update Cairo, not CairoSVG :wink:.

liZe on 2 Aug 2016

So I have updated cairo up to version 1.15.2 (previous was 1.14.2) - no changes.

mofr on 5 Aug 2016

@mofr Oh, my bad, sorry… The patch of #278 was merged in cairo 4 months ago, but no version has been released since (even 1.15.2 doesn't have it). So, to fix your problem, you can:

install the current git version of Cairo, or
apply the patch on a released version.

liZe on 5 Aug 2016

Current git version doesn't have patch applied (git://anongit.freedesktop.org/git/cairo). So I have applied patch to release version (1.15.2) and nothing changed.
And you have correct output with my example? Both svg and png images are scaled to fit the page width, looks similar and no cropping applied?

mofr on 5 Aug 2016

And you have correct output with my example?

Yes! I've generated a PDF and a PNG, from the HTML and the CSS of this issue, and it works.

test

Current git version doesn't have patch applied

Yes, it does! In the log, the commit is called "Use surface_transform in replay_and_create_regions". I've even cloned the repository to be sure :smile:.

I've tried without the patch: when I generate a PNG it works, when I generate the PDF it's cropped exactly as your screenshot.

Instead of generating a PDF, try to generate a PNG. If the PNG is OK while the PDF is cropped, you can be sure that it's caused by the bug in Cairo fixed by the patch.

liZe on 6 Aug 2016

I have the same problem, and the mentioned patch is unfortunately not in the sources since June ...
Also, requiring the upgrade of cairo in order to avoid this bug is a real bad solution. Cairo is used in so many places it just breaks stuff...

oz123 on 12 Aug 2016

I have the same problem, and the mentioned patch is unfortunately not in the sources since June ...

I'm really sorry about that. As explained in #278, I've reported the bug (and even provided a patch) 4 times since 2013, and it's only been merged in April 2016.

No stable or unstable version of Cairo has been released since December 2015. The Cairo team doesn't follow the "release early, release often" philosophy, mainly because they don't have the needed manpower.

Also, requiring the upgrade of cairo in order to avoid this bug is a real bad solution. Cairo is used in so many places it just breaks stuff...

I've spent days trying to reproduce the bug with a simple C sample. And I failed. You can't imagine the time I've spent to write this patch: I don't know how to write C code, I didn't know how Cairo works, and I wasn't even sure that the bug was in Cairo when I tried to find the source of the problem.

As you say, Cairo is used in so many different projects that they can't release new versions when they want. They have an increadible amount of tests, and even with them it's impossible to add features and fix bugs without breaking a thing or two.

This library is a mess, but it's awesome. I've been angry against this project and their maintainers many times, I've been really disappointed to wait 3 years (!!!!) before getting my patch merged, but I must say that I didn't find another cross-platform, high-quality, high-speed library with the same features.

Other browsers (Firefox and Chrome for example) have forked Cairo or developped another equivalent library to fit their needs and avoid this kind of problems. Of course, we'd like to ditch external libraries like Cairo or Pango (see #52, #301 and many, many other issues) because they're not perfect. But then, read the really small description of the Cairo library on their really small home page.

A "2D graphics library with support for multiple output devices", "designed to produce consistent output on all output media", with an "API provid[ing] operations similar to the drawing operators of PostScript and PDF" "including stroking and filling cubic Bézier splines, transforming and compositing translucent images, and antialiased text rendering". These "operations can be transformed by any affine transformation (scale, rotation, shear, etc.)". It's "implemented as a library written in the C programming language, but bindings are available for several different programming languages".

Not that bad, huh! And WeasyPrint currently relies on all these points.

(Just thinking about re-implementing antialiased text makes me sick. And I'm not even talking about hinting.)

I don't want to blame them for providing such a piece of free and open source software. Mozilla and Google want to take the time to create their own libraries with the same features? We don't.

But it doesn't mean that I will provide workarounds for each bug in each version for each OS of Cairo. You can find many bugs in this bug tracker caused by Cairo. They depend on so many different parameters that trying to find when we have to apply the workaround is a good thesis subject.

Can you imagine that WeasyPrint dropped the Python 2.6 only 2 weeks ago? Python 2.6 has been released in 2008!!! WP's code is full of disgusting legacy code because of that. We even have some code in tests checking Cairo's version. Issues like #132 drive me crazy. I'm not ready to add a workaround to fix a bug that's been fixed upstream, that cost me days fixing upstream, and that will need another workaround when a new version is released.

(It's 2:40AM, time to sleep :stuck_out_tongue_winking_eye:.)

liZe on 12 Aug 2016

👍1