SVG如何将在2018成为“大势”元素

2018可以说将会是SVG最强势的一年。在过去的几年中，这种格式的图像文件变得越来越受欢迎，并更广泛的呗使用，但是2018年其实才是它真正突破增长的时候。

这种趋势的兴起得益于高分辨率显示器的普及和应用，并且网站越来越需要闪电般的快速加载时间。听起来SVG可能优势一个要“伤筋动骨”的大调整，实际上真的是这样吗？

SVG其实很容易使用和实现，并且不需要更改现有文件；只需将图像转换为SVG格式即可。以下，我们整理了一些关于SVG你需要了解的一些东西。

1.SVG是为网站设计“而生”的

Mozilla这样描述它：

SVG是一种基于XML的矢量图像描述语言。它基本上是都是标记代码，比如HTML，不同的是SVG中有很多不同的元素来定义你想要在你的图像中出现的形状，以及你想要应用到那些形状上的效果。SVG用于标记图形，而不是内容。你可以使用元素用于创建简单的形状，如<圈>和<人>，更高级一些的SVG的特点包括< fecolormatrix >（使用一个变换矩阵，颜色变换）<动画>（你的矢量图形、动画部分）和（适用于使用正在图像的上个层）。
对于网页设计师来说，SVG的关键优势包括SVG可以通过代码和文本编辑器来创建简单的渲染，如果是较为复杂的图形的话，你可以通过专业的工具，比如Adobe Illustrator。SVG是一个可以轻易改变样式和脚本的文件，并且基于矢量格式，你可以以任何尺寸塑造它们而不会变形或失真，现代浏览器几乎都支持该格式支持。

如果刚刚接触复杂一点的SVG的话，在最初你可能会刚到有点困难。另一个问题是，一些被降级或低版本的浏览器根本不能识别它是什么。

2.设计师如何使用SVG

SVG的好处之一是你可以用它做很多不同的事情。比如，SVG可用于：

· Logo；

· 背景、图案和纹理；

· 动效；

· 响应图像；

· 图标等。

设计者可以使用SVG设计任何元素，其中矢量格式是一个最合适的解决方案，可以替换JPG、PNG和GIF等格式。

3.矢量格式规则

更多的使用SVG格式的文件其实是一种很好的机会和挑战。SVG是不受分辨率影响，这是一个最大的优势，因为你知道你的图像或元素不管在什么分辨率下看起来都是最好的。

使用SVG图像的另一个好处在于，你不必为了实现它们而更改工作流程。如果你在设计软件，如插图或素描，这个过程几乎是没有任何不同于正常工作流程的。其中的一个问题是，你可能想把任何元素都转换成矢量格式的文件，不过，已经有很多人这样做了。

当你准备使用SVG文件时，还有一个关键的事情要记住。为了使它们尽可能小，请务必删除任何你不需要的垃圾。



4.基于文本的格式有利于SEO

一些精明的网站设计师通过使用SVG还可以为SEO带来一点额外的好处。由于SVG在格式化中使用了实际文本，所以搜索引擎可以更好地读取图像。

是的，你或许说合格步骤可以直接通过添加alt信息老实现，但只有这么多空间的关键字，你究竟要如何分配和使用呢。使用SVG，你可以创建更多有利于搜索的图像。

5.SVG是轻量级的

不像其他一些基于矢量的文件会占用比较大的资源和空间，SVG是纯代码的形式。这意味着它更快，更轻量，就是这么简单。

当你尝试把那些漂亮的矢量插图保存为SVG格式之前，在你走得太远之前，先检查一下文件的大小。PNG格式的图像大小相较于SVG来说几乎是成倍增加的，SVG往往的文件带澳基于路径的数目和填充图像。

如果SVG文件过于巨大，考虑将它导出为JPG或PNG格式（即使看起来自相矛盾）。事实上，大多数设计师将继续使用混合的文件类型与图像，我们只是希望你能更多的接触SVG这种文件格式。

6.易于编辑

如果你习惯于在矢量绘图软件中绘制logo或图标或其他内容，那么编辑过程对你来说没有什么变化。

但是如果你通过编写代码来生成SVG的话，过程可能很痛苦，但是结果却很惊人。只需更改文本编辑器中的代码、坐标或颜色，你就可以随意进行更改，没有什么比这个更简单的了。


7.用SVG创建静止图像或动画图像



与大多数不允许你同时拥有静止图像和移动图像的其他图像格式不同，SVG允许。你可以创建静态图像或动画，所有的工作方式都差不多。

这里有一个额外的好处，就是它有助于设计师对SVG的使用带来一些灵感，以此来推动SVG的使用。你不必学习一种新的工具或技术，你已经拥有了你所需要的一切。

总结

这里有一个很大的原因对于2018是SVG开始流行的一年：它很实用。

对于使用高分辨率显示器的每个人来说，矢量格式确实是很好的方式。一切都在完美的尺度，你不必担心像素问题。文件小，下载速度快，并不需要你投入很多的时间和精力，当它涉及到你的网站设计的实现时。

现在你就可以开始使用SVG图像了。