如何向网页添加 SVG

来源：互联网发布：淘宝女装c店排名2016 编辑：程序博客网时间：2024/05/16 13:54

本主题介绍了在网页中呈现 SVG 的常见方法，并假定你已掌握有关 HTML 和 JavaScript 的基础知识。

简介
SVG 的呈现方法
- 内联 HTML5
- 内联 XHTML
- 独立 SVG
- 嵌入
- 插件
摘要
相关主题

简介

如果你只了解可缩放矢量图形 (SVG)，并希望体验 SVG，则你首先需要解决的问题之一是如何向基本网页添加 SVG。如果你看一下相对基本的网页模板，便可获知如何开始执行此操作。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  <title>My First SVG Page</title></head><body>  <p>SVG to be inserted here.</p></body></html>

可通过多种方法向此基本模板添加 SVG。下面的示例演示了一种直接执行此操作的方法。

<?xml version="1.0" encoding="utf-8" standalone="no"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> -->  <title> My First SVG Page</title></head><body>  <svg xmlns="http://www.w3.org/2000/svg" version="1.1"       width="200px" height="200px">    <rect x="0" y="0" width="100%" height="100%"          fill="none" stroke="black"/>    <circle cx="100" cy="100" r="50"            style="stroke: black; fill: red;"/>  </svg></body></html>

提示为提高现代浏览器之间的兼容性，请将上述示例代码以 xhtml 文件扩展名保存。通过将文件扩展名从html 更改为xhtml，可有效地将模板从 HTML 文档转换为 XHTML 文档。这就是为何添加 xml 声明（上一示例中的第一行）并注释掉meta 元素的原因。有关上一示例的更多详细信息，请参见以下列表。

<?xml version="1.0" encoding="utf-8" standalone="no"?>: xml 声明是一个将文档标识为 XML/XHMTL 的浏览器处理指令。所需的版本特性会指定 XML 文档将遵循的 XML 标准的版本。可选encoding 特性会指示浏览器如何基于特定字符集解释文档的关联字节（默认编码为 UTF-8）。可选standalone="no" 特性指示在DOCTYPE 元素中指定的文档类型定义 (DTD) 将不只是用于验证。请注意，实际上无需指定standalone=”no”。存在外部标记声明（此示例中为 DTD）时会假定standalone=”no” 值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">: 从技术上来说，DOCTYPE 声明不是 HTML 元素。此声明是对 Web 浏览器的说明，它介绍了写入页面的标记语言版本。请注意，此声明指用于指定标记语言规则的 DTD，以便浏览器可以正确呈现内容。DOCTYPE 还允许你使用页面验证程序。在此示例中，XHTML 1.0 Transitional DTD 启用了所有 HTML 元素和特性，包括表象元素和弃用的元素（例如 <font>）。但不允许框架，并且必须将标记编写为格式正确的 XML。
<html xmlns="http://www.w3.org/1999/xhtml">: html 元素会告知浏览器，这是一个普通意义上的 HTML 文档，具体而言，它是由DOCTYPE 指示的 XHTML 文档。xmlns 特性指定 XHTML 文档的 XML 命名空间。通常，开发人员在编写 XHTML 文档时应显式包括 XHTML xmlns 声明。
<head>: 利用网页的 head 部分，可以定义页标题、提供搜索引擎信息、设置页位置、添加样式表、编写脚本等。（例如base、link、meta、script 和style）。
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />: meta 元素提供有关文档的元数据。元数据是有关文档内容的信息（对读者不可见）。此元数据可供浏览器或其他软件（例如，搜索引擎、文档管理系统等）使用。第一个模板（不具有svg 元素）中的内容特性指定，在服务器传送实际页面内容之前，应先使用名为Content-Type（其值为 text/html; charset=utf-8）的 HTTP 标头来提供页面（从 Web 服务器到客户端）。利用此过程，浏览器可使用正确的字符编码 (charset=utf-8) 来正常呈现传入页数据 (text/html)。第二个 XHTML (SVG) 示例中注释掉了meta 元素，因为 XML/XHML 文档中已忽略使用meta 元素指定字符编码，并且必须将其转换为 xml 声明。开发人员可在对 HTML 使用 meta 元素与对 XML/XHTML 使用xml 声明之间进行切换。
<title>: 通常，title 元素会在浏览器的选项卡中呈现其关联文本。
</head>: head 的结束元素。
<body>: body 元素是显示的 XHTML 文档的内容的容器。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="200px" height="200px">: svg 元素定义了 SVG 文档片断。xmlns 特性定义了 SVG 片断的命名空间。version 特性指示此文档片断遵循的 SVG 语言版本，width 和height 特性定义 SVG 视区的大小（此示例中为 200 x 200 像素方形）。
<rect x="0" y="0" width="100%" height="100%" fill="none" stroke="black"/>: SVG rect 元素会从视区的左上角或点 (0, 0) 处开始绘制一个具有最大宽度和高度的黑色矩形，该矩形与 SVG 视区相对。此定位勾勒了给定 SVG 视区的轮廓。
<circle cx="100" cy="100" r="50" style="stroke: black; fill: red;"/>: 类似地，SVG circle 元素会绘制一个带黑色边框的红色圆圈，其半径为 50 像素。该圆圈位于 200 x 200 像素的 SVG 视区的中心位置。
</svg>: svg 的结束元素。
</body>: body 的结束元素。
</html>: html 的结束元素。

