设计logo或者图片什么的都是专业人士干的，我充其量就是个爱好者，因为Photoshop一直在国内很火，我读大学那阵就跟着比较懂的同学学了一点点用法，后来工作中因为有时候也要偶尔做做简单点图片，一直就把之前学的保留了下来，说实在的作图的人根本不用PS，而是用AI(Adobe Illustrator)或者coreldraw，但我自己并非搞设计的，没那么多精力啥都学，反正秉承只要能用的原则。
自从开始学建站起，自己作图是经常的事，LOGO总是要一个的，虽然很多设计logo的网站，但是我还是想自己创建，因为没啥艺术细胞，自己的创建的logo不太高大上，丑是丑点，总归是自己的。如今LOGO的格式大多是SVG的了，为的就是能适应不同的设备尺寸，所以我也开始为自己的网站折腾出一个SVG logo。随着年龄的增长，什么都记下来比较好。
我创建svg logo的思路有点特殊，现在PS里面设计好PSD文件，保存每一个矢量图层，再保存PSD文件，用AI打开，利用AI调整好然后保存为svg格式。因为不太懂AI，这能采取这种迂回的形式，网站找过不少SVG的设计de 软件，比如inkscape等，最终还是用PS好点，老生意人常教我们一句话：做生不如做熟，感觉道理一样。
不废话了开始：
什么是SVG
根据维基百科的说法，SVG(scalable vector graphics)中文翻译为可缩放矢量图形，是用于2D图形并基于XML的矢量图像格式，支持交互性和动画。
如果你实在无法理解这种图片的话，你肯定知道字体吧，字体可以随意再网页上放大缩小不影响文字的像素，svg图片类似当然更加复杂一些。
差不多质量的图片，SVG图片的体积一般来说都比一些常用的比如jpg，png格式的图片要小，而且有的小很多，这是这种图片发展的趋势。你甚至可以通过代码以及文本编辑器来修改svg图片，而且代码遵循万维网开放的开发标准，虽然目前使用率不是很高，但这种格式正在被越来越多的网站使用，目前主要是用在网站的logo上。
1. 用Photoshop创建LOGO
比如本站的logo青松跨境，利用ps做好的PSD图像时包含多种图层的格式，但是需要将每一个图层变成矢量图层，即可编辑的轮廓图层或者叫形状图层，这样才能让最终的svg能在改变大小的时候不损失像素，而且最好是每一个颜色一个图层。
我这个logo颜色比较多，总共有四个颜色，需要每一个图层都改成可编辑轮廓图层，以绿色为例：
1. 选中绿色部分，右键点击选区，然后选择建立工作路径…，在弹出框中输入容差，感觉越小越好，也不知道是不是，我设置的是1，好像还不错
2. 然后从顶部菜单的图层->新建填充图层->纯色创建新的填充图层，结果是在右边图层中多出一个可编辑的图层形状。
3. 按照这种方式将四个图案层都变为可编辑的形状图层，然后保存PSD文件。如果图片的图层本来就是可编辑形状那就不需要改。
2. 在AI中调整psd图像
1. 把psd图像拖入ai中，或者从AI文件菜单打开图像，尽量保留图像可编辑性
2. 调整图像，为何要调整图像，因为有时候图像拖入AI中有些图层可能有些位置偏差。
3. 保存SVG logo
如图，主要修改以下几项，我也是网上找大神的方法然后设置的，结果还不错：
- svg配置文件 – 有好几个，我选的是是Tiny版本，tiny应该是压缩的版本，选这个保存的svg会小一些
- 文字 – 选转换为轮廓，也就是可编辑的图形了，不再是字体，我换成这个之后效果最好
- 图像位置 – 嵌入
- 不要保留编辑功能
- css属性 – 假如选择的svg配置文件为非tiny的话，这里要选择样式元素
- 小数位额 – 填1
然后确定就行了。
其实还可以利用工具优化图片，前文介绍svg的时候我就说过，svg其实是一段可以编辑的遵循万维网的代码，例如这个svgo-gui，下载后解压，然后把svg图片拖入其中，这个软件会帮你清理掉svg中一些不需要的代码，减小尺寸。最终的图片如下：
注意事项
wordpress网站的要使用SVG的话，需要安装插件，目前还不直接支持svg图案，另外，SVG毕竟是一段代码，还是有一定危险性的，网上的svg别轻易使用，下载wordpress svg插件的时候也需要谨慎。
版权声明：本文原创文章，首发于青松跨境B2C，版权所有，未经允许，请勿转载！
转载请注明：如若转载，请先取得同意，然后注明原文链接。
