今天我们分享的是关于SVG的基础知识。SVG是可缩放矢量图形，可缩放矢量图形是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。SVG的出现带来了一次技术革命。利用SVG能够创建更加丰富多彩的信息可视化和交互性的应用，尤其是可以创建具有动态的、数据驱动的、交互式图形、图像。另外，由于是纯文本格式的．SVG比传统的图形、图像格式如GIF和JPEG占用更少的空间。

简单来讲，随着HTML5的兴起，Canvas和SVG是HTML5中主要的2D图形技术，前者提供画布标签和绘制API，后者是一整套独立的矢量图形语言，成为W3C标准已经有十多年(2003.1至今)，总的来说，Canvas技术较新，从很小众发展到广泛接受，注重栅格图像处理，SVG则历史悠久，很早就成为国际标准，复杂，发展缓慢（Adobe SVG Viewer近十年没有大的更新）。Canvas和SVG比较如下图：

Canvas提供的功能更原始，适合像素处理，动态渲染和大数据量绘制。SVG功能更完善，适合静态图片展示，高保真文档查看和打印的应用场景。今天我们要介绍的就是SVG，如果你的工作大多是开发应用系统，有很多要利用图形展示数据的场景，此时使用SVG再好不过了。

今天我来讲一下关于使用SVG画图的一些基本知识。svg主要通过两种方式呈现在浏览器里，一种是内嵌在html中，一种是独立的svg文件，两者都可以用浏览器打开看，这里我们演示第一种，将svg嵌套在html中，因为我们还要利用JavaScript写一些脚本来控制svg。

我们通过看截图看一下咱们这个DEMO要演示哪些东西（参考了慕课网SVG教程）

在这个页面中，我们将左侧的工具来放在了一个DIV里，右面就是我们的SVG的画布。我们通过左侧的工具栏可以创建矩形，圆形等图形，然后通过图形变化和移动改变图形的一些样式。其中几个比较实用的像旋转，缩放等。

第一步，我们需要搞个工程，建议用webstorm工具，引入jQuery，因为之后我们可能需要用到一些操作dom的方法，用jquery比较方便。接下来我们开始进入正题：

1、创建SVG画图

通过createSVG方法来创建我们的svg画布，通过createElementNS方法。创建出来的SVG其实就是一个DMO节点，给他设置相关属性，并嵌套在canvas这个DIV中。另外我们给这个SVG设置了一个onmouseup的事件，当鼠标抬起时触发selectAreaRemove方法。

在svg中，我们基本都会使用这个方法来创建SVG以及他的图形。创建完成后，当我们点击矩形、圆形、椭圆、直线的时候，能够帮助我们创建对应的图形，这些图形是我们在做svg画图时经常用到的，所以这里我们案例体现了一下。

2、创建图形

如此，这样我们的图形就能显示在SVG里了，通过浏览器我们看一下源代码，当我们添加一个矩形到SVG中时，源代码是这样的：

代码再截取一次：

我们发现svg中出现了一个rect的节点，结点中有transform属性（位移，旋转，大小） class属性 x代表坐标x y代表坐标y width代码长度 height代表宽度 rx ry 属性可使矩形产生圆角。其他的图形就不截图了。

这样我们第一个功能完成，现在我们要做就是通过滑动左侧的旋转，和缩放来实现图形的旋转和缩放功能。首先我们看一下工具栏怎么定义的：

工具栏就是html提供的input 只不过它的type是range 可以设置最大最小值默认值，我们通过监听这个组件来获取要旋转或者缩放的数值，然后通过一些方法来改变图形的变化，我们监控tranForm，一旦他发生了变化，我们则调用：

其中关于旋转，缩放，位移的核心操作是：selected.setAttribute('transform',encodeTransform(t)); 我们通过encodeTransform方法获取当前的变化的值，进行了一些包装，这个包装就是将参数进行格式化（封装成svg能读懂的格式，具体代码如下）：

其中，如果我们想让图形发生位移，则修改他的translate属性的值，如果我们想让它发生旋转就修改rotate的值，如果我们想让他发生缩放就修改scale的值。当然这些比较容易实现的。

这次分享的内容比较少，也不够详细请见谅，这块我后续会再仔细补充下。明天我将分享的内容是《Java入行5年明白的10个问题》敬请期待。