PSD转SVG转换器
把Photoshop设计保存为.svg文件,用于只接受SVG的工具。转换器会合并PSD图层,再把图像封装进SVG。下文说明这种方式何时够用,以及何时需要对Logo进行描摹。
图片格式转换
或将JPG, JPEG, JPE … 文件拖放到此处 ·
单个文件最大 95 MB· 最多 20 个文件· 30 分钟后删除
文件在我们的服务器上处理,并在 30 分钟后删除。
85 可使照片在视觉上与原图无差别。只有在需要更小的文件时才调低。
JPG、BMP 和 EPS 不支持透明。透明像素会用此颜色填充。
用于透明像素底色的十六进制颜色,例如 #FFFFFF。
此格式只能保存单张图像。如需保留动画,请选择输出 GIF 或 WebP。
多尺寸图标在一个文件中包含多种分辨率,浏览器和操作系统会选用所需的尺寸。
保持原始尺寸,或输入一边的数值,自动保持宽高比。
上面所选边的像素值。
相对于原始尺寸的百分比。
屏幕和网页使用 sRGB 即可。印刷流程请保持原样;灰度会丢弃颜色。
仅写入元数据,0 表示保留原值。打印机和部分网站会读取此数值,它不会改变像素尺寸。
使用方法
- 1
上传PSD文件
选择一个或多个 .psd 文件,每批最多 20 个,每个不超过 95 MB。
- 2
点击“转换为 SVG”
可见的设计稿会按画布尺寸合并为一张图,并嵌入 SVG 文档。这里没有质量滑块,因为内部的位图是无损存储的。
- 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
SVG
可缩放矢量图形
SVG 是基于 XML 的矢量格式,2001 年由 W3C 标准化。它描述的是形状、路径和文本,而不是像素,因此在任何尺寸下都保持清晰,用于徽标和图标时通常很小。它支持透明、CSS 样式、脚本和动画,所有浏览器都能原生渲染。SVG 不适合照片,复杂的插画渲染也可能变慢。Illustrator、Inkscape、Figma 和浏览器都可以打开并编辑。
- 压缩方式
- –
- 透明度
- 支持
- 动画
- 支持
- 发布年份
- 2001 · W3C
当网页构建器、模板平台或切割机要求 SVG,而设计稿只有 Photoshop 文件时,人们就会搜索 PSD转SVG;得到的是封装在 SVG 容器里的合并后图稿。
PSD中的形状图层、智能对象和像素
误区另存为 .svg 就能让任何设计无限缩放。
事实可缩放性来自路径。装着位图的 SVG 超过像素尺寸后会像 PNG 一样变模糊。
误区用 Photoshop 形状绘制的 Logo 会自动转成矢量。
事实这个工具会先合并图层,所以形状会变成像素。矢量形状必须导出或描摹。
误区智能对象会保留其链接的矢量内容。
事实置入的 Illustrator 文件会按它在画布上显示的大小渲染,再与其余内容一起合并。
从Photoshop设计中获得真正的矢量路径
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 的更清晰。超过原始尺寸后,内嵌图片会像任何位图一样变模糊。