基本内容：
* SVG并不属于HTML5专有内容
* HTML5提供有关SVG原生的内容
* 在HTML5出现之前,就有SVG内容
* SVG,简单来说就是矢量图
* SVG文件的扩展名为".svg"
* SVG使用的是XML语法
一、概念：
* SVG是一种使用XML技术描述二维图形的语言
* SVG特点
* SVG绘制图形可以被搜索引擎抓取
* SVG在图片质量不下降的情况下，被放大
* SVG与Canvas的区别
* SVG
* 不依赖分辨率
* 支持事件绑定
* 大型渲染区域的程序(例如百度地图)
* 不能用来实现网页游戏
* Canvas
* 依赖分辨率
* 不支持事件绑定
* 最合适网页游戏
* 保存为".jpg"格式的图片
* SVG用途
* 网页中一些小的图标
* 网页中动态特效(动画效果)
SVG 文件示例
1 <?xml version="1.0" encoding="utf-8" ?> 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 3 <svg width="100%" height="300" version="1.1" xmlns="http://www.w3.org/2000/svg"> 4 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" 5 stroke-width="4"/> 6 </svg>
二、HTML5中使用SVG
* 使用<svg></svg>元素
* 作用 - 类似于<canvas>元素
* 默认大小为 300px*150px
* 使用CSS样式
* 使用SVG绘制图形，必须定义<svg>中
示例：
1 <svg width="100%" height="300"> 2 <rect x="100" y="100" width="300" height="100" fill="blue" troke="black" stroke-width="4"/> 3 </svg>
三、绘制图形
1. 矩形元素
<rect x="" y="" width="" height="" />
2. 圆型元素
<circle cx="" cy="" r="" />
3. 椭圆元素
<ellipse cx="" cy="" rx="" ry="">
4. 直线元素
<line x1="" y1="" x2="" y2="" />
5. 折线元素
<polyline points="">
6. 多边形元素
<polygon points="" />
示例：
1 <!-- 2 在HTML页面中使用svg标签的话 3 * 定义<svg></svg>元素 4 * 类似于<canvas>元素的作用 5 * 默认大小 300px * 150px 6 * 设置宽度和高度 - 属性和style 7 * 利用svg绘制所有图形,必须定义在<svg>元素内 8 * 利用svg绘制的图形是与HTML页面有关的 9 --> 10 <!-- <svg style="background:pink;width:400px;height:400px;"> --> 11 <!-- 12 绘制矩形 - <rect /> 13 * x和y - 绘制矩形的左上角坐标值 14 * width和height - 绘制矩形的宽度和高度 15 * 必须使用属性方式,不能使用style样式方式 16 * 默认颜色为黑色 17 设置颜色 - 既可以使用属性,还可以使用样式 18 * fill - 设置填充颜色 19 * stroke - 设置描边颜色 20 设置线条宽度 21 * stroke-width 22 注意 23 * svg绘制的图形,使用style方式设置样式,使用的不是CSS属性,而是SVG属性 24 --> 25 <rect x="10" y="10" width="100" height="100" fill="blue" stroke="black" stroke-width="5" /> 26 27 <!-- 28 绘制圆形 - <circle> 29 * cx和cy - 圆形的圆形坐标值 30 * r - 圆形的半径 31 --> 32 <circle cx="100" cy="100" r="100" fill="pink" /> 33 34 <!-- SVG绘制椭圆 --> 35 <ellipse cx="150" cy="150" rx="150" ry="100" /> 36 37 <!-- SVG绘制线条 --> 38 <line x1="10" y1="10" x2="200" y2="200" stroke-width="10" stroke="black"/> 39 <line x1="200" y1="200" x2="200" y2="10" stroke-width="10" stroke="black"/> 40 41 <!-- SVG绘制折线 --> 42 <polyline points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white"/> 43 44 <!-- SVG绘制多边形 --> 45 <polygon points="10,10 200,10 200,200 10,200 100,100 10,10" stroke-width="5" stroke="black" fill="white" />