SVG矢量图：
html5支持内联svg,svg指可以伸缩的矢量图，其优点是放大不会模糊，支持任意尺寸打印不损坏品质，可通过编辑器创建和修改，；使用XML定义，其本质就是XML文件，和Canvas类似；
在html中使用SVG图像：
SVG 文件可通过：、 或者 标签嵌入 HTML 文档,或直接链接到SVG文件。具体如下：
<!-- 此标签允许使用脚本，支持在HTML5中使用 --><embed src="circle1.svg" type="image/svg+xml" /><!-- 此标签不支持脚本，支持在HTML5和HTML4、XHTML使用 --><object data="circle1.svg" type="image/svg+xml"></object><!-- 允许使用脚本，支持HTML5中使用 --><iframe src="circle1.svg"></iframe><!-- 直接显示在HTML元素中 --><div><svg xmlns="http://www.w3.org/2000/svg" version="1.1"><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /></svg></div><!-- 当点击链接后跳到SVG文件显示图像 --><a href="circle1.svg">点击查看SVG文件</a>
SVG中预定义图形：
SVG像Canvas一样提供了一套预定义好的元素（标签，这些标签可以是单标签，也可以是双标签，控制属性的属性词位置和html标签中的属性写法一样，可以用style属性替换），具体如下面案例：
<div><svg width='500' height='600'><!-- 1.<sircle/> 定义圆，其中属性：cx定义圆心横坐标 cy定义圆心纵坐标 r定义圆的半径 stroke定义圆边框的颜色 stroke-width定义圆边框的宽度 fill定义圆的填充颜色 --><circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /><circle cx="10" cy="50" r="40" stroke="yellow" stroke-width="2" fill="blue" opacity='.5'></circle><!-- 2.<rect/> 定义矩形，x和y表示坐标 rx和ry定义圆角 width和height定义尺寸 stroke定义描边颜色 stroke-width定义描边宽度 fill定义填充颜色 opacity定义半透明，当前加以下前缀则表示该属性控制的半透明--><rect x='30' y='130' rx="20" ry="20" width='200' height='50' stroke='yellow' stroke-width='10' stroke-opacity = '.4' fill='blue' fill-opacity='0.5'/><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"></rect>><!-- 3.<ellipse/> 定义椭圆，cx和cy表示圆心坐标 rx和ry表示水平半径和垂直半径 后面的属性和上面一样--><ellipse cx="300" cy="80" rx="50" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"/><!-- 4.<line/> 定义直线，x1和y1表示直线起始坐标 x2和y2表示结束坐标 后面属性和上面一致--><line x1="20" y1="20" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"/><!-- 5.<polygon/> 定义至少三条边的多边形，points='左边对'，里面表示x,y的坐标对，每个坐标对表示线的交点，有前后顺序，自动封闭，后面属性和上面一致--><!-- fill-rule属性：由于判断画布上某区域是否属于该图形内部，内部区域会被填充，外部区域则不会被填充，属性值：nonzero | evenodd | inherit,关于属性值解释：查阅官方文档：https://www.runoob.com/svg/svg-polygon.html --><polygon points="0,0 100,0 100,100 0,100" style="fill:lime;stroke:purple;stroke-width:1"/><!-- 6.<polyline> 定义折线， points属性里面的值是x,y的坐标对，有前后顺序，依次连接，后面的属性和上面一致--><polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /><!-- 7.<path/> 定义路径，下面的命令可用于路径数据：M = moveto,L = lineto,H = horizontal lineto,V = vertical lineto,C = curveto,S = smooth curveto,Q = quadratic Bézier curve,T = smooth quadratic Bézier curveto,A = elliptical Arc,Z = closepath,注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。--><path d="M150 0 L75 200 L225 200 Z" /><!-- 8.<text></text> 文本， x和y表示开始坐标 transform表示转换里面rotate(角度 坐标)表示旋转--><text x="100" y="15" transform="rotate(45 0,100)" fill="red">hello word</text></svg></div>
SVG滤镜：
SVG滤镜用来增加对SVG图形的特殊效果，如：
SVG可用的滤镜是：feBlend - 与图像相结合的滤镜、feColorMatrix - 用于彩色滤光片转换、feComponentTransfer、feComposite、feConvolveMatrix、feDiffuseLighting、feDisplacementMap、feFlood、feGaussianBlur、feImage、feMerge、feMorphology、feOffset - 过滤阴影、feSpecularLighting、feTile、feTurbulence、feDistantLight - 用于照明过滤、fePointLight - 用于照明过滤、feSpotLight - 用于照明过滤，除此之外，您可以在每个 SVG 元素上使用多个滤镜。
滤镜定义在
<div><svg><defs><filter id="f1" x="0" y="0"><feGaussianBlur in="SourceGraphic" stdDeviation="15" /><!--feGaussianBlur 用于创建模糊效果 --></filter></defs><rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" /></svg></div>
SVG渐变：
SVG渐变主要有两种类型：Linear线性渐变、Radial径向渐变
<div><svg><defs><linearGradient id="gr" x1="0%" y1="100%" x2="100%" y2="0%"><stop offset="0%" stop-color='rgb(255,255,0)'/><stop offset="100%" stop-color='rgb(0,0,0)'/></linearGradient></defs><ellipse cx="0" cy="0" rx="100" ry="100" fill="url(#gr)" /></svg></div>
推荐文档：
由于SVG在实际开发中并不常用，因此这里不做详细介绍，如果想了解更多，建议阅读官方文档：https://www.runoob.com/svg/svg-tutorial.html
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海
和toString()的区别)
 - Karatsuba multiplication)
