10分钟学会制作与使用SVG矢量图【前言】
SVG 是可缩放矢量图形是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。它由W3C制定，是一个开放标准。用类似我们学的HTML语法来描述图像内容，当然矢量图形意味着图片缩放不会失真。 SVG是很好的图片格式，采用文本传输，尺寸小，速度更快，在2000年的时候就已经有了，但是由于当时Web技术发展较慢，直到HTML5的兴起，web技术进入爆发时代，SVG重新推到了风口上，并且在国外网站大量应用。 【SVG接触】《SVG兼容性》
SVG浏览器支持: http://caniuse.com/#cats=SVG SVG 支持 InternetExplorer 9+、Firefox、Opera、Chrome 以及 Safari，在手机端浏览svg图片效果也非常良好，包括国内主流的微信浏览器，UC浏览器。 《使用方式》
SVG本质上就是一张图片，所以我们可以用<img>标签插入到HTML文档中，也可以CSS背景图的方式引入。 当然出了以上2种常规使用图片的方式，SVG图片还可以直接在HTML文档中使用<svg>标签，这种写法不仅让我们省去了页面加载时对图片资源的请求，并且还保留<svg>标签的可操作性。 《SVG基本语法》
<基本图形>
- <rect> 矩形
- <circle> 圆形
- <ellipse> 椭圆
- <line> 线
- <polyline> 折线
- <polygon> 多边形(闭合折线)
<基本属性>
- fill 填充色
- stroke 描边色
- stroke-width 描边宽度
- transform 变换
【AI编辑和导出SVG】
SVG可以用来描述矢量图，但是如果只用基本的图形和属性，用它来画一个复杂点矢量ICON，还要学习一大堆的属性，算一大堆的数学坐标，所以只能哭晕在厕所里了。 不过，此时我们熟悉的Illustrator 消除了一切的焦虑，Illustrator可以直接导出SVG图片格式文件，并且SVG格式的图片文件也可以到AI里面二次编辑。 《新建适合SVG格式的AI文档》
为了SVG图片更好的兼容性，我们新建AI文档的时候，注意把单位改为像素px，颜色模式设置为RGB，72PPI，并且勾选新建对象与像素网格对齐。 《绘制图像》
我们就像AI平时绘制ICON的形式绘制了一个天气图标。 为了以后我们的SVG操作起来更方便，需要养成给我们的图层都命名的习惯，并且不要出现中文命名。 <文字注意>如果你的SVG文件里有文字信息，建议导出前先把文字转为轮廓，并给图层命名。这样能很好的保留了我们设计时用到的字体和字体所在位置，否则SVG会用系统自带的字体渲染，达不到我们想要的效果。 《保存SVG》
建议大家先保存一份当前的AI文件，为了以后我们再次编辑方便。然后再按Ctrl+Shift+S 选择SVG的格式，生成我们需要的SVG文件。 点击确认按钮后，会得到一个SVG选项的面板，我们按照默认的选项，再点击确认就好。经过测试，默认选项是没有任何问题的，可放心使用。 【总结】
由于SVG和Illustrator的互通性，所以网上有很多图标，矢量格式素材我们都可以使用，AI进行编辑，再转换成SVG格式即可。 如我们想找icon，国内 iconfont.cn 平台也提供了大量的免费图标下载。 SVG还有一个优势，就是自身支持动画，也可以配合JS和CSS3做动画、特效，因为HTML，CSS，JS，SVG统统都出自W3C之手，我们后续探讨。
| 
收藏
淘帖
踩
