SVG
SVG是一种用 XML 定义的语言，用来描述二维矢量及矢量/栅格图形。 比如常用的矢量设计软件Illustrator中的形状、路径，或者是用Illustrator创作的任何图形都是矢量图形。 SVG是跟web中常用的JPEG一样是一种的图形格式。 但是SVG比其它图形格式有一个很突出的特点，就是能使用CSS / JS等web技术对它进行控制。
使用和优化SVG
在web中使用 SVG 就像使用JPEG 或者 PNG一样很简单。 使用常见的矢量设计软件(Illustrator，Sketch，或者是photoshop中的形状图层) 就能设计出SVG格式的图形。下面所说的操作都是以Illustrator软件为例的（在其它矢量设计软件中可能有所不同）。如果你想要在你的矢量图形中导出特殊的文字，它可能在web中不会显示正确的字体，除非你使用CSS3中的webfont来指定显示特定的字体。在Illustrator中，扩展对象可用来将单一对象分割为若干个对象。具体的来说，如果你想单独的控制每一个对象，那就可以使用扩展对象。并且扩展对象并不会影响导出SVG的文件体积。在Illustrator中每一个图层的名字在导出SVG的时候，都会在 SVG作为元素的ID的名字，这对于使用CSS或者是JS来控制SVG提供了很大的便利，但会增加SVG文件的体积哦。
在导出的时候， 需要检查下画布的尺寸(比如，不要出现 23.3px × 86.8px) 这样有小数点的格式，如果这样的话它可能会对画布里的内容进行剪裁。在Illustrator，你可以通过下面的操作来避免这个问题，在菜单栏进行下面的操作Object > Artboards > Fit to Artwork Bounds。然后选择保存为命令选择保存为 SVG 格式，选择默认的选项就可以了。 当然，在选择保存SVG选项里，也可以进行一定的优化。后面会就SVG的优化有专门的阐述。
SVG文件体积优化的一些技巧
关于SVG优化，网络上有很多的关于这方面的文章。这里我更愿意来分享我在使用SVG过程中，对于SVG优化的一些技巧。这些技巧不需要花费很多额外的工作，你就能快速的你的工作中使用它。
为了使SVGs 的体积尽可能的小，你需要删除SVG中一些不需要的属性。在我看来，这方面SVGO是一个很棒的优化SVG的脚本工具。它会删除SVG中一切多余的属性 — 这里需要注意的一点的是: 当你打算用CSS / JS来控制SVG，你可能要小心了。因为使用它可能会过度优化SVG，从而影响到使用CSS和JS来控制SVG。你可以使用SVGO来自动处理SVG的优化(或者是你可能更愿意使用可视化的SVGOGUI来处理SVG的优化。
其实，删除SVG中一些多余的属性我们在矢量设计软件中就可以来处理。首先你要确保使用尽可能少的路径或者是形状来设计你想要的图形，并且路径上的控制点也要尽可能的少。并且尽可能的合并你的图层。至于删除路径上的控制点，在Illustrator中，VectorScribe这个插件就可以做到这点。它可以删除路径上多余的控制点。
如果你想放大来查看图形的一些细节。在Illustrator中，你可以通过下面的操作使用像素预览（Pixel Preview）View > Pixel Preview来查看路径上的控制点。完美像素，是保持作品的高质量必须要关注的一个事情。相信大多数设计师都会因为这个都有过被搞得疲惫不堪的经历。
如果有两个对齐的路径，你会看到在它们之间有一条白色的线条，所有时候你需要避免这种重叠情况的出现。
注意: SVG是严格按照定义元素的顺序来渲染的，这个与HTML靠z-index值来控制分层不一样。在SVG中，写在前面的元素先被渲染，写在后面的元素后被渲染。后渲染的元素会覆盖前面的元素，虽然有时候受透明度影响，看起来不是被覆盖的，但是SVG确实是严格按照先后顺序来渲染的。
