分类:
摘要:
针对Photoshop导出SVG的需求,2025/2026年主要有三种可靠途径:利用内置“导出为”功能转换图层,借助路径复制后粘贴到Illustrator再保存,以及安装第三方扩展直接输出矢量格式,每种方法都适用于不同场景。

从 2021 年的 22.4.3 版本起,Adobe 移除了 Photoshop 原生的 SVG 导出功能。默认情况下,「存储为(Save As)」和「导出为(Export As)」对话框中不再提供 SVG 选项。

以下三种方法在 2025/2026 年仍然有效:

  • ① 旧版导出为(Legacy Export As)(在首选项中启用)
  • ② 从右键菜单复制 SVG(Copy SVG)
  • ③ 通过 Illustrator / Inkscape 中转

导出 SVG 需要矢量图层——栅格图像无法变成真正的矢量。请根据你的文件类型选择合适的方法。


在首选项中启用旧版导出为(Legacy Export As)

Adobe 在推出新版「导出为」对话框时移除了 SVG 选项,但留下了一个兼容性复选框。此方法可恢复旧的导出面板,其中仍提供 SVG 格式。

检查首选项中的复选框

  1. 打开首选项: 前往「文件(File)→ 首选项(Preferences)→ 导出(Export)」(Windows)或「Photoshop → 首选项(Preferences)→ 导出(Export)」(macOS)。
  2. 勾选复选框: 勾选「使用旧版导出为(Use Legacy Export As)」。无需重启——更改会立即生效。
  3. 打开旧版对话框: 前往「文件(File)→ 导出(Export)→ 导出为(Export As)」。旧版面板会显示,格式下拉菜单中包含 SVG。

Photoshop Preferences Export panel with Use Legacy Export As checkbox highlighted, showing the menu path File → Export → Export As

首选项中的「使用旧版导出为」复选框可恢复包含 SVG 格式的旧版导出为对话框。

✔ 提示

为了获得最佳效果,在打开「导出为」之前,请确保图层是矢量形状或路径。如果 SVG 选项呈灰色,则说明当前图层包含栅格内容——请先将其转换为形状。

在 Rosetta 下运行 Photoshop(仅限 Apple Silicon)

在搭载 Apple Silicon(M1、M2、M3 芯片)的 Mac 上,除非 Photoshop 在 Rosetta 模拟下运行,否则「使用旧版导出为」复选框可能不可见。这是一个已知的限制,已被多位用户在 r/photoshop 社区 中确认。

  1. 在 Finder 中找到 Photoshop(应用程序文件夹)。
  2. 右键单击应用图标,选择「显示简介(Get Info)」。
  3. 在「通用(General)」部分勾选「使用 Rosetta 打开(Open using Rosetta)」。
  4. 重启 Photoshop。「使用旧版导出为」复选框现在会出现在首选项中。

⚠ 注意

在 Rosetta 下运行可能会略微影响性能。导出后可以取消勾选并正常重启——偏好设置一旦启用就会保持。

从旧版对话框导出

启用旧版面板后,选择「文件(File)→ 导出(Export)→ 导出为(Export As)」。在格式下拉菜单中选择 SVG。需要检查的关键设置:

  • 缩放(Scale): 除非需要特定尺寸,否则保持 1×——SVG 是分辨率无关的。
  • 保留形状(Preserve Shapes): 保持勾选以保留可编辑的矢量路径。
  • 包含元数据(Include Metadata): 对于网页中使用的 SVG,通常关闭。

✔ 平台总结

Windows —— 旧版导出为直接可用。Mac Intel —— 直接可用。Apple Silicon —— 需要 Rosetta。


使用右键菜单复制 SVG(Copy SVG)

在 Photoshop 2025 中,矢量图层的右键上下文菜单新增了「复制 SVG(Copy SVG)」选项。该方法由 Reddit 用户 swnest 首次记录,并被数十位用户证实。它无需更改任何首选项,是处理单个矢量图层的最快路径。

右键单击图层并选择「复制 SVG」

  1. 在图层面板中选择一个矢量图层——形状图层、转换为形状的文字或路径。
  2. 右键单击该图层(或在单键鼠标上 Ctrl+单击)。
  3. 从上下文菜单顶部选择「复制 SVG」。如果看不到该选项,请确保图层是矢量——该选项仅对矢量内容出现。

