svg

svg和canvas差不多，就是用代码画图，区别是SVG画的图都是矢量图，无限放大都不会失真，可伸缩性强。而canvas画的是位图，无限放大会出现马赛克，因为canvas画的图都是像素点。canvas要借助js来操作，
svg是标签

<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"></svg>

画的内容都要写在svg里面，一般会写xmlns="http://www.w3.org/2000/svg"，不然浏览器会当成xml解析，但是不写也不影响效果的展示。

要注意的点：canvas是要借助js来操作，但是svg是标签，可以和正常的dom节点一样操作，但是哪些具体的设置还是在行内，当你要改变那些行内的属性的时候，不能直接.cx=什么，必须这样写
this.setAttribute（“cx”,100）,把他当成自定义属性来设置，获取的就是用getAttribute啦。

有两种形式
1.直接写在html中
2.单独写一个svg文件，然后在html文件里用图片的形式引入，可以是img的src，也可以是背景图.

可以用AI软件画好图，然后保存脚本，存为svg，拖到编辑器里就是代码，把你要的复制到svg标签里就好了，然后进行相应的对话操作。

一. 预备知识

1.SVG坐标系
x=0,y=0点在左上角，向右x值增加，向下y值增加；
2.M命令和m命令
M100,100:大写M表示移动到绝对坐标(100,100)，从这里开始画图；
m-75,0:小写m表示相对坐标，这里在大写字母后面表示的绝对坐标是:(25,100),即M100,100 m-75,0 表示从坐标(25,100)的位置开始画图
3.给定圆弧半径，经过平面上两点的圆弧圆心落在两点的中垂线上, 一般有两个
4.A命令:绘制一个椭圆圆弧
A rx ry x-axis-rotation large-arc-flag sweep-flag X Y，表示绘制一个椭圆圆弧经过(X,Y)点。
rx：椭圆横轴半径
ry：椭圆竖轴半径
x-axis-rotation：椭圆横轴相对于CanvasX轴的偏移角度
large-arc-flag：在前面三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，此值取0表示绘制小弧度，取值1表示绘制大弧度
sweep-flag：在前三个参数确定的情况下，满足当前点到指定点(X,Y)位置条件的圆弧总是有四条，去掉上面large-arc-flag标识后还有两个，sweep-flag 取值0表示绘制逆时针方向的圆弧，取值1表示绘制顺时针方向的圆弧。

viewBox=“x, y, width, height” // x:左上角横坐标，y:左上角纵坐标，width:宽度，height:高度

SVG就像是我们的显示器屏幕，viewBox就是截屏工具选中的那个框框，
最终的呈现就是把框框中的截屏内容再次在显示器中全屏显示！