Photoshop图层 -> SVG

Question

我有一个带有矢量标志（智能对象）的PSD文件。我需要将其保存为SVG以供网站使用。然而，我在Photoshop中没有看到这样的选项（我只能将其导出为.AI文件）。

1. 导出过程是什么样子的（PS CS5或CS6-当前版本）？
2. 网页开发人员在导出标志时应该使用哪些最佳设置？您可以在（AI-> SVG）转换器中设置各种大小的SVG文件，例如： http://image.online-convert.com/convert-to-svg
3. 在设置方面还需要注意什么吗？
4. 在标志区域网站上应如何包含SVG文件？最佳方法是什么？像这样吗？http://jsfiddle.net/danielfilho/GdCcA/

- Atadj

---

针对问题4的回答，最可靠的方法是将SVG光栅化为所需大小，这样网站就有PNG或GIF图像可供显示，而不需要SVG功能。 - Niet the Dark Absol

@Kolink 我现在使用的是JPG标志，但在网站的响应模式下，当您无法将其显示为250px标志而是200px标志或150px标志时，它看起来很模糊。更不用说Retina了，在那里它一直看起来很丑。SVG将是完美的解决方案。为什么不推荐使用呢？我工作的公司给我提供了矢量标志，因此在网站上使用矢量格式将非常好。 - Atadj

SVG在旧版浏览器中不受支持。但是，如果您可以实现功能测试，那么您可以将SVG图像回退为光栅图像。 - Niet the Dark Absol

@Kolink 是的，我计划推出两个版本，但我认为所有现代浏览器和设备都将支持它。 - Atadj

我创建了一个脚本，可以自动完成这个任务。你只需要在PSD中重命名要导出的图层，它就会将它们转换为SVG格式。http://hackingui.com/design/export-photoshop-layer-to-svg/ - DMTintner

Answer 1

1. 你可以付费使用 SVG Kit，或者最好的替代方案是将其导出/粘贴到Illustrator中，然后保存为SVG。问题Photoshop Custom Shape to SVG path string详细说明了这一点。
2. 查看Illustrator网站以获取有关不同选项的详细信息，例如目标设备（移动设备与桌面电脑）以及是否要显示渐变、透明度和SVG滤镜效果等细节。
3. Adobe的创建Web图形的最佳实践介绍了使用Web安全颜色、Illustrator中的像素预览模式以及解决移动设备的某些挑战等问题。
4. 同意@Kolink上面的评论。

- mccannf