SVG(Scalable Vector Graphics)，中文名可缩放矢量图形，能够很好地处理矢量图形和可编程性的矢量。这两年来SVG渐渐成为了web设计的趋势，越来越多的被用在了响应式网页设计中，我相信不久的未来也会广泛普及于移动端领域。
设计师要站在潮流之上，不懂得学习的设计师一个浪打过来的时候就不知所踪了
不同于UI设计中切出png图直接给开发就完事，SVG文件是一种图像文档格式，设计师在图像处理软件中所作的各种效果都会直接影响最后SVG文件的代码。所以如果设计师对代码没有基本的了解、或是与开发人员没有足够的沟通，有可能就会导致辛苦处理好的图形导出SVG后生成的代码过于复杂，最终不能使用于开发工作。
为了得到整洁的代码和省去不必要的麻烦，以下几点大家要用小本子记下来：
1.SVG输出时，画布大小要和内容大小相一致。
切过图的都知道，开发人员在嵌入图像时会给图像一个高度和宽度，这个高度和宽度就是图像在设备中的显示框，在图像处理软件中，这个显示框就是我们的画布了。如果画布过大，留白过多，那么在嵌入后会导致图像变小。
AI中让画布与内容一致的方法：
PS：鉴于隐藏图层也会影响生产SVG的大小，故我们需要先对所要图像单独进行切图得到PSD之后再导出SVG。
如何从PS快速导出SVG传送门
2.尽量使用基本图形创建图像，较少手动路径。
这一点AI和PS中一致，尽量都选择基本图形（自定义图形也不要用）进行简单的布尔运算就好。
之所以大家都推崇基本图形，在于基本图形的图形元素可读性和可维护性相比于路径图像高，而且基本图形的代码量比起路径图像要少很多，让开发少敲一点代码，就是延长他们的生命，救人一命胜造七级浮屠。例如圆形circle，几个简单的代码：x，y，cx，cy就可以完全控制，而路径形成的圆则需要一大长串代码去定义、控制。
3.尽可能的简化路径。
迫不得已实在要使用路径时，也一定要记住尽量简化路径，减少路径点。目的还是减少代码量和文件大小，（这些都是开发的生命和公司的钱啊）。
AI中简化路径办法有两种，一种是使用AI自带的简化工具：对象-路径-简化；另一种是使用AI中的平滑曲线工具（如图）。另外也可以通过一些插件，例如VectorScribe等来实现路径的优化。
优化前后的路径
平滑工具的位置
PS里没有这项功能，需要的话导入到AI中再行操作。
4.使用SVG滤镜，而不是PS滤镜。
AI中（需要使用效果得就不要去PS里画了）：当我们在AI中为图像做一些效果时，通常会选择PS滤镜，这时候AI会将这些效果自动生成并形成栅格图片，导出SVG后这些栅格图像也会继续嵌入，而非程序员想要的一串简单的代码，为了安抚程序员幼小的心灵，这时候我们要使用SVG滤镜。
另外编程厉害的同学也可以使用新建滤镜工具自行编辑滤镜。
5.和你的程序员沟通
沟通带来和平，沟通带来效率。没事的时候带上俩袋瓜子和凉茶找你的程序员唠唠嗑，聊一聊你对图像文件的命名原则、聊一聊保存svg时的各种参数、聊一聊图像中哪些部分需要扩展轮廓（记得简化路径）以减少路径点等等，你觉得有必要聊的一切都要问程序，不要等他来问你。
要记得，你可是一个优秀的设计师！
欢迎讨论设计问题，互相伤害。
以上，侵删
THE END
网友评论