在互联网应用的开发过程中，我们经常会遇到这样的一个问题--使用高分辨率的图片，就避免不了长时间加载。而有了SVG，我们可以在一定程度上解决这个问题。
SVG易于使用和制作，我们不需要修改现有的文件，只需要使用svg作为图像格式。下面就聊一聊我所了解的SVG相关知识。
什么是SVG？
-
关于SVG，相信很多设计师已经无数次听说，也经常使用到这样的文件格式。然而我们对它不一定完全了解。我们来看看官方对svg的描述：
SVG是基于XML的用于描述矢量图的语言，和HTML相似，我们有很多不同的元素可以用来定义形状和效果。SVG用于标记图形而非内容，例如通过标签（分别是圆和矩形），我们可以创建最简单的形状元素。更高级的包括使用矩阵转换颜色，矢量图动画和在图像上进行图像叠加。
SVG的优势是什么？
-
1.SVG受到广泛支持
SVG在网站上的兼容性越来越好。一般情况下，所有主流浏览器都支持基本的SVG。当然，SVG也有一些局限，而面对兼容性不一致时，依然可以接受，我们可以使用后备或使用JavaScript来绕过这些缺点。例如，Microsoft的Internet Explorer和Edge不提供使用transform属性的CSS动画的功能。Explorer和Edge将忽略这些指令并仍静态渲染图形。只要不破坏功能，这不是什么大问题。其他功能强大的现代浏览器将显示预期的动画，用户依然可以享受我们向他们传达的。
2.SVG很快
SVG文件一般都很小，因此下载速度比位图快很多。此外，SVG代码可以直接放在HTML中，并减少服务器请求。我们可以制作多彩的全屏SVG背景 ，而文件大小只有一小部分，以此来替代填充屏幕需要用到的数百万像素的数码照片。
3.SVG为矢量格式
SVG为矢量格式，尽可能的使用矢量图形的好处在于它在任何分辨率下都有比较好的表现。而且随着更高分辨率的设备变得越来越流行，这一点就显得更加重要 。我们平时使用的位图由网格内的彩色方块组成，与其不同，SVG通过数学计算以适应当前的屏幕分辨率。
4.SVG可以通过CSS设置样式
CSS是编写网站样式的方式。我们可以用其设置位图的样式，但效果针对整个图像，可能不太实际。比如，有多少网站确实需要显示倒像或改变色调？也许模糊，不透明，灰度和亮度可能占有一席之地，但设计师更常见的是在图像周围设置元素样式，比如彩色图像叠加。另一方面，SVG是用XML编写的，这意味着我们可以定位构成整个SVG的各个部分。可以更改图标的颜色或在图标中重新定位箭头的方向，也可以隐藏并显示可重复使用的矢量星作为评级系统的一部分。我们还可以将许多这些属性放在鼠标悬停上以便于动画制作，这就是我们要说的下一个优势。
5.SVG可以动画
如果你了解一点Web开发，就可以将SVG图形动画化，就像它们是网站的其他部分一样。所有这些代码都可以包含在SVG文件中，这样你就可以有一个仅6kb大小却像视频一样生动的动态图标。
6.SVG可以轻松重新排列
在为网络准备图像时，尺寸通常由网站本身确定。有时一个网站会希望你的图像像一个正方形 - 比如Instagram - 而其他网站则需要纵向或横向。对于位图，我们可能必须以隐藏某些元素的方式裁剪图像。但是，使用矢量图形，就可以简单地围绕不同尺寸重新定位和重新调整元素大小。
如果我们下载免费图片和免费矢量图形，可以进行颜色编辑以匹配我们的主色调。使用矢量图形，我们可以通过单击按钮来执行此操作，但是对于位图，我们必须逐段重新着色。
7.SVG支持透明度
并非所有位图都允许透明度，而那些带有一些缺点的图像格式包括带有.GIF的锯齿状边缘或带有PNG的大文件尺寸。需要透明度的格式更适用于SVG，比如很多公司网站上的logo使用SVG格式。它允许简单的悬停效果为logo的背景。SVG透明度是摆脱矩形图形和块状网站的好方法。
8.基于文本的格式有利于SEO
使用SVG会对SEO更有利，因为他们使用了文本来描述图形，搜索引擎可以更好地识别它们。也许你会说，对于一般图片也可以加alt标签来描述，但留给关键词的空间毕竟是有限的。使用SVG你可以创建对搜索引擎更友好的图片。搜索引擎会将SVG的内容索引，包括单独的文件和转化后的图像。
读到这里，我们可能对SVG有了更多的了解，也可以认识到它对于前端的重要性 。而作为设计师也可以更多地使用较为实用的SVG，以提高我们所做系统的性能。
参考资料：
1、How (& Why) SVG Is Going to Take Over in
2018
2、10 reasons the image format SVG is
rocking the internet
3、How Designers Should Think About SVG