Photoshop right-click context menu showing Copy SVG option at the top for a vector shape layer

当选中矢量图层时,右上角的菜单顶部会显示「复制 SVG」选项。(来源:YouTube 教程演示)

⚠ 常见遗漏

有些用户会在菜单底部寻找该选项,而它实际位于顶部,就在图层名称下方。如果缺失,图层很可能包含栅格数据。

粘贴并保存 SVG 文件

  1. 打开文本编辑器(Mac 上使用文本编辑,Windows 上使用记事本,或任意代码编辑器)。
  2. 粘贴复制的内容——显示为 XML 标记。这是正常的。
  3. 以 .svg 扩展名保存文件。在 Mac 上,使用「存储为…」并选择「如果未提供扩展名,则使用 .txt」,然后在 Finder 中重命名为 .svg。在 Windows 上,直接命名为 filename.svg。
  4. 替代方案: 粘贴到 svgviewer.dev(一个免费的在线 SVG 查看器)中,可以直接预览和下载文件——无需文本编辑器。

理解你得到的内容

复制 SVG 方法能精确保留纯矢量路径——描边、填充和形状仍可编辑。但是,如果图层带有蒙版,可见结果会作为栅格图像嵌入到 SVG 包装器中。文件仍以 SVG 方式打开,但蒙版区域并非真正的矢量。

✔ 何时使用此方法

最适合单个形状图层、由矢量路径构成的标志、以及已转换为形状的文字。应避免用于带有蒙版、智能对象或组图层的图层。


通过 Adobe Illustrator 或免费替代工具导出

对于复杂文件——包含多个组、图层效果、混合矢量与栅格内容——最可靠的途径是通过专用的矢量工具。Adobe Illustrator 原生支持 SVG,Inkscape 和 Vectr 等免费选项在大多数情况下也表现良好。

在 Illustrator 中打开 Photoshop 文件

  1. 保存你的 PSD,然后在 Illustrator 中直接打开(文件(File)→ 打开(Open) 或将该文件拖放到 Illustrator 图标上)。
  2. 检查导入结果: Illustrator 会保留图层、形状和路径。某些图层效果(如投影、发光)可能会栅格化——请检查外观面板。
  3. 导出为 SVG: 前往「文件(File)→ 存储为(Save As)」并选择 SVG。SVG 选项对话框允许你选择编码、字体类型和 CSS 属性。

CreativePro 推荐此方法,作为生产级 SVG 的两个可靠变通方案之一。

使用在线工具追踪栅格作品

如果你的 Photoshop 文件包含栅格作品(像素、照片、绘画元素),且你需要真正的矢量 SVG,则必须追踪它——将像素转换为路径。选项包括:

  • Illustrator 的图像追踪(Image Trace) —— 高度可配置,对于标志和插图效果最佳。
  • Inkscape 的追踪位图(Trace Bitmap) —— 免费、开源,适合简单形状。
  • 在线矢量化工具 —— 方便,但通常会降低质量,尤其是对于带有透明背景的手写文字或精细细节。

⚠ 警告

免费在线转换器经常无法正确处理透明度和细笔画。对于手写或草书文字,使用复制 SVG 方法或 Illustrator 会产生明显更清晰的结果。一位 Reddit 用户指出,在处理透明手写元素时,“大多数转换器都会搞砸”。

使用 Photoshop 生成器(Generator)批量导出

Photoshop 内置的生成器(Generator) 功能可以一步将多个图层导出为单独的 SVG 文件——非常适合图标集或设计系统。

  1. 启用生成器: 前往「文件(File)→ 生成(Generate)→ 图像资源(Image Assets)」。
  2. 在图层面板中直接重命名图层,添加 .svg 后缀(例如 icon.svg)。
  3. 保存 PSD —— 生成器会将每个命名的图层作为单独的 SVG 文件导出到 PSD 所在的文件夹中。

✔ 注意

生成器仅从矢量图层导出 SVG。栅格图层或智能对象即使命名为 .svg,也会被导出为 PNG。请在浏览器中检查每个输出,以确认它确实是矢量。


修复常见的 SVG 导出错误

即使使用方法正确,Photoshop 的 SVG 导出也可能产生意料之外的结果。以下是社区反馈中最常见的问题及解决方法。

描边显示为双倍或填充错误

