svg - Imagemagick SVG 到 PDF 转换图像质量很差

Question

我们正在尝试将 SVG(宽度 737，高度 521)转换为 A4 尺寸的 PDF。问题是生成的图像质量非常糟糕。

这是我们正在做的

SVG(带有远程图像 URL):

<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>

我们正在下载图像并创建带有本地链接的 SVG，因为 imagemagick 的 SVG 到 PDF 转换因远程 URL 失败。这是带有本地链接的 SVG-

<?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>

我们正在将此 SVG 保存到文件中并运行以下命令:

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

Output

如您所见，输出 PDF 中的图像质量非常差。

谁能帮我这个？需要做什么才能生成具有更好图像的 72 DPI 和 300 DPI PDF？

我们也用 PHP 尝试过，使用 setResolution(300, 300) 但结果是一样的。

Answer 1

你不应该使用 -resize因为这将在光栅化后完成。您必须计算正确的密度值(使用 72dpi 作为基础)。那么您可以-crop如果纵横比不适合您的 A4 纸。

A4 纸的尺寸为 8.27 * 11.7 英寸。使用 300 dpi，长边为 11.7 * 300 (3510) 点，是原始尺寸 (3510/737) 的 4.76 倍。解码时，您必须将密度乘以这么多。将默认值 72 乘以 4.76 将得到 343。

convert -density 343 in.svg out.pdf

这应该给你合适的尺寸。