SVG简单搞一波

SVG

什么是SVG？
　　SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
　　SVG 用来定义用于网络的基于矢量的图形
　　SVG 使用 XML 格式定义图形
　　SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
　　SVG 是万维网联盟的标准
　　SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

SVG有什么优势？
• 文件体积小，能够被大量的压缩
• 图片可无限放大而不失真(矢量图的基本特征)
• 在视网膜显示屏上效果极佳
• 能够实现互动和滤镜效果
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas
• 依赖分辨率
• 不支持事件处理器
• 弱的文本渲染能力
• 能够以 .png 或 .jpg 格式保存结果图像
• 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
• Canvas 是逐像素进行渲染的。

SVG
• 不依赖分辨率
• 支持事件处理器
• 最适合带有大型渲染区域的应用程序（比如谷歌地图）
• 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
• 不适合游戏应用

Svg在ie6-8中没有支持
制作Svg分两种，一种是自己写代码，一种是使用Adobe Illustrator来绘成图形之后保存为svg格式
引入也分两种保存为svg的格式之后，使用跟png和jpg都是差不多的，img或者backgroud：url(xxx.svg)引入即可；或者直接将svg的代码复制到body里面，支持svg的浏览器就能直接显示了
具体见http://www.webhek.com/svg/

代码中画svg 详见http://www.w3school.com.cn/svg/svg_rect.asp
首先先将svg的范围限定一下

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>

矩形

<rect   x="20" y="20"  width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>

在范围中离左上角20，20的地方生成一个宽300，高100的矩形，填充rgb(0,0,255)的颜色，边框1px颜色为rgb(0,0,0)， 内联样式也可以写在css文件中

圆形

<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>

Cx，cy圆心的位置，r为半径

椭圆

<ellipse cx="300" cy="150" rx="200" ry="80"  style="fill:rgb(200,100,50); stroke:rgb(0,0,100);stroke-width:2"/>

cx 属性定义圆点的 x 坐标，cy 属性定义圆点的 y 坐标，rx 属性定义水平半径，ry 属性定义垂直半径

线

<line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/>

x1 属性在 x 轴定义线条的开始，y1 属性在 y 轴定义线条的开始
x2 属性在 x 轴定义线条的结束，y2 属性在 y 轴定义线条的结束
多边形

<polygon points="220,100 300,210 170,250" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>

points 属性定义多边形每个角的 x 和 y 坐标
折线

<polyline points="0,0 0,20 20,20 20,40 40,40 40,60"style="fill:white;stroke:red;stroke-width:2"/>