描边效果——尤其是设置为「外部(Outside)」或「内部(Inside)」位置时——经常在 SVG 中渲染出错。Adobe 社区讨论帖 中展示了双倍描边和偏移填充的问题。

  • 解决方法: 在导出前将描边对齐设置为居中(Center)。如果设计允许,可以将描边图层栅格化并作为 PNG 嵌入——但这会牺牲矢量可缩放性。
  • 替代方案: 导出不带描边的形状,然后在 Illustrator 或你的矢量编辑器中重新应用描边。

⚠ 已知限制

Photoshop 的 SVG 导出器无法准确转换内部/外部描边定位。居中对齐的描边可以可靠导出。

来自组/智能对象的空白或栅格化 SVG

如果你的 SVG 打开为空白文件或显示为栅格图像而非矢量,源图层很可能涉及组或智能对象。复制 SVG 和旧版导出方法仅适用于单个矢量图层。

  • 解决方法: 将组合并为单个形状图层(图层 → 合并形状(Layer → Merge Shapes)),或栅格化智能对象并使用 Illustrator/Inkscape 中转来追踪。
  • 对于复杂文件: 使用 Illustrator 打开 PSD——它能更可预测地处理组合智能对象。

透明文字在在线转换器中变得杂乱

带有透明背景的手写或草书文字在通过免费网页转换器时经常产生伪影——锯齿边缘、描边丢失或内部填充。这是因为许多转换器在矢量化之前会压平透明度。

  • 解决方法: 使用复制 SVG 方法(如果文字已转换为形状)或通过 Illustrator 导出。两者都能正确保留透明度。

为什么不能将 JPG 转换为 SVG?

SVG 是一种矢量格式——它存储数学路径,而非像素数据。JPG 或 PNG 不包含任何矢量信息,因此 Photoshop 无法神奇地将它变成真正的 SVG。文件会将栅格图像嵌入到 SVG 包装器中,这违背了可缩放性的目的。

这个问题在 Adobe 社区问题 中频繁出现。正确的流程:先在 Illustrator 或 Inkscape 中对栅格作品进行矢量化(追踪)。


三种方法对比

每种方法适用于不同的文件类型和工作流程。下表总结了关键权衡。

方法 矢量保真度 栅格支持 平台 最佳用途
旧版导出为(Legacy Export As) 高(纯矢量) 不支持——栅格图层被忽略 Windows Mac Intel Rosetta 纯矢量形状、批量导出
复制 SVG(Copy SVG) 高(矢量);若有蒙版则嵌入栅格 作为栅格嵌入——不可缩放 所有平台(矢量图层) 单个矢量图层、快速工作流
Illustrator / Inkscape 完全控制 可将栅格追踪为矢量 所有平台(独立应用) 复杂文件、栅格转矢量、生产级 SVG

🔀 快速决策指南

你的作品是纯矢量形状 → 尝试复制 SVG(最快,无需设置)。

你需要批量导出或偏好旧版对话框 → 使用旧版导出为(先在首选项中启用)。

你有栅格内容、效果或需要生产级 SVG → 使用Illustrator 或 Inkscape。

你只有 JPG/PNG 并想要可缩放矢量 → 使用矢量追踪工具(Illustrator 追踪、Inkscape 追踪位图)。


获取更多帮助和官方资源

Photoshop SVG 导出的情况随着每次更新而不断变化。以下是最活跃、最可靠的故障排除和新发现来源。

Adobe 社区论坛

关于此主题的主要讨论帖已有 286 条回复和超过 582,000 次浏览——这是用户测试变通方案的最大集合。 浏览该帖 →

CreativePro(Khara Plicinic)

简洁的文章,覆盖了两种主要变通方案并附有截图。会针对新的 Photoshop 版本定期更新。 阅读文章 →

YouTube – Brendan Williams

旧版导出为和 Illustrator 中转方法的可视化演示。包含针对灰色选项的故障排除。 观看教程 →

Reddit r/photoshop

复制 SVG 方法首次被记录的地方。社区驱动,并在 Adobe 推送更改时实时更新。 加入讨论 →

这些来源由活跃的 Photoshop 用户和行业专业人士维护。请特别收藏 Adobe 社区讨论帖——当 Adobe 更新导出行为时,这里是最先出现新变通方案的地方。