PSD 转 SVG

合并图层后以嵌入栅格方式生成 SVG

将 PSD 文件拖到此处或点击上传

PSD

将 PSD 文件拖到此处

文件过大(最大 300MB)

设计交接 SVG:给产品/研发看的「冻结画面」,不是切图坐标单也不是可动画矢量组件

`design-handoff-psd-svg` 解决跨职能对齐:用单一 MIME 在文档里展示当前视觉,减少「发 PSD 对方打不开」的摩擦。研发若试图从中解析切片坐标或导出点九,会失望——那是专用标注工具的职责。交接包应同时包含设计令牌、间距表与 PSD,而不是只有 SVG。

如何使用

  1. 在 Figma/PS 侧先冻结设计令牌与组件命名,再导出 handoff SVG;邮件首段写明「不可直接当生产图标」。
  2. 组织产品、前端各一人用目标文档系统各打开一次,确认无脚本告警与无意外外链请求。
  3. 把 SVG 哈希登记在设计交付清单,与同一版本的 Storybook 截图绑定,避免研发引用旧文档链接。

PSD 转 SVG(handoff)问答

设计交接邮件里附带 SVG,研发误以为能像图标一样改 `fill` 或拆 `path`,如何用一句交付说明把预期钉死?
首屏应写:本文件为合并可见后的栅格内嵌预览,SVG 仅提供视口与缩放语义,不包含可编辑矢量拓扑与文本对象;改字改色请回 PSD 或另开矢量重绘工单。没有这句,前端按组件库接入后会出现「调不动样式却报转换 bug」的假问题。
智能对象或链接素材在 Photoshop 里可见,合并进交接 SVG 后整块消失,应优先怀疑隐藏图层、断链还是合并脚本漏了复合?
先检查该智能对象是否在合并动作前被隐藏、链接是否离线或未嵌入;再确认交接用的是「合并可见」而非误选单一图层复合。对必须展示的链接稿,应在交接前栅格化或嵌入副本,并在清单注明「已烘焙」,避免工厂端打开 PSD 与预览不一致。
品牌色在 SVG 预览与 UI 走查显示器上肉眼不一致,应以哪份数字源为准,如何避免「每个屏一个色」的无休止争论?
以设计令牌表与导出报告中的 sRGB 十六进制为准,走查屏只做相对对比与布局检查;跨设备色差应在规范里写明可接受 ΔE 或仅校验相对对比度。不要把单次手机拍照当签色依据,必要时用校色仪在同一环境下测三块屏建立基线。
研发索要切图坐标与点九参数,能否直接从该 SVG 或内嵌 PNG 里量出来替代 Zeplin 类工具?
栅格包装不会携带可靠切片框与约束边距元数据,坐标应以 Photoshop 生成资源、设计标注插件或独立 manifest 为准。强行从压缩后的内嵌图量像素会引入半像素误差,Android 点九更不能指望预览文件自动生成。
安全审计问「用户上传的 SVG 是否可执行脚本」,与「我们工具生成的交接 SVG」应如何分项答复以满足合规?
应区分供应链:工具链产物仅含静态 `svg`/`image` 结构,不含脚本与外部实体;仍须按公司策略做病毒扫描与发布哈希冻结。若产品允许终端用户上传任意 SVG,必须走消毒与白名单,不能把工具链的静态性外推到整个站点攻击面。
More versions