SVG从入门到起飞【1】

今天我们开始一个新话题--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里嵌入了一个宽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同步更新）