本文由chaussen在众成翻译平台翻译。
SVG图的优势在于其能灵活地适应各种大小，同时又能保持图像洁净清晰。这种图片对响应式网页设计来说是完美的，因为用户可以放大图片而不损失图像质量，从无障碍浏览为中心的视点来看是很有意义的。
为了帮助大家充分发挥SVG潜在的优势，并正确处理SVG图片，本文将给大家提供一些工具和资源，用以对SVG的编辑、转换、优化和发布进行简化。我们要看一下如何才能使SVG代码精简高效，深入探究一下如何处理浏览器错误，并为图标系统的设计提供一些窍门。
关于这个话题，本文只是将提到的资源里一些关键知识归纳成几个容易消化的知识点，并没有扩展性指导。大家可以在喝咖啡休息时抽空看看，获取一些间歇SVG感悟。如果想深入研究，Sara Soueidan为Smashing Book 5这本书专门写了一章节，全面讲述了如何掌握响应式网页设计中SVG的应用，以及更多其它内容。祝大家都SVG快乐！
要快速编辑SVG图像，可以直接用标记语言写，但如果涉及的内容有点多，那免费和开源的SVG-edit软件就很有用了。SVG-edit是完全基于网页运行的，所有新式浏览器中都可以打开。除了看图和编辑功能，这个软件还提供了一些选项和导入功能，十分便利。
SVG-edit是完全基于网页运行的，带有一系列作图和编辑工具，十分适合快速编辑。
另一个功能更多的软件是Inkscape。这是一个免费开源的矢量图编辑器，提供了一系列作图和对象操作工具，不仅能导入导出SVG图形，还能处理AI、EPS、PS和PNG格式。这个软件输出的SVG图像简洁级别是最高的。
另一个免费矢量图编辑器是Boxy SVG。它依靠网页技术运行，因此不仅仅Chrome为基础的浏览器都能用，大家在苹果操作系统、Windows、Linux和Chrome操作系统电脑上用的浏览器都行。不仅如此，它输出的SVG代码产生的图像还能照顾到浏览器。
如果不想从头开始搭建SVG图像，有一些浏览器工具可以帮助大家将已有的图像导出，生成矢量图，而不用耗费时间手工描图。比如PicSVG这个软件，能直接把图片上传到它的网站上，然后立刻生成SVG图片。可以转换PNG、JPEG和GIF格式。
Vectormagic有一些更复杂的功能。这个工具软件生成的图像有更丰富的细节，给用户更多的控制权，能检查结果，调整像细节级别和图像色彩之类的设置。在网站上注册后就能免费转换两次，要继续使用，可以购买套餐，每月最低7.95块。
如果要把光栅图转成SVG图，可以看看Eric Meyer的px2svg。这个PHP脚本使用连续色块优化方法，画出填色的矩形，重建原图，并保留8位图的视感。
SVG文件中每多一个节点、一条路径，一个小数点或一段元信息，总大小都会增加。单个增加的量可能不起眼，但如果一个站点上有多个SVG文件就会积少成多。要精简文件，不让文件影响到站点的性能，就必须要优化SVG文件。
如何优化SVG？Andreas Larsen的入门学习资料很不错。他写的系列文章由三部分组成，教大家削减文件大小的技巧。不但在制作自己的矢量图时可以用，而且在处理别人制作的SVG图时，还有从图像编辑器导出图像代码时也可以用。关键知识点：要优化路径，少用节点和句柄，数字要用整数，网格够用即可，这样能有效节省空间。
此外，还有些优化工具可用。像svgo之类的工具能从SVG代码中去除许多臃肿的部分。当然，使用这些工具要小心。如果SVG中的某个结构要得到保留，手工优化可能更好些，比如为了做动画而做的结构。另外，像Andreas Larsen说的那样，大家也可以在Atom编辑器里打开SVG文件，通过实时预览来手工去除多余信息，如多余的逗号、空格，不需要的透明路径，以及编辑器生成的元数据和类。有个LinkedIn商标试验就运用了这些技巧，结果显示文件大小减少了85%以上，外观上却看不出任何变化，这种情况并不少见。
官方版本对比优化SVG版本做的Twitter图标。优化过的图标句柄、结节更少，但仍然可用且不牺牲图像细节。（感谢：Andreas Larsen提供的图像）
Sara Soueidan“制作导出更适合网页的SVG窍门”一文中，给出了她认为最能使导出的SVG代码更简洁的九个窍门。其中一个窍门是使用简单的形状元素，如圆<circle>，长方形<rect>或直线<line>，不要用路径<path>，因为简单形状比路径<path>代码更容易读，也更容易手工编辑。
用过Sketch的都知道，它导出的SVG文件代码杂乱无章。最坏的情况是等之后要编程操控SVG时，导出的代码会给SVG运行造成负面影响。为了解决这个问题，Sean Kesterson想出了一个四步流程。
其中关键点是：把画板的位置设置成偶数，不要用半像素，否则Sketch会对代码多做一次毫无必要的“转换”transform。所有的透明界限边框都删除，用CSS做出同样效果取而代之，否则Sketch会把边框也导出，这样就很难缩放SVG图像了。最后一点，每次在Sketch里旋转一个图形，软件都会自动加上一个旋转rotate属性。把这个属性从代码去掉的话，软件又会自动把图像转回到原来的视图。要解决这个问题可能需要绕些远路，但好像也没什么别的办法能避免回转，在Illustrator里打开SVG图像，旋转过后再拖放回Sketch里就行了。
用Sketch生成简洁SVG代码的其中一步：删除所有的透明界限边框，让CSS实现效果。（感谢：Sean Kesterson提供的图片）（放大版本）
当然，最后发布SVG图像时同样需要简洁的代码，对站点性能也同样重要。比如，大家知道吗？SVG图片文件可以用gzip进行压缩，平均可以省下80%的空间。还有Sara Soueidan建议，浏览器不支持SVG，要给一个备用PNG时，把备份图片弄成一个<div>元素的背景图，再把这个元素插到object元素的开关标签之间，不要用前景的img元素来做备用图片。这样做就可以防止那些能显示SVG的浏览器把SVG和PNG图片都收了，也就能避免无用的HTTP请求。
Internet Explorer 9到11版中存在一系列的问题，它们使内嵌SVG图片无法正确缩放。事实上这个问题在宽度不固定的SVG图片中尤其突出。Nicolas Gallagher的解决方法是基于canvas元素来规避这个问题。思路是：如果一个canvas元素设有宽width和高height属性，它的纵横比就会保持不变，即使其中的一个维度进行了缩放也一样。所以可以利用这个特性，把canvas当作缩放框来限制SVG图片的纵横比。要做到这一点，就要让SVG填满这个框所产生的空间，并把canvas元素的高度设成100%。这样，canvas元素可以根据组件的根元素高度来缩放，就和SVG图片在支持的SVG浏览器里一样缩放。很聪明。
SVG的缩放性和灵活性使其成为传统图标字体之外的另一种不错的选择。传统图标字体如果加载失败，用户就什么都看不见。而SVG则相反，有备用PNG的前提下，它能平稳地过渡到备用PNG文件，这是它另一大优点。用SVG创建图标系统，就要把所有的SVG文件都保存在一个文件夹里，然后打包成单个SVG文件。这可以手工做也可以用软件实现。手工做法看Chris Coyier讲解的方法；软件有Grunt插件grunt-svgstore或IcoMoon可以做。做好后，只要把那个SVG插入到文档顶端就可以随心所欲地使用图标或设置样式了。
为了好好创建SVG文件，大家最喜欢哪些工具或资源呢？请在下方留言，告诉大家吧！
原文来自:众成翻译
声明：所有来源为“聚合数据”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com
分享
苏公网安备 32059002001776号
