SVG图像将称霸2018？快来了解

有时候我们会面临两难选择：使用高分辨率的图片，就免不了长时间加载，反之亦然。而有了SVG，这个问题也许可以得到解决。

SVG易于使用和制作，你不需要修改现有的文件，只需要今后使用SVG作为图像格式。下面这些是关于SVG你需要的知识。

SVG是为网络而生的

Mozilla这样描述SVG：

SVG是基于XML的用于描述矢量图的语言，和HTML相似，而你有很多不同的元素可以用来定义形状和效果。SVG用于标记图形而非内容，例如通过<circle>和<rect>标签（分别是圆和矩形），你可以创建最简单的形状元素。更高级的包括<feColorMatrix>（使用矩阵转换颜色），<animate>（矢量图动画部分）和<mask>（在图像上进行图像叠加）。

SVG最大的好处就是，可以使用代码或文本编辑器来创建简单的图形，而比较复杂的图形也可以通过Adobe Illustrator等矢量编辑软件来创建。SVG文本是可访问的，很容易用脚本和样式来修改，并且它是矢量格式的，意味着尺寸很大也没有问题。SVG收到所有现代浏览器的支持，可压缩并具有前瞻性。

SVG的一个缺点是创建和设计起来比较复杂，而且低版本的浏览器无法识别。这里是一篇关于SVG的入门文章。

SVG可以拿来做什么？

SVG的一大优势就是，你可以拿来做很多事情，比如：

• Logo
• 背景、图案和纹理
• 动画
• 交互式图像
• 图标

设计师完全可以让SVG来做矢量图形可以做的工作，在一定情况下可以代替JPG、PNG甚至GIF。

矢量格式

尽可能多地使用矢量图形是有好处的，因为它可以在任何分辨率下有良好的表现，这是SVG的突出优点，这可以让你的图片在任何设备上都很好看。

还有个SVG的优势在于，你不需要因实现他们改变你的工作流程。如果你使用Illustrator或Sketch等来设计，除了最终导出的步骤之外没有任何区别。有个问题就是，你可能需要将使用到的文字进行转曲，很多人都是这么做的。

准备SVG文件的时候，有一件事要牢记，那就是尽可能让他们别太大，删除不需要的任何东西（清除你的剪贴板）。你可以看一些SVG的绘制技巧，以及如何更好地进行保存。

基于文本的格式有利于SEO

使用SVG会稍稍对SEO更有利，因为他们使用了文本来描述图形，搜索引擎可以更好地识别它们。

诚然你会说，对于一般图片也可以加alt标签来描述，但留给关键词的空间毕竟是有限的。使用SVG你可以创建对搜索引擎更友好的图片。Google会将SVG的内容索引，包括单独的文件和转化后的图像。

SVG很轻巧

不像其他可能很臃肿的矢量文件，SVG仅仅是代码，代码快捷而简单……至少基本如此。

当你将矢量图保存为SVG的时候，请检查文件的大小再做决定。当带有透明度的时候，PNG格式的尺寸几乎指数级增长，而SVG的大小仅仅关于路径的数量。

如果SVG很大，请尝试导出JPG或PNG文件。尽管这看起来很矛盾，但现实中大多数设计师都是混用这几种格式的，只不过SVG占到的比例明显增加了。

便于编辑

如果曾经用矢量软件绘制过图标或Logo，制作SVG对你来说是小菜一碟。

但是如果你用代码来编辑SVG，那会是一种享受。你只需要修改一个关键字、坐标或颜色，然后保存文本——BOOM——图像就变啦！没什么比这更简单了对吧。

SVG支持静态图像，也支持动画

并不像其他图片格式，几乎是为静态或动态专门准备的，SVG可以兼顾两者。并且，对于SVG来说，创建静态图像和动态并不会有太大差别。（这里是下图的教程）

读完这里关于SVG的优势可以，你可以认识到它对于前端设计师是很重要的。而你不需要学什么新技巧，你已经有能力使用SVG了！

2018年，SVG可能会称霸互联网，因为——实用。

英文来源：DesignShack

英文标题：How (& Why) SVG Is Going to Take Over in 2018

原作者：Carrie Cousins

翻译：卡米雷特