SVG介绍
SVG是1990年代构思出来的，很长一段时间都不太受人待见，但现在则发展得越来越好，越来越多的人推荐和喜欢使用它。其实在2000年左右，对于SVG的支持还是很少的，直到2017年很多web浏览器都开始支持SVG，很多的向量程序已经支持导出SVG。当然毫无疑问，SVG已经越来越广泛地使用在WEB开发中。
我们来看看根源，其实SVG的流行并不是偶然。虽然一些传统的图片格式，比如JPG和PNG对photograph来说很完美，但是其实SVG对现在web开发中的扩展性，响应性，交互性，可编程性，性能以及可访问性这些要求来说，是一个近乎完美的选择。
什么是SVG？为什么要使用它？
SVG是一个基于XML的矢量图形格式。XML使用的是HTML的tag，当然它更加严格而已。比如说，你不能省略结束标签，因为这会使得SVG的render出问题。
给你一个初步的感觉，下面就是一个SVG的代码，它就是画一个白色的圆，有一个黑色的边框
<circle cx=”100″ cy=”100″ r=”50″ stroke-width=”4″ stroke=”#000″ fill=”#fff” />
所以，其实说白了SVG就是一个很平的文本，有描述线的，曲线，形状，颜色和文字的。我们可以看到其实它的可读性很好，而且当我们把它放到HTML中的时候，可以很方便地通过CSS和Javascript来修改它。这样的特性是传统的文件格式比如PNG, GIF, JPG等所不具备的。
SVG是一个W3C的标准，因此他可以很方便地和别的语言和技术相结合，比如JavaScript，DOM,CSS以及HTML。从另一个角度来说，作为业界权威的W3C标准定，SVG可能会成为所有浏览器关于矢量图标准的定义。
SVG的过人之处就是它可以解决很多现代web开发的问题，我们来具体看看这些问题
可扩展性和响应性
SVG是使用形状，数字和坐标而不是像素来渲染图片的，这就使得他们可以和分辨率没有关系并且无限地扩展。其实你一想想，就会发现其实他们的创建图片的方式和你拿一支笔在那边画画是一致的。只有比例在改变。
有了SVG之后，你可以使用形状，路径和文本元素来画各种各样的图片，而且你可以确认即使在大的scale下也是很清晰的。
相比之下，GIF,JPG以及PNG都是有固定的尺寸，这也使得他们在扩大的时候显示就会有问题。当然，很多基于像素的图形都已经证明有其固有的优势，但是至少在无限扩展性这个方面和SVG相比还是有很大差距的。
可编程性和交互性
SVG是完全可以编辑和编写脚本的。各种各样的动画和交互可以通过CSS或者Javascript加入到inline SVG图形中。
辅助功能
SVG文件是基于文本的，所以当嵌入到web页面中的时候，可以搜索到和加index。这使得他们对屏幕阅读者，搜索引擎以及其它设备都很友好。
性能
一个影响性能的重要方面就是文件的大小，尤其在web页面中。而在这个方面，SVG和bitmap文件格式相比通常来说大小要小很多。
常见用例和浏览器支持
SVG有很多的常见用例，下面我们来看一些比较典型的例子
普通插图和图表
任何传统的使用铅笔和钢笔画的图形都应当可以很方便地转换成SVG的格式。
Logos和icons
Logos和Icons需要在任何大小都很清晰 — 无论是在一个按钮上还是在一个广告板上 — SVG都是一个很理想的选择方案。而且SVG的icon更加易于访问，并且容易放置。
动画
你可以使用SVG来话更加吸引人的动画包括很酷的线描效果。事实上，SVG代码可以和CSS动画集成，也可以加入Javascript并且与内置的SMIL动画进行交互。
互动性（图表，图形，图表，地图）
SVG的图片可以根据用户的操作或者别的事件改编其自身的数据或者进行动态更新。
特殊效果
SVG可以实现很多动态效果，比如形状变形和不同的粘稠效应。
构建界面和应用
SVG可以创建很复杂的界面，可以与HTML5, 基于web的应用以及富网络应用（RIA）相结合。
我们可以看到SVG的使用场景是很多的，现在也有越来越多的浏览器支持它了，关于浏览器的支持可以参见这里。
好了，希望读了本文之后，你可以了解SVG的基本概念和其使用场景，希望你能够在项目中越来越多地使用它。
Recent Comments