Imagemagick SVG to PDF conversion image quality is bad

问题

We are trying to convert an SVG (width 737, height 521) to PDF of A4 dimensions. The problem is that the quality of images generated is really bad.

Here's what we are doing

SVG (with remote image URLs):

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="737" height="521">
    <g class="background">
        <title>Background</title>
        <image x="0" y="0" width="737" height="521" id="svg_1" xlink:href="http://static.inkive.com/assets/img/backgrounds/default.svg"/>
    </g><g class="main">
        <title>Main</title>
        <image id="svg_2" clip-path="url(#clip_svg_2)" class="layoutBox" height="146" width="195" y="185" x="112" xlink:href="https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-ash3/t1/1779720_10153782785350029_1577015767_n.jpg">112 185 195 146</image>
        <image id="svg_3" clip-path="url(#clip_svg_3)" class="layoutBox" height="146" width="195" y="342" x="112" xlink:href="https://scontent-b.xx.fbcdn.net/hphotos-frc3/t1/1526323_10153667389170029_829908430_n.jpg">112 342 195 146</image>
        <image id="svg_4" clip-path="url(#clip_svg_4)" class="layoutBox" height="146" width="195" y="28" x="112" xlink:href="https://scontent-b.xx.fbcdn.net/hphotos-prn1/t1/1522194_10153655638625029_2110669828_n.jpg">112 28 195 146</image>
        <image id="svg_5" clip-path="url(#clip_svg_5)" class="layoutBox" height="222" width="296" y="28" x="323" xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-prn2/t1/1157459_10153637913840029_1004079041_n.jpg">323 28 296 222</image>
        <image id="svg_6" clip-path="url(#clip_svg_6)" class="layoutBox" height="222" width="296" y="266" x="323" xlink:href="https://scontent-a.xx.fbcdn.net/hphotos-frc3/t1/996689_10153637905215029_532085859_n.jpg">323 266 296 222</image>
    </g>
</svg>

We are downloading the images and creating an SVG with local links as imagemagick's SVG to PDF conversion fails with remote URLs. Here's the SVG with local links-

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="737" height="521">
    <g class="background">
        <title>Background</title>
        <image x="0" y="0" width="737" height="521" id="svg_1" xlink:href="file:///tmp/119810194_default.svg"/>
    </g><g class="main">
        <title>Main</title>
        <image id="svg_2" clip-path="url(#clip_svg_2)" class="layoutBox" height="146" width="195" y="185" x="112" xlink:href="file:///tmp/119810194_1779720_10153782785350029_1577015767_n.jpg">112 185 195 146</image>
        <image id="svg_3" clip-path="url(#clip_svg_3)" class="layoutBox" height="146" width="195" y="342" x="112" xlink:href="file:///tmp/119810194_1526323_10153667389170029_829908430_n.jpg">112 342 195 146</image>
        <image id="svg_4" clip-path="url(#clip_svg_4)" class="layoutBox" height="146" width="195" y="28" x="112" xlink:href="file:///tmp/119810194_1522194_10153655638625029_2110669828_n.jpg">112 28 195 146</image>
        <image id="svg_5" clip-path="url(#clip_svg_5)" class="layoutBox" height="222" width="296" y="28" x="323" xlink:href="file:///tmp/119810194_1157459_10153637913840029_1004079041_n.jpg">323 28 296 222</image>
        <image id="svg_6" clip-path="url(#clip_svg_6)" class="layoutBox" height="222" width="296" y="266" x="323" xlink:href="file:///tmp/119810194_996689_10153637905215029_532085859_n.jpg">323 266 296 222</image>
    </g>
</svg>

We are saving this SVG to a file and are running the following command:

convert -density 600 /var/www/development/assets/img/uploads/119810194_1.svg -resize 3508x2480 /var/www/development/assets/img/uploads/119810194_1.pdf

Output

As you can see, the quality of images in the output PDF is very bad.

Can anyone help me with this? What needs to be done to generate 72 DPI and 300 DPI PDF with better images?

We have tried this with PHP as well, with setResolution(300, 300) but the result was the same.

回答1:

You should not use -resize because that will be done after rasterization. You have to calculate the correct density value (use 72dpi as base). Then you can -crop if the aspect ratio won't fit on your A4 paper.

Size of the A4 paper is 8.27 * 11.7 inches. Using 300 dpi, the longer side is 11.7 * 300 (3510) dots which is 4.76 times the original size (3510 / 737). You have to multiply the density by this much when decoding. Multiplying the default 72 by 4.76 will give you 343.

convert -density 343 in.svg out.pdf

This should give you the right size.

回答2:

Five years later...

Having the same problem and not wanting to rasterize svg (to ensure the best quality), I ended up using CairoSVG:

cairosvg example.svg -o example.pdf

UPDATE: I proposed cairosvg because Inkscape does not run smoothly on Mac! For Linux, refer to the answer by loved.by.Jesus.

回答3:

In a similar vein as @Yan Foto, you can use Inkscape

inkscape example.svg --export-pdf=example.pdf

Installation

Linux

You can install inkscape from your package manager or with apt from your terminal.

sudo add-apt-repository ppa:inkscape.dev/stable
sudo apt update
sudo apt install inkscape

Other OS (win, MacOS)

Download from website

来源：https://stackoverflow.com/questions/21828182/imagemagick-svg-to-pdf-conversion-image-quality-is-bad

标签

svg

ImageMagick