为设计工作把 PDF 转成 SVG

客户把他们的 logo 以 PDF 发过来。你要把它放进 Figma、放到网站上，或者做成图标集。截图只能得到一张模糊的位图，一放大就散了。你真正想要的，是文件里本来就有的那份矢量数据。

PDF 和 SVG 比看起来更像。两者都用数学路径描述形状：移到这里，曲线到那里，用这个颜色填充。对矢量图形来说，两者都不存储像素。正是这个共同的模型，让这种转换是合理的，而不是一次有损的重新解释。

SVG 与分辨率无关。同一个文件在 16 像素的网站图标上和在广告牌上都同样清晰，因为渲染器会按你要求的尺寸去解那些数学式。PNG 有固定的像素网格，一超过就发虚。

SVG 还可以编辑。在 Illustrator、Figma 或 Inkscape 里打开，你得到的是真实的路径，可以改色、改形、改样式。而且因为它是 XML，你可以用 CSS 给它上样式、在浏览器里做动画——一个悬停变色的 logo，在 SVG 上只是几行 CSS，在 PNG 上根本做不到。

简单图形的 SVG 通常还更小。一个双色的扁平 logo，体积可以只有「在高清屏上看着还行的 PNG」的一小部分。

每页一个 SVG，尺寸与页面一致，内含页面图形，上面叠着一层可选中的文字层。文字保持可选中、可搜索，而不是变成一张不透明的图片——如果示意图上有你之后可能要改的标签，或者需要被屏幕阅读器念出来，这一点很重要。

如果 PDF 完全没有文字层，SVG 就只包含图形，而工具会明确告诉你，不会让你自己去发现。

1. 1
   Figma把 SVG 直接拖到画布上。它会作为一个包含可编辑矢量图层的框架进来。取消编组就能拿到单个路径。
2. 2
   Illustrator文件 → 打开。你也可以直接打开 PDF，有时能保留更多东西，但如果文件本来就是要用在网页上，SVG 是更可预期的路线。
3. 3
   InkscapeSVG 是它的原生格式，所以能完全保真地打开，也是清理路径的一个不错的免费选择。
4. 4
   网页想用 CSS 控制就把 SVG 标记内联进页面；只是要显示出来，用 img 标签引用文件即可。要做悬停状态和主题切换，就得内联。

如果 PDF 里含有照片，那张照片是位图，进了 SVG 还是位图。矢量转换无法为像素凭空造出路径数据——照片的本质就是像素。像 PDF 混合模式和柔性蒙版这类复杂效果也不总能干净地转换过去，因为两个格式支持的特性集重叠但不相同。

实用的判断规则：logo、图标、示意图和图表转得很好。照片和大量使用特效的作品，还是保留原文件更合适。