SVG 的呈现方法

还可使用其他方法来呈现 SVG。下表总结了这些方法。

方法建议文件扩展名所需的浏览器优点和缺点内联 HTML5.html本地支持 HTML5 中内联 SVG 的浏览器，例如 Windows Internet Explorer 9。

优点：可充分利用 HTML5 构造。

缺点：可能需要为不支持 HTML5 中的内联 SVG 的浏览器实现回调代码。内联 XHTML.xhtml本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：许多浏览器当前都支持基于 XHTML 的内联 SVG。

缺点：无法利用 HTML5 构造。独立.svg本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：可使用“嵌入”方法轻松嵌入现有内容中。

缺点：无法利用所有 HTML/XHTML 构造。嵌入.xhtml本地支持 SVG 的浏览器，例如 Internet Explorer 9。

优点：通过使用嵌入，使得实现和回调行为变得相对简单。

缺点：为嵌入页中的 SVG 内容编写脚本可能会比较困难。另外，一些浏览器可能不支持所有形式的嵌入，例如，通过 img 元素或通过 CSSbackground-image 样式引用 SVG。插件.html可能本地支持、也可能不本地支持 SVG 的浏览器。

优点：浏览器无需本地支持 SVG。统一各个浏览器间的 SVG 行为。

优点：插件可能会导致浏览器不稳定，W3C SVG 规范可能会过时，和/或插件提供者不再为插件提供支持（如 Adobe SVG Viewer 插件的情况）。

注意 Windows Internet Explorer 8 不本地支持 SVG，从而需要插件来呈现 SVG。但通过实现适当的回调代码（如本主题稍后所述），你可能不需要 SVG 插件。

下一部分描述了上述五种方法的示例。

内联 HTML5

下面的示例演示了一个基本内联 HTML5 SVG 模板。此代码示例会在 SVG 标记中创建一个圆圈并注册单击事件。单击该圆圈时，其大小会发生更改。

<!DOCTYPE html><html><head>  <meta http-equiv="X-UA-Compatible" content="IE=9"/>  <script>    function doCircle(evt)     {      var theCircle = evt.target;      var radius = theCircle.getAttribute("r");      if (radius == 50)       {        radius = 75;      }      else       {        radius = 50;      }          theCircle.setAttribute("r",radius);    }  </script></head><body>  <svg width="300px" height="300px">    <text x="25" y="50" font-size="24">SVG Circle Element</text>    <text x="25" y="275">Click the circle to change its size.</text>    <circle cx="125" cy="150" r="50"             fill="pink" stroke="green" stroke-width="5"            onclick="doCircle(evt)" />  </svg></body></html>

