将SVG图案转换为PDF打印时会变成光栅图。

Question

我正在尝试创建一个SVG文件，当打印到PDF时，所有部分都保持为矢量。该文件使用图案作为路径填充，或在下面的示例中用作rect元素的填充：

    <svg
        width="200"
        height="200"
        viewBox="0 0 200 200"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
        className="productWrapper"
      >
        <defs>
          <pattern id="pattern" x="0" y="0" width="1" height="1">
            <path
              fill="#fcc"
              d="[vector path here]"
            />
          </pattern>
        </defs>
        <rect fill="url(#pattern)" stroke="black" width="200" height="200" />
      </svg>

我面临的问题是，当转换为PDF格式时，SVG文件中顶级rect元素或任何path保持矢量，但pattern内的所有矢量内容都被栅格化。请参考以下链接中的一个非常简单的示例： https://6j8953j8rn.codesandbox.io/ 有什么方法可以在将SVG转换为PDF时以矢量方式呈现？

- Luis Martins

---

你如何将它们“打印”成PDF？ - Sirko

@Sirko 我将使用 Puppeteer，但我已确认使用浏览器打印功能进行 PDF 打印时，结果是相同的。 - Luis Martins

最终有人解决了吗？我也遇到了同样的问题。 - Jonathan Heinen

@JonathanHeinen 很抱歉，这是浏览器处理SVG的限制，所以上次我查看时没有解决方法。 - Luis Martins

Answer 1

一个在将SVG（包括<pattern>）转换为PDF后仍保留矢量信息的工具（我使用它作为CLI）是https://github.com/typst/svg2pdf。

一些在线转换器也可以做到，而我尝试过的大多数其他工具都会将<pattern>内的内容变成光栅图。

- Legonaftik