企业做SVG设计如何提升视觉化效果

SVG我们可以把它理解为一种带有代码编程性质的设计类型，而且这些年来，SVG已逐渐发展成了web设计，越来越多的设计被用在了响应式网页设计中，由此可见，在未来的某一个阶段，SVG设计将会逐渐普及于移动端。那么对于企业而言，如何做SVG设计来提升视觉化效果呢？

一、画布大小要与内容大小相一致

切过图的都知道，开发人员在嵌入图像时会给图像一个高度和宽度，这个高度和宽度就是图像在设备中的显示框，在图像处理软件中，这个显示框就是我们的画布了。如果画布过大，留白过多，那么在嵌入后会导致图像变小。

AI中让画布与内容一致的方法：

PS：鉴于隐藏图层也会影响SVG定制设计的大小，故我们需要先对所要图像单独进行切图得到PSD之后再导出SVG。

二、用基本图形新建图像，可以减少手动路径

这一点AI和PS中一致，尽量都选择基本图形（自定义图形也不要用）进行简单的布尔运算就好。

之所以大家都推崇基本图形，在于基本图形的图形元素可读性和可维护性相比于路径图像高，而且基本图形的代码量比起路径图像要少很多。例如圆形circle，几个简单的代码：x，y，cx，cy就可以完全控制，而路径形成的圆则需要一大长串代码去定义、控制。

三、简化路径

迫不得已实在要使用路径时，也一定要记住尽量简化路径，减少路径点。目的还是减少代码量和文件大小。（这些都是开发的生命和公司的钱啊）。

AI中简化路径办法有两种，一种是使用AI自带的简化工具：对象-路径-简化；另一种是使用AI中的平滑曲线工具（如图）。另外也可以通过一些插件，例如VectorScribe等来实现路径的优化。

PS里没有这项功能，需要的话导入到AI中再行操作。

四、使用SVG滤镜

AI中（需要使用效果得就不要去PS里画了）：当我们在AI中为图像做一些效果时，通常会选择PS滤镜，这时候AI会将这些效果自动生成并形成栅格图片，导出SVG后这些栅格图像也会继续嵌入，而这时候我们要使用SVG滤镜，让整体效果看上去更好！

SVG设计是需要有程序员配合才行的，如果您有SVG设计技术，但是在编程上有一定的困难，是可以来找我们蓝橙开发团队来帮您解决的，如果您既没有SVG设计技术，也没有学过编程语言，我们的设计团队和开发团队将会为您量身打造优质的svg设计制作产品，让您的设计产品在质量上和视觉感官上都有较大的提升。

相关阅读：

《SVG设计制作在网页中的应用场景》