SVG意为可缩放矢量图
SVG使用XML格式定义图像
什么是SVG？
- SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
- SVG 用来定义用于网络的基于矢量的图形
- SVG 使用 XML 格式定义图形
- SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
- SVG 是万维网联盟的标准
- SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
背景和优势
在 2003 年一月，SVG 1.1 被确立为 W3C 标准。
参与定义 SVG 的组织有：太阳微系统、Adobe、苹果公司、IBM 以及柯达。
与其他图像格式相比，使用 SVG 的优势在于：
- SVG 可被非常多的工具读取和修改（比如记事本）
- SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
- SVG 是可伸缩的
- SVG 图像可在任何的分辨率下被高质量地打印
- SVG 可在图像质量不下降的情况下被放大
- SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
- SVG 可以与 Java 技术一起运行
- SVG 是开放的标准
- SVG 文件是纯粹的 XML
SVG 的主要竞争者是 Flash。
<?xml version="1.0" encoding="UTF-8"> <!--XML name Space 命名空间，当前标签的使用环境--> <svg xmlns="http://www.w3.org/2001/XMLSchema"> <rect width="100" height="50"></rect> </svg>
第一行包含XML声明。
version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。
HTML页面嵌入SVG的4种方法
1.iframe
<iframe src="res/svg.html" frameborder="0"></iframe>
2.object
<object data="res/svg.html" type=""></object>
注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！
3.embed
<embed src="res/svg.html" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" />
注释：当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。
4.svg
<svg width="600" height="600" id="s1"> <!--<circle r="100" cx="300" cy="300" fill="red"></circle>--> </svg>
使用SVG绘制矩形
<svg width="600" height="600" id="s"> <rect width="100" height="100" x="0" y="0" fill="red" fill-opacity="0.5" stroke="blue" stroke-width="5" opacity="0.5"></rect> </svg>
- x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
- y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
- CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
- CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1）
- CSS 的 stroke-width 属性定义轮廓宽度
- CSS 的 stroke 属性定义轮廓颜色
- CSS 的 fill 属性定义背景颜色
- CSS 的 opacity 定义整个元素的透明度（0-1）
- CSS rx,ry产生圆角
注意：
(1)SVG图形的样式可以用HTML属性赋值，也可以使用CSS形式，但不接受普通的CSS属性！只能使用SVG元素的专有样式属性。
(2)SVG图形的属性不属于HTMLDOM标准，只能使用核心DOM方法操作其属性： rect.setAttribute('','')
(3)使用JS动态创建SVG元素，
1)用svg.innerHTML =''
2)用document.createElementNS(''命名空间,创建元素 '')，不能使用document.createElement()
(4)SVG元素的nodeName都是纯小写形式！与普通的HTML元素不同！
使用SVG绘制圆形
<circle r="" cx="" cy=""></circle>
cx,cy定义原点坐标
r定义半径
剩下使用通用属性
使用SVG绘制椭圆
<ellipse rx="" ry="" cx="" cy=""></ellipse>
rx,ry属性定义圆点x,y坐标
cx,cy属性定义水平半径，与垂直半径
使用SVG绘制直线
<line x1="0" y1="0" x2="100" y2="0" stroke="red"></line>
stroke 属性是必须的SVG默认只有填充颜色，没有描边颜色
例题实现
<svg width="600" height="600"> <!--公共属性放在GROUP中,--> <g stroke-width="30" stroke="red"> <line x1="100" y1="150" x2="200" y2="150"></line> <line x1="250" y1="150" x2="500" y2="150"></line> <line x1="100" y1="300" x2="200" y2="300"></line> <line x1="250" y1="300" x2="500" y2="300"></line> <line x1="100" y1="450" x2="200" y2="450"></line> <line x1="250" y1="450" x2="500" y2="450"></line> </g> </svg>
通用属性放在<g>标签中</g> 即group（小组），小组内标签继承小组的通用属性
使用SVG绘制折线
<svg width="800" height="800"> <polyline points="100,100 600,100 100,600 350,0 600,600 100,100 " stroke="#000" fill-opacity="0"></polyline> </svg>
注意：
1.fill-opacity="0" ,不然有背景填充
2.stroke 属性颜色赋值，要不显示不出来
3.points 去折线的点
使用SVG绘制多边形
<polygon points="100,100 300,300 450,250" fill="red" stroke="red" ></polygon>
points 与polyline的属性一样下，x1,y1 x2,y2 定义每个角的坐标
<g fill="#f45fas"> <polygon points="0,0 400,200 800,0"></polygon> <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon> </g>
使用SVG绘制文本
<g fill="#f45fas"> <polygon points="0,0 400,200 800,0"> <span>你号</span> 错误
</polygon> <polygon points="0,100 400,300 800,100 800,800 0,800"></polygon> </g>
<text font-size="30" alignment-baseline="before-edge">你好</text>
设置文本基线
提示：传统的标签不能置于SVG标签内部！同理，SVG的标签也不能放在其它元素内部！
使用SVG绘制图像
提示：在SVG中绘制图像使用image元素，引入位图后，此SVG图片放大后会失真。
<image width="" height="" xlink:href="x.jpg" x="" y=""></image>
12.如何使用渐变效果
linear 线性
radial 放射性
<linearGradient ></linearGradient>元素定义线性渐变。
<linearGradient ></linearGredient>必须在defs内部
<svg width="600" height="400" id="svg15">
<!--渐变属于特效，必须声明在“特效列表”-->
<defs > <linearGradient id="g1" x1="0" y1="0" x2="100%" y2="100%"> <stop offset="0" stop-color="red"></stop> <stop offset="50%" stop-color="blue"></stop> <stop offset="100%" stop-color="green"></stop> </linearGradient> </defs> <rect width="200" height="200" x="50" y="50" fill="url(#g1)"></rect>
滤镜：详细信息http://blog.csdn.net/chy555chy/article/details/53364310
<defs>
<filter id="Gaussian_Blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>
</defs>
- 注意：
- <filter> 标签的 id 属性可为滤镜定义一个唯一的名称（同一滤镜可被文档中的多个元素使用）
- filter:url 属性用来把元素链接到滤镜。当链接滤镜 id 时，必须使用 # 字符
- 滤镜效果是通过 <feGaussianBlur> 标签进行定义的。fe 后缀可用于所有的滤镜
- <feGaussianBlur> 标签的 stdDeviation 属性可定义模糊的程度
- in="SourceGraphic" 这个部分定义了由整个图像创建效果