你会选择基于 SVG 的渲染器还是 HTML5？答案

【问题标题】：Would you go for SVG based renderer or HTML5?你会选择基于 SVG 的渲染器还是 HTML5？
【发布时间】：2011-08-12 12:04:19
【问题描述】：

我们正处于一个新项目的研究阶段，该项目将用于广告领域。用户创建一堆将在屏幕上不同区域播放的项目，然后可以交换动画（图像/文本等）。

我们正在推动一个负责渲染的 HTML5 解决方案，但一个新的提议是只使用 SVG（和 SMIL）。

我知道您可以在 HTML5 页面中嵌入 SVG 内容，并且有许多链接可以比较画布和 SVG。

我需要知道的是，与仅基于 SVG 的解决方案相比，基于 HTML5 的解决方案的优缺点是什么？此外，对于该项目的长期计划，我认为 HTML5 允许更多。

我也不确定为使用 SVG 的用户提供哪些工具支持。大多数项目必须是可模板化的（更改文本/图像），这可能吗？

TIA

京东

【问题讨论】：

您的问题不清楚，使用 HTML5，您可以使用 svg-tag 直接嵌入 SVG。你是说 SVG 还是 Canvas？
不，我知道我们可以在 HTML5 中嵌入 SVG。我们正在研究我们使用的渲染技术。我们要么选择 SVG 渲染器，要么选择 HTML5。
@JD：我想你很困惑：SVG 是矢量图形，而 HTML5 是 HTML 文档格式，它们没有太多共同点。但是 HTML5 有一个 Canvas 元素，您可以使用 JavaScript 来呈现图形。
我不是图形背景，所以很抱歉。我们必须决定的是创建一个广告工具（在屏幕上显示广告）。我的理解是带有 css3 的 HTML5 会给我们一个动画来展示广告。然后有人提到为什么不只是构建一个 SVG 渲染器，其唯一目的是展示广告。

标签： html svg

【解决方案1】：

我最近有机会尝试了基于 SVG 的解决方案 Raphaël 和基于画布的解决方案 Flot。两者都在不支持主要格式的浏览器上提供仿真：Raphaël 在 IE 上使用 VML，而 Flot 使用 excanvas。

SVG 和画布各有利弊。两者都可以绘制形状、路径和嵌入图像，但 canvas 可以进行像素级操作并且可以快速绘制更多的精灵，这就是它在 HTML5 游戏中变得流行的原因。 SVG 有更强大的路径，但您必须学习语法。

SVG 有另一个非常有趣的优势：图表上的元素是 DOM 节点，因此它可以使用浏览器鼠标和单击事件以及添加、删除或更改单个节点，而无需重绘整个图表。在画布上做同样的事情需要手动跟踪每个视觉元素的位置，并在物体移动时重新绘制整个画布。（Canvas 确实可以让你做双重缓冲和缓存东西，所以可以快速重绘它，但跟踪所有内容的逻辑仍然在你身上。）

因此，我认为 SVG 是交互式图形和图表的更好选择，而画布更适合高级图形。在任何一种情况下，跨平台兼容性都是一个问题，并指出了一个抽象层。

【讨论】：

谢谢。以图表为例，假设我在屏幕上同时有 5 个图表，并且每个图表都是动态驱动的（即需要大量 ajax 请求获取数据然后更新各种 dom 元素），这会影响渲染图表？

【解决方案2】：

SVG 可能比 HTML5

【讨论】：

Google 确实索引 SVG。