svg

摘要：

　　之前介绍了canvas制作图像，今天再分享svg制作图像。

简介：

　　SVG 意为可缩放矢量图形（Scalable Vector Graphics）。SVG 使用 XML 格式定义图像。svg具有以下优势：

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

与 Flash 相比，SVG 最大的优势是与其他标准（比如 XSL 和 DOM）相兼容。而 Flash 则是未开源的私有技术。

查看与编辑：

　　现在主流浏览器都支持svg，可以通过浏览器直接浏览效果。如需查看 SVG 源代码，可以在任何编辑器上查看，如notepad，sublime text等，如果是在浏览器中然后在窗口中右键单击，选择“查看源代码”。任何编辑器都可以编辑，文件后缀为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"/>

</svg>

　　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 属性设置形状内的颜色。我们把填充颜色设置为红色。

HTML中引用svg：

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

embed：

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

 

　　<embed> 标签被所有主流的浏览器支持，并允许使用脚本。当在 HTML 页面中嵌入 SVG 时使用 <embed> 标签是 Adobe SVG Viewer 推荐的方法！然而，如果需要创建合法的 XHTML，就不能使用 <embed>。任何 HTML 规范中都没有 <embed> 标签。pluginspage 属性指向下载插件的 URL。

object：

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

　　<object> 标签是 HTML 4 的标准标签，被所有较新的浏览器支持。它的缺点是不允许使用脚本。假如您安装了最新版本的 Adobe SVG Viewer，那么当使用 <object> 标签时 SVG 文件无法工作（至少不能在 IE 中工作）！codebase 属性指向下载插件的 URL。

iframe：

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

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

直接嵌入：

<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"/>
        </svg>

　　可以直接将svg标签嵌入到html的body中。

svg平面图形：

长方形：

<svg width="100%" height="100%" version="1.1"
        xmlns="http://www.w3.org/2000/svg">
        <rect width="300" height="100"
        style="fill:red;stroke-width:1;
        stroke:rgb(0,0,0)"/>
        <!-- rect元素的width和height属性可定义矩形的高度和宽度，style属性用来定义 CSS 属性，fill属性定义矩形的填充颜色，stroke-width属性定义矩形边框的宽度，stroke属性定义矩形边框的颜色 -->
        </svg>

正方形：

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

        <polygon points="10,10 110,10 110,110 10,110" style="fill:red;stroke:#000000;stroke-width:1"/>
        
        </svg>

 

三角形：

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

        <polygon points="100,10 50,100 150,100" style="fill:red;stroke:#000000;stroke-width:1"/>
        <!-- points 属性定义多边形每个角的 x 和 y 坐标，以空格分开 -->
        </svg>

 

圆形：

<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"/>
        <!-- cx和cy属性定义圆点的x和y坐标。如果省略cx和cy，圆的中心会被设置为(0, 0)，r属性定义圆的半径。 -->
        </svg>

 

椭圆：

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

        <ellipse cx="100" cy="80" rx="80" ry="50" style="fill:red;stroke:#000;stroke-width:2"/>
        <!-- cx 属性定义圆点的 x 坐标，cy 属性定义圆点的 y 坐标，rx 属性定义水平半径，ry 属性定义垂直半径 -->
        </svg>

 

线：

<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:red;stroke-width:2"/>
        <!-- x1 属性在 x 轴定义线条的开始，y1 属性在 y 轴定义线条的开始，x2 属性在 x 轴定义线条的结束，y2 属性在 y 轴定义线条的结束 -->
        </svg>

 

折线：

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

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

螺旋线：

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

        <path d="M153 334
        C153 334 151 334 151 334
        C151 339 153 344 156 344
        C164 344 171 339 171 334
        C171 322 164 314 156 314
        C142 314 131 322 131 334
        C131 350 142 364 156 364
        C175 364 191 350 191 334
        C191 311 175 294 156 294
        C131 294 111 311 111 334
        C111 361 131 384 156 384
        C186 384 211 361 211 334
        C211 300 186 274 156 274"
        style="fill:white;stroke:red;stroke-width:2"/>

        <!-- M = moveto，L = lineto，H = horizontal lineto，V = vertical lineto，C = curveto，S = smooth curveto，Q = quadratic Belzier curve，T = smooth quadratic Belzier curveto，A = elliptical Arc，Z = closepath -->

        </svg>

 

 

注意：大写表示绝对定位，小写表示相对定位