在普通人眼中， SVG（Scalable Vector Graphics,可伸缩矢量图）可能最多就是在某些网站偶尔看到而已，最多只是知道这是某种图片格式，并不会对这种格式产生任何多余的想法。但是对于网页设计师来说，svg图片在很大程度上为他们的工作提供了相比其他格式图片的绝对性便利。所以，svg的哪些特性吸引了我们呢？今天的文章主要就是为大家讲一下，svg最吸引我们的特性。
伸缩自如 依旧清晰
与其他图片格式不同，SVG格式的图片是一种矢量图形，用矢量点和路径来定义图片，并不是传统的像素点的叠加。它所拥有的优势是它不会因为图片的伸缩而改变图片的清晰度，因为这一整张图片都是以相对点来储存数据的。它所记录的是图片上每个点的相对位置，而不是一个个的拥有rgb颜色的点，无论放大或缩小，它的显示效果是一样的。
我们可以看一下位图与svg图片同样放大时的显示效果，位图的图像有明显的颗粒感。
位图放大效果
svg图放大效果
图片更小 响应更快
如上文所讲的一样，因为矢量图是使用相对点来保存数据的，而位图则是无数个像素点组成，越大越清晰的位图所占用的数据大小就会越大，而svg的图片则不会有这种结果。所以，相比于同尺寸的JPG、JPEG、PNG等传统格式，svg格式的图片的文件大小会更小，因而拥有更快的响应速度。
一个网页的响应速度肯定是网页设计的重要考量因素之一，为了给用户更好的体验，svg图片的选择便成了我们的首选。
更高的可编辑性
因为svg图片是基于XML语言编辑而成的，天生拥有更贴合HTML的属性，可以自由的在HTML、CSS中引用。
当我们打开SVG图片时，你看到的是一行行更具阅读性的代码，你可以清晰地了解图片的构成，而不是位图的一大堆看不懂的乱码。
下面是上图星星图片的代码
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="198px" height="188px" viewBox="0 0 198 188" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
<title>Star 1</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<polygon id="Star-1" stroke="#979797" stroke-width="3" fill="#F8E81C" sketch:type="MSShapeGroup" points="99 154 40.2214748 184.901699 51.4471742 119.45085 3.89434837 73.0983006 69.6107374 63.5491503 99 4 128.389263 63.5491503 194.105652 73.0983006 146.552826 119.45085 157.778525 184.901699 "></polygon>
</g>
</svg>
同时，由于XML的属性，SVG图片上显示的文字是可以选取、复制的，不像位图一样仅仅是一张图，不具备在线编辑的可能。
而且，你可以通过CSS、JavaScript来为SVG图片设计动画，这是位图所无法实现的功能。只需几行代码，就可以为你的SVG图片添加你想要的动画效果，这在很多的页面设计中可以看到，能够为用户提供更好的交互体验。
网友评论