Imagemagick将SVG转换为PDF的图像质量很差

Question

我们正在尝试将一个宽度为737，高度为521的SVG转换成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

输出

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

有人能帮我解决这个问题吗？需要做什么才能生成72 DPI和300 DPI的PDF并获得更好的图像质量？

我们也尝试了PHP的setResolution(300, 300)，但结果仍然相同。

- Sayan Bhattacharyya

---

似乎它正在缩放光栅输出而不是矢量。 - BillyBigPotatoes

Answer 1

您不应该使用-resize，因为这将在栅格化后完成。您需要计算正确的密度值（以72dpi为基础）。然后，如果纵横比不适合A4纸张，可以使用-crop进行裁剪。

A4纸张的尺寸为8.27 * 11.7英寸。使用300 dpi，较长的一侧是11.7 * 300（3510）个点，这是原始大小的4.76倍（3510 / 737）。解码时，您必须将密度乘以这么多。将默认的72乘以4.76，将给您343。

convert -density 343 in.svg out.pdf

这应该会给你正确的尺寸。

- vbence

---

@ZachLeighton 修正了示例命令。（解决方案一直很好）。 - vbence

@ZachLeighton，这个工作非常顺利，但转换后的.pdf文件仍然是一张图片。尝试在pdf文件中搜索单词或句子没有返回结果 :( - ass-king some questions

Answer 2

与@Yan Foto类似，您可以使用Inkscape

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

与cairosvg相比的优势： Inkscape可以将原始.svg文件的元数据（作者、创建者，来源等）保留到转换后的.pdf文件中。

安装

Linux

您可以通过软件包管理器或在终端中使用apt来安装Inkscape。

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

其他操作系统（Windows，MacOS）

从网站下载

- loved.by.Jesus

Answer 3

五年后...

遇到同样的问题，而且不想让SVG光栅化（以确保最佳质量），最终我采用了CairoSVG：

cairosvg example.svg -o example.pdf

更新： 我建议使用cairosvg，因为Inkscape在Mac上运行不流畅！对于Linux，请参考loved.by.Jesus的答案。

- Yan Foto