<!DOCTYPE html> 元素告知浏览器这是一个 HTML5 文档。 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 元素用于将 Windows Internet Explorer 强制为 IE9 标准模式，以便能在 Intranet 网站上正确呈现。请注意，无法对 HTML5 应用html 元素的xmlns="http://www.w3.org/1999/xhtml" 特性。

提示如上表所建议，以 html 文件扩展名保存此示例。

注意对于 HTML5，SVG 内容默认情况下溢出，而在 XHTML 中它是隐藏的。

内联 XHTML

由于 SVG 基于 XML，因此可使用正确的命名空间向 XHTML 文档添加 SVG，如以下基本内联 XHTML 模板中所示。

<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>Manipulating the Radius of an SVG Circle</title>  <script language="javascript" type="text/javascript">  <![CDATA[      var red_circle;  // The object representing circle.  var r;       // The variable representing circle's radius.        window.onload = function() {      red_circle = document.getElementById('redCircle');      r = red_circle.getAttribute("r");    }        function grow() {      r = 2*r;      red_circle.setAttribute("r",r);    }        function shrink() {      r = r/2;      red_circle.setAttribute("r",r);    }  ]]>  </script></head><body>  <svg width="200px" height="200px" version="1.1"        xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink">    <circle id="redCircle" cx="100" cy="100" r="50"             style="stroke: black; fill: red;"             onmouseover="grow()" onmouseout="shrink()"/>    <rect x="0" y="0" width="100%" height="100%" style="fill: none; stroke: black;"/>  </svg></body></html>

此代码示例将创建一个 200 x 200 像素的视区，并绘制一个带黑色边框的红色圆圈，其半径为 50px。如果你将鼠标指针移至所呈现的圆圈上方，则圆圈的半径将增大一倍；如果你将鼠标指针从所呈现的圆圈上移开，则圆圈的当前半径将减少一半。矩形元素用于勾勒视区的边界。

提示所上表所建议，以 xhtml 文件扩展名保存此示例。

内联 XHTML 能正常工作，但需要 xhtml 文件扩展名和命名空间。在最近 HTML5 出现之前，内联 XHTML 是最佳选择。

独立 SVG

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"     xmlns:xlink="http://www.w3.org/1999/xlink"     onclick="doSomething(evt)">    <script language="javascript" type="text/javascript">  <![CDATA[    function doSomething(evt)     {      var myRect = evt.target;        if (myRect.id != "redRect")       {        alert("Please click on the rectangle");        document.location.reload();      }        var myWidth = myRect.getAttribute("width");            if (myWidth == 50)        myRect.setAttribute("width", 100);      else        myRect.setAttribute("width", 50);    }     ]]>  </script>  <!-- Outline the SVG viewport. -->  <rect x="0" y="0" width="100%" height="100%"         style="fill: none; stroke: black; stroke-width: 5px;" />     <rect id="redRect" x="100" y="100" width="50" height="50"         fill="red" stroke="blue" />    </svg>

此代码示例通过每个内部单击来交替实现对红色矩形的扩大和缩小。如果在红色矩形外部单击，则会出现警告并重新加载页面。

如前所述，模板的 xml 元素（第一行）中的 standalone="no" 特性指示，DOCTYPE 元素中指定的 DTD 将不只是用于验证。你无需指定standalone=”no”，因为当存在外部标记声明（此示例中为 DTD）时会假定此值。

提示如上表所建议，以 svg 扩展名保存此示例。

嵌入

可根据浏览器的不同，使用 iframe、embed、object 和 img 元素以及 CSS background-image 样式将 SVG 嵌入网页中。请注意，并非所有这些嵌入方法都可用于特定浏览器。下面的示例演示了基本 SVG 模板，该模板使用object 元素。

<?xml version="1.0"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Embedding SVG</title></head><body>  <h1>Embedding SVG in an XHTML Document</h1>  <p>Embedding the file <em>standAlone.svg</em> using the <strong>object</strong>      element:</p>  <object data="standAlone.svg" width="302px" height="302px" type="image/svg+xml">    <img src="standAlone.png" alt="PNG image of standAlone.svg" />  </object></body></html>

提示如上表所建议，以 xhtml 文件扩展名保存此示例。还需注意的是，嵌入 SVG 文件（此示例中为standAlone.svg）必须具有svg 文件扩展名。

假定 SVG 文件不是通过 img 元素嵌入的，也不是作为 CSS 背景嵌入的，嵌入 SVG 文件通常具有自己的编程方式，但除非嵌入 SVG 文件来自与嵌入页相同的域，否则嵌入不会提供用于在嵌入 SVG 文档和嵌入 HTML 文档之间进行可编程交互的简便方法。通常，在网页中对 SVG 进行编程时，建议不使用此方法，但此方法可用于轻松插入 SVG 文件，并对在早期浏览器（例如，本地不支持 SVG 的 Internet Explorer 8）中进行回调很有用。

注意由于某些浏览器无法支持所有形式的 SVG 嵌入，因此请务必在所有目标浏览器间进行测试。

插件

以下列表中列出了为何不建议使用插件解决方案的几个原因：

Adobe 不再支持主要 SVG 浏览器插件 Adobe SVG Viewer。
大多数现代浏览器都本地支持 SVG。
第三方插件可能会导致浏览器不稳定，或者插件提供者不再为其提供支持。

摘要

下表概括了本主题中查看的模板。

方法模板建议文件扩展名建议服务器 MIME 类型内联 HTML5

<!DOCTYPE html><html>    <head>    <meta http-equiv="X-UA-Compatible"          content="IE=9"/>    <style>    </style>    <script>    </script>  </head>    <body>  .  .  .    <svg width="120" height="90">      <!-- SVG markup here. -->    </svg>  .  .  .  </body></html>

.htmltext/html内联 XHTML

<?xml version="1.0"?><!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <script language="javascript" type="text/javascript">     <![CDATA[  ]]>  </script>  </head><body>...   <svg width="120px" height="90px" version="1.1"        xmlns="http://www.w3.org/2000/svg"       xmlns:xlink="http://www.w3.org/1999/xlink">    <!-- SVG markup here. -->  </svg>...</body></html>

.xhtmlapplication/xhtml+xml独立

XML

<?xml version="1.0"?><!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"     xmlns:xlink="http://www.w3.org/1999/xlink">       <!-- SVG markup here. -->      </svg>

.svgimage/svg+xml嵌入

<?xml version="1.0"?><!DOCTYPE html  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>  <title>Embedding SVG</title></head><body>  <h1>Embedding SVG in an XHTML Document</h1>  <p>Embedding the file <em>standAlone.svg</em>       using the <strong>object</strong> element:</p>  <object data="standAlone.svg" type="image/svg+xml"          width="302px" height="302px">    <!-- Implement fallback code here, or display a message: -->    <p>Your browser does not support SVG - please upgrade to a modern browser.</p>  </object></body></html>

.xhtml、.htmltext/html插件不推荐。.html不推荐。

注意 Microsoft Internet 信息服务 (IIS) 的默认配置不为使用 .svg 文件扩展名的文件提供服务。为了从 IIS 请求 .svg 网页，你必须将 .svg 的 "MIME 类型"映射添加到image/svg+xml。

对于本地支持 SVG 和 HTML5 的浏览器，最好选择内联 HTML5 方法。

对于不完全支持 HTML5 但本地支持 SVG 的浏览器，请使用内联 XHTML 或独立方法，其次是嵌入方法（如果适用）。

对于不本地支持 SVG 的浏览器，建议实现相应的回调措施（例如，呈现 SVG 图形的静态图像）。

使用 <meta http-equiv="X-UA-Compatible" content="IE=9"/> 为 HTML 应用程序 (HTA) 启用可缩放矢量图形 (SVG)。有关详细信息，请参阅HTML 应用程序 (HTA) 简介。

如何向网页添加 SVG

简介

SVG 的呈现方法

内联 HTML5

内联 XHTML

独立 SVG

嵌入

插件

摘要

相关主题