SVG

什么是SVG？

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

SVG 的优势

1. SVG 可被非常多的工具读取和修改（比如记事本）
2. SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
3. SVG 是可伸缩的
4. SVG 图像可在任何的分辨率下被高质量地打印
5.     SVG 可在图像质量不下降的情况下被放大
6. SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
7. SVG 可以与 Java 技术一起运行
8. SVG 是开放的标准
9. SVG 文件是纯粹的 XML 

下面的例子是一个简单的 SVG 文件的例子。SVG 文件必须使用 .svg 后缀来保存：

<!--?xml version="1.0" standalone="no"?-->

 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

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

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

</svg>

代码解释：

第一行包含了 XML 声明。请注意 standalone 属性！该属性规定此 SVG 文件是否是“独立的”，或含有对外部文件的引用。 standalone="no" 意味着 SVG 文档会引用一个外部文件 - 在这里，是 DTD 文件。

第二和第三行引用了这个外部的 SVG DTD。该 DTD 位于 “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”。 该 DTD 位于 W3C，含有所有允许的 SVG 元素。

SVG 代码以 < svg > 元素开始，包括开启标签 < svg > 和关闭标签 < /svg > 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。

SVG 的 < circle > 用来创建一个圆。cx 和 cy 属性定义圆中心的 x 和 y 坐标。如果忽略这两个属性，那么圆点会被设置为 (0, 0)。r 属性定义圆的半径。

stroke 和 stroke-width 属性控制如何显示形状的轮廓。我们把圆的轮廓设置为 2px 宽，黑边框。

fill 属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭 SVG 元素和文档本身。

注释：所有的开启标签必须有关闭标签！

————————————————————————————————————————————————————————————————————————————

如何在HTML页面中插入 SVG：

SVG 文件可通过以下标签嵌入 HTML 文档：< embed > 、< object > 或者 < iframe >。

三种把 SVG 文件嵌入 HTML 页面的不同方法。

使用 < embed > 标签

< embed > 标签被所有主流的浏览器支持，并允许使用脚本。

注释：当在 HTML 页面中嵌入 SVG 时使用 < embed > 标签是 Adobe SVG Viewer推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 < embed >。任何 HTML 规范中都没有 < embed > 标签。

语法：

1. < src="rect.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/">

注释：pluginspage 属性指向下载插件的 URL。

使用 < object > 标签

< object > 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。

注释：假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 < object > 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！

语法：

1. <object data="rect.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/"></object>

注释：codebase 属性指向下载插件的 URL。

使用 < iframe > 标签

< iframe > 标签可工作在大部分的浏览器中。

语法：

1. <iframe src="rect.svg" width="300" height="100"></iframe>

————————————————————————————————————————————————————————————————————————————

SVG实例——矩形

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

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

</svg>

代码解释：

• rect 元素的 width 和 height 属性可定义矩形的高度和宽度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0 - 1）
• CSS 的 stroke-opacity 属性定义笔触颜色的透明度（合法的范围是：0 - 1
• CSS 的 opacity 属性定义整个元素的透明值（合法的范围是：0 - 1）
• rx 和 ry 属性可使矩形产生圆角。

————————————————————————————————————————————————————————————————————————————

SVG实例——圆形

circle 标签可用来创建一个圆，它只有3个属性用来设置圆形。

1. <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
2. <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"></circle>
3. </svg>

代码解释：

• cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为 (0, 0)
• r 属性定义圆的半径。

————————————————————————————————————————————————————————————————————————————

SVG实例——椭圆

ellipse 标签可用来创建椭圆。椭圆与圆很相似。不同之处在于椭圆有不同的 x 和 y 半径，而圆的 x 和 y 半径是相同的。

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

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

</svg>

代码解释：

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

————————————————————————————————————————————————————————————————————————————

SVG实例——线条

line 标签用来创建线条。

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

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

</svg>

代码解释：

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

SVG的实例有很多，可以百度一下，网上有很多的美丽的图形代码，本笔记主要记录SVG实现的原理和在文档中的格式