跳到主要内容

SVG 转 PDF

把 SVG 画成位图再嵌进 PDF。可选倍数或自定义宽度,背景可以透明、白底或自定颜色。多个文件会打成 PDF 的 ZIP。文件留在浏览器里。

要 PNG,用SVG 转 PNG。两种方向一起处理用SVG 转换器。继续改矢量用SVG 编辑器。

没有图片?试一张示例

输出尺寸
导出倍数

本页固定导出 PDF。PDF 里嵌的是位图,不是矢量路径。1 像素对应 1 点(1/72 英寸)。长边不超过 4096 像素。

长边不超过 4096 像素。超出的请求会按比例缩小,文件卡片上会说明。

外链图片、脚本和 foreignObject 会被去掉。字体可能回退,动画和滤镜不一定保留。倍数不是印刷 DPI。

背景

SVG 转 PDF 是什么?

这个页面先把 SVG 画成位图,再把这张图嵌进一页 PDF。可以直接拖进来、选文件,或粘贴 <svg 文本。处理在浏览器里完成,文件不会上传。

这份 PDF 不是矢量文件。路径先画成像素,再放到页面上。1 像素等于 1 点(1/72 英寸)。页面不会适配到 A4。尺寸可以是倍数(1×、2×、3×),也可以是自定义宽度(像素)。高度按宽高比计算。长边超过 4096 像素时会按比例缩小,文件卡片上会说明。

默认背景是透明,存在嵌入的 PNG 里。有些阅读器仍会在透明像素后面铺白。白色或自定颜色会在嵌入前把图像铺底。多个文件各自一份 PDF,也可以打成 ZIP。

适合什么时候用

  • 幻灯片、印厂或表单只要 PDF,不收 SVG
  • 需要固定像素尺寸,而不是无限清晰的矢量
  • 想要和 SVG 转 PNG 同一张图,只是包进 PDF 页

要保留可编辑路径,从 PNG 转 SVG 下载 SVG,或在 SVG 编辑器 里改。要在 PNG、JPG、WebP 和 PDF 之间切换,用 SVG 转换器。

原理

这份 PDF 是位图的外壳,在浏览器里生成:

  1. 清洗。 脚本、javascript: 地址、外链图片和 foreignObject 会去掉,和 SVG 转 PNG 同一套。标记从 blob URL 绘制,不会插进页面。
  2. 画到画布。 按你选的倍数或自定义宽度画成像素。除非选了铺底颜色,透明会留在嵌入的 PNG 里。
  3. 缩放再嵌入。 长边不超过 4096 像素。pdf-lib 把这张位图放进一页,1 像素对应 1 点。原来的路径不会写进 PDF。

描摹是另一条路径。PNG 转 SVG 会做颜色量化并拟合曲线,而且先把源图长边缩到 1024 像素。

隐私

文件不会离开你的浏览器。SVG 由本地 File 接口读取,在这台设备的画布上绘制,再在这里打成 PDF。只有导出时才在页面里加载 pdf-lib。不会把文件发到服务器。

边界

  • 嵌入的是位图。放大 PDF 会看到像素,不会长出新的矢量。
  • 预览和栅格化都通过 blob URL 放进 <img>。按 MDN 对 img 元素的说明,这样使用的 SVG 不会执行脚本。
  • 外链图片、javascript: 地址、脚本和 foreignObject 会在导出前去掉。@font-face 和页面字体在「SVG 当作图片」时不可靠,字体会回退。
  • 单文件不超过 8 MB。一次大约可以导出 10 个文件。导出长边不超过 4096 像素。其他页面的描摹会先缩到 1024 像素再拟合曲线。
  • 这里的 PDF 是带图像 XObject 的一页,由浏览器里的 pdf-lib 生成。只有真正导出 PDF 时才加载 pdf-lib。

参考资料