UltKit

PSD转SVG转换器

把Photoshop设计保存为.svg文件,用于只接受SVG的工具。转换器会合并PSD图层,再把图像封装进SVG。下文说明这种方式何时够用,以及何时需要对Logo进行描摹。

图片格式转换

或将JPG, JPEG, JPE … 文件拖放到此处 ·

单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除

输出

文件在我们的服务器上处理,并在 30 分钟后删除。

使用方法

  1. 1

    上传PSD文件

    选择一个或多个 .psd 文件,每批最多 20 个,每个不超过 95 MB。

  2. 2

    点击“转换为 SVG”

    可见的设计稿会按画布尺寸合并为一张图,并嵌入 SVG 文档。这里没有质量滑块,因为内部的位图是无损存储的。

  3. 3

    打开转换结果

    把 .svg 拖进浏览器、Figma 或 Inkscape。它看起来和 PSD 一样;放大很多倍后会看到像素,这是正常现象。

PSD转SVG:转换器实际写入的内容

PSD 是由多个图层叠加而成的:照片和画笔产生的像素图层、会改变下方像素的调整图层、文字图层、智能对象,以及形状图层。自 2000 年的 6.0 版起,Photoshop 就以矢量路径存储形状图层。Photoshop 本身于 1990 年 2 月发布,PSD 格式至今仍带有可见图层叠加后的合成图,这样其他程序无需理解每种图层类型就能显示设计稿。

这个转换器使用的就是这份合并后的设计稿。它把可见图层按画布尺寸渲染成一张图像,然后写出一个只包含该图像的 SVG 文档。SVG 的宽度、高度和透明度都是正确的,因此可以像原稿一样放进页面或版式中。它没有的是任何一个可编辑的形状:每一条边缘,包括形状图层的边缘,都是像素。效果、蒙版和混合模式在 SVG 中没有一一对应的等价项,所以渲染后的结果才是如实的输出。

PSD 宽度或高度的最大值
30,000 px
PSD 文件大小上限(更大的设计稿使用 PSB)
2 GB
本转换器接受的最大 PSD
95 MB
每批 PSD 文件数
20

PSD

Adobe Photoshop 文档

PSD 是 Adobe Photoshop 的原生文件格式,自 1990 年起使用。它保存图层、蒙版、调整图层、文字、智能对象、通道和色彩配置文件,使设计稿以后可以无损地重新编辑。文件通常非常大,要完整还原需要 Photoshop;GIMP、Photopea 和 Affinity 等其他编辑器打开 PSD 的准确度各不相同。浏览器、手机和大多数上传表单无法直接显示 PSD。

压缩方式
无损
透明度
支持
动画
不支持
发布年份
1990 · Adobe
PSD 转换器

SVG

可缩放矢量图形

SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。

压缩方式
–
透明度
支持
动画
支持
发布年份
2001 · W3C
SVG 转换器

当网页构建器、模板平台或切割机要求 SVG,而设计稿只有 Photoshop 文件时,人们就会搜索 PSD转SVG;得到的是封装在 SVG 容器里的合并后图稿。

PSD中的形状图层、智能对象和像素

误区另存为 .svg 就能让任何设计无限缩放。

事实可缩放性来自路径。装着位图的 SVG 超过像素尺寸后会像 PNG 一样变模糊。

误区用 Photoshop 形状绘制的 Logo 会自动转成矢量。

事实这个工具会先合并图层,所以形状会变成像素。矢量形状必须导出或描摹。

误区智能对象会保留其链接的矢量内容。

事实置入的 Illustrator 文件会按它在画布上显示的大小渲染,再与其余内容一起合并。

从Photoshop设计中获得真正的矢量路径

如果是需要在任何尺寸下都保持清晰的 Logo、图标或字体设计,就需要描摹这一步。先用 PSD转PNG 把 PSD 转成透明 PNG,再交给图片转SVG,它会沿着边缘生成真正的路径。描摹适合纯色和轮廓清晰的图形;照片则会变成成千上万个小形状。我们的PNG转SVG教程介绍了让曲线保持平滑的设置。

如果原始矢量图稿在 Illustrator、Affinity Designer 或 Figma 中,请先索取该文件,而不是去描摹合并后的副本。

PSD转SVG常见问题

Photoshop的形状图层会变成可编辑的SVG路径吗?

用这个转换器做不到。形状图层在 Photoshop 里是矢量,但 PSD 在写入 SVG 之前会被合并成一张位图,所以包括形状在内的每个图层都会变成像素。如果想保留路径,请从矢量编辑器中导出形状,或者对结果进行描摹。

为什么SVG文件和同一设计的PNG差不多大?

因为这个 SVG 本质上就是一张 PNG。位图以编码文本的形式存放在 SVG 里,体积大约会增加三分之一。真正的矢量 Logo 通常只有几 KB。

这个SVG能用于Cricut或激光切割机吗?

可以导入,但没有可切割的内容。切割机依据路径轮廓工作,而封装的位图没有路径,所以 Design Space 和激光软件看到的只是一张平面图片。请用图片转SVG描摹 Logo,以得到切割线。

Photoshop文字图层里的文字在SVG中还是文字吗?

不能。文字图层会连同字体一起渲染,并和其他内容一样被合并,所以无法搜索、选择或重新输入文字。请在 SVG 编辑器中用相同字体重新创建可编辑的文字。

用SVG封装位图在什么情况下真正有用?

当某个系统要求 .svg 扩展名、但只是显示文件时,例如一些主题构建器和模板平台。在正式的矢量素材准备好之前,它也可以当作占位图使用。

PSD画布越大,SVG就越清晰吗?

可以。SVG 会保留画布尺寸,所以 4000 px 的 PSD 在更大的显示尺寸下也比 1000 px 的更清晰。超过原始尺寸后,内嵌图片会像任何位图一样变模糊。

导出Photoshop文件的其他方式
PSD转PNGPSD转JPGPSD转PDF
PNG转SVGEPS转SVG图片转SVG