今天我们开始一个新话题--SVG。
SVG在前端开发者由其是前端可视化开发者中越来越重要，图表、图形、特效等都可以用它来实现。虽然重要，但很多开发者对它似乎并不太了解，所以我们先从简单的基础说起。
svg.png
SVG是什么
SVG是Scalable Vector Graphics的缩写，即可缩放矢量图形，也就是说它本质上是一种数学描述，缩小放大时不会引起质量损失。SVG使用XML标记语言，类似于HTML，只不过HTML描述的是文档结构，而SVG描述的是图形。同时现代浏览器都支持直接在HTML中嵌入SVG。
SVG包含一些基础的形状元素，它们有直线(line)、矩形(rect)、圆(circle)、椭圆(ellipse)、多边形(polygon)和相对高级且最重要的路径(path)。这些基础形状以后我们会详细讨论。
SVG怎么用
对于前端开发而言，SVG最终会像img元素一样被嵌入到html中，或者说嵌入到DOM结构中。每个SVG都是由一个 svg 元素包裹着的，所以我们如果要在web页面上显示SVG图像，就是把 svg 元素嵌入到DOM结构中。当然要说明的是， svg 并不是普通DOM元素，所以不能简单的像对待HTML元素一样对待它。
在HTML中直接嵌入
在HTML中直接嵌入很简单，直接像写HTML一样就可以了，如下
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="400">
...
</svg>
<body>
这样我们就在body里嵌入了一个宽600高400的svg元素，只要在 svg 元素中加入基础形状等内容，就可以绘制出自己想要的图形了。
原生JS动态创建
有时我们需要动态的生成或修改svg以及其内容，方法如下
// 生成svg元素
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
// 设置width属性值
svg.setAttribute('width', 600);
// 设置height属性值
svg.setAttribute('height', 400);
// 添加到body
document.body.appendChild(svg);
使用d3.js创建
在使用d3.js生成图表时svg是经常用到的内容，d3创建svg元素十分简单
d3.select('body') // 选中body元素
.append('svg') // 添加svg元素
.attr('width', 600) // 设置width属性值
.attr('height', 400) // 设置height属性值
今天我们简单地介绍了一下svg，以及在页面中使用它的几种方式。后续我们会依次说一说svg的基础形状。
（微信公众号var_web同步更新）
