SVG意为可缩放矢量图形（Scalable Vector Graphics）
SVG使用XML格式定义图像

如何定义一个SVG图像

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" standalone="no"?>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <path d="M200 200
  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;"></path>
</svg>

在HTML页面中使用SVG

  • 使用embed标签

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

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

    1
    2
    3
    4
    <embed src="rect.svg" width="300" height="100" 
    type="image/svg+xml"
    pluginspage="http://www.adobe.com/svg/viewer/install/" />
    <!-- pluginspage 属性指向下载插件的 URL。 -->

  • 使用object标签

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

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

    1
    2
    3
    4
    <object data="rect.svg" width="300" height="100" 
      type="image/svg+xml"
      codebase="http://www.adobe.com/svg/viewer/install/" />
    <!-- codebase 属性指向下载插件的 URL。 -->

  • 使用iframe标签