SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。
大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多数情况下，SVG元素和HTML元素在使用transform和transform-origin上是相同的。但它们之间也有不同之处，SVG元素不能使用box model来管理，因此，它没有margin、padding、border或content boxes。
默认情况下，一个HTML元素的transform原点位于该元素的(50%, 50%)的地方，这里是元素的中心点。与之不同，SVG元素的transform原点位于当前用户坐标系统的原点上，这个点是画布的左上角位置。
假设我们有一个<div>和一个SVG <rect>元素：
<!DOCTYPE html>
svg 是『矢量图』，相比于『位图』，矢量图的特点是不会随着图片放大而失真，能做到这一点，主要是由于矢量图存储的内容是对『图形的描述』svg 适合描述一些简单的图形
下面来画第一个图形
svg 可以当做普通的 HTML 标签放在页面中，svg 标签的作用有点像 canvas，充当绘制图形的画布。如果绘制的图形超出了画图，则会被截断。
svg 提供一些标签来表达常用的基本图形，如 <circle/><rect/><ellipse/><line/><polygon/><polyline/><path/>，分别对应圆、矩形、椭圆、线段、多边形、多段线、路径。
表达图形的具体属性不作介绍，请自行查阅资料。
有些属性可以放在CSS中：
有些则只能写在标签里，如下：
path 是一个更强大的 API，可以画出上面几种基本图形，还可以画出表现力更强的曲线。上面的几个标签的优势是使用方便。
有一些东西没有提到，比如 transform 变换：包括旋转、平移、缩放等，你可以自行去了解。
上文中的示例： 链接
SVG教程 | MDN
SVG 教程 | 菜鸟教程
