SVG 与 Canvas：如何选择_H5之家 - 中国HTML5教程资源分享第一站

本主题一开始将对 SVG 与 Canvas 进行简要比较，接下来会讨论大量的比较代码示例，如光线跟踪和绿屏。

注意为了查看本主题中包含的很多示例，你必须使用支持SVG和Canvas元素的浏览器（如 Windows Internet Explorer9）。

简介

HTML 不断演变以提供更好、更丰富的标准图形来帮助改进客户体验。为 Web 开发人员创造了使用基于标准的 Web 技术创建图形丰富的交互网站和应用程序的机会，而无需使用专用的技术或编写浏览器特定的代码。以下各节介绍了矢量图形的概念并执行相应操作：

矢量图形

矢量图形不是新概念。它们是全部基于矢量来表示图像的几何基元（形状、点、线条和多边形）。在 1960 年代后期，向 Logo 编程语言添加了矢量图形语言（海龟绘图）来支持用于执行绘图功能的海龟机器人。虽然图形世界在复杂性方面已经发生了重大的演变，但是存在的基本概念是相同的。

矢量图形的复杂性范围从简单到适中再到相当复杂。下面是一些基本示例。

尽管前面的示例在性质上是静态的，但是矢量图形也支持交互性，这是一项可显著扩展方案的关键功能。矢量图形为 Web、桌面和设备上的应用程序提供交互和静态的格式。

矢量图形方案的简要概述在当今 Web 上在办公室中在设备上专业设计器和使用工具

专业的 Web 设计人员在如下工具集中查看矢量图形：

请务必注意，矢量图形已经在桌面、设备和 Web 上存在很长时间了。

HTML5 图形技术

借助 HTML5，开发人员或设计人员现在可以使用基于标准的技术来创建的体验。这样可消除对插件的安装（50% 的网站放弃访问均与插件的安装相关），从而可以极大地改善用户体验。目前，图形由浏览器原生提供，而对于 Internet Explorer9，则利用 Microsoft Windows 和硬件加速图形的功能。

下一节概述了两种全新但不同的技术、这两种技术的使用方法以及各自的优势和限制。使用一个矢量图形方案谱表来讨论用于为每个方案选择最佳技术的方法。

下图显示了存在于矢量图形中的一个常规方案谱表。每一个方案都可能会更接近于 canvas 或 svg，这意味着一种技术相对于其他技术更适合该方案。如果方案位于谱表中间，那么选择任一技术都是可行的

几乎所有矢量图形都可以使用上述任一种技术来绘制，但有时根据任务的不同，会有非常多的工作要由开发人员或计算机完成。当我们检查每种技术的用例，然后将其应用于常见方案时，我们会进一步了解此谱表。

技术简介

下一节介绍了用于在 HTML5 中创建矢量图形的技术，从而建立对早期存在的方案的讨论。

使用示例

若要使用以下示例，请将以下代码示例用作模板。可以使用此模板来开发 SVG 而非 HTML。此模板在本主题的每个示例中使用。由于格式原因，你可以使用脚本以及样式。此模板还包含一个 Meta 标记，这使得可以在本地文件共享上更轻松地进行 SVG 开发。这些示例使用下面的格式。首先提供有意义的代码，然后链接到完整代码。

HTML

<!DOCTYPE html >

（单击“查看源文件”即可查看此标记）。

SVG

SVG 用于描述可缩放矢量图形，这是一个保留在内存中模型中的保留模式图形模型，而内存中模型可通过重新呈现的代码结果进行操作。这不同于即时模式，该模式将稍后讨论。在 HTML5 中同时提供这两种模式。

SVG 是一个保留模式模型，作为对独立供应商（Microsoft 和 Adobe）所提出的两个建议的回应，在 1999 年引入。成立了 W3C SVG 工作组，并且在 2001 年 SVG 规范达到了“建议的状态”。目前，我们按照SVG 1.1 第 2 版工作，该版本在编写本文时处于“最后征求意见”阶段。

尽管 SVG 可以作为独立文件进行提供，但是最初着重于将它与 HTML 自然集成。

类似于 HTML，SVG 也是使用元素、属性、和样式来构建文档。首次将 <svg> 元素引入到文档中时，该元素的行为非常类似于 <div> 且作为 HTMLDocument 的一部分，但它包含附加接口 SVGDocument（SVGDocument 提供与矢量图形的更深入、更丰富的交互）。

元素

尽管外部

<svg>

包装适合于 HTML 框模型，但是大多数情况下，内部模型都会从该包装中分离出来，因为矢量不局限于简单的框。这种分离要求扩展 SVG 中的属性才能提供丰富的图形。

例如：

HTML

注意为了呈现此内容以及以下很多示例，你必须使用支持SVG和Canvas元素的浏览器（如 Internet Explorer9）。

之前的 HTML 代码将创建一个正方形，长宽均为 100 像素，并使用蓝色背景进行填充。

SVG 蓝色正方形

此

<rect>

元素保留在 HTML 文档的文档对象模型 (DOM) 中。就像其他 HTML 元素一样，可通过多种不同的方式设置 SVG 的样式。下面的示例是一个表。

样式设置

开发人员可能会注意到属性是类似的。SVG 同时具有属性和演示属性。此处看起来描述有点随意，但关键在于可以按照 CSS 样式规则设置演示属性的样式。

四个矩形使用几种不同的方法进行填充。

HTML

第一个示例演示省去一个属性会在图形上产生可视效果。在此示例中，颜色默认为黑色。

第二个示例演示使用

class="greenrect"

来填充矩形。包含的用于填充此矩形的 CSS 的形式为：

CSS

rect.greenrect {fill:green;}

第三个示例使用内联样式将填充设置为粉色。最后一个示例使用相应属性填充红色。此示例还演示了 CSS 选择器的用法。样式还包括：

CSS

rect:hover {fill:yellow;}

这针对所有矩形建立一个规则，即鼠标悬停在这些矩形之上时颜色更改为黄色。

这些对于有经验的 Web 开发人员来说应该都不是新内容了。此处提供这些示例是为了强调相似性（使用样式、样式表、类和选择器）以及差异（样式不适用于所有属性，仅适用于演示属性、新属性或不一致的属性）。

可编程性

属性 API 及其他 DOM 操作仍应用并遵循当前的属性规则。例外情况是，演示应用程序基于样式所取代的属性（如果适用）。

如果这些属性是通过核心属性或通过其各自的 DOM 方法进行设置的，则将影响这些属性的演示，并且基础 DOM 将相应地发生更改（注意使用 SVG DOM 设置高度的不同语法）：

HTML