前言：
这节课主要学习下HTML5中的可伸缩矢量图，只是作为一个入门认识，真正开发中需要还是通过查API比较稳妥，毕竟套路是一样的。
1.什么是SVG?
1>：SVG指可伸缩矢量图形(Scalable Vector Graphics)
2>：SVG用来定义用于网络的基于矢量的图形
3>：SVG使用XML格式定义图形
4>：SVG图像在放大或改变尺寸的情况下图形质量不会有损失
优势：
1>：SVG图像可通过文本编辑器创建或修改
2>：SVG图像可被搜索、索引、脚本化或压缩
3>：SVG是可伸缩的
4>：SVG图像可在任何分辨率下被高质量的打印
2.SVG画图举例?
SVG提供了各种各样的图形及效果，包括：圆形、矩形、椭圆形...及渐变、动画等效果
如果项目中真正需要，直接查文档
圆形举例：
width、height：限制svg的宽高
cx、cy分别表示圆心位置，r表示半径
<body> <svg width="300" height="100" version="1.1" > <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg> </body>
3.引用外部的SVG?
我们可以通过外部提供的svg资源，通过iframe的方式引入到需要的页面中
举例：
第一步：先创建一个svg文件(svg是用xml编写de)，命名为example.svg(注意后缀名是.svg)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <iframe src="./SVG.svg" frameborder="0"></iframe> </body> </html>
第二步：通过iframe标签引入到页面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <iframe src="./SVG.svg" frameborder="0"></iframe> </body> </html>
效果图：
