您会选择基于 SVG 的渲染器还是 HTML5？
我们正处于一个将用于广告领域的新项目的研究阶段。用户创建一堆将在屏幕上的不同区域播放的项目，然后可以交换动画（图像/文本等）。
我们正在推动 HTML5 解决方案，该解决方案将负责渲染，但新的建议是仅使用 SVG（和 SMIL）。
我知道您可以在 HTML5 页面中嵌入 SVG 内容，并且有许多链接可以比较画布和 SVG。
我需要知道的是，与仅基于 SVG 的解决方案相比，基于 HTML5 的解决方案有何优缺点？另外，对于该项目的长期计划，我认为 HTML5 可以实现更多功能。
另外，我不确定使用 SVG 的用户可以使用哪些工具支持。大多数项目必须是可模板化的（更改文本/图像），这可能吗？
TIA
JD
We are in the research phase of a new project which will be used in the advertising arena. Users create a bunch of items that will play in different regions on the screen and can then swap out animations (images/texts etc).
We are pushing for an HTML5 solution which will be responsible for the rendering but a new proposal is to just use SVG (and SMIL).
I know you can embed SVG content in HTML5 pages and there are numerous links comparing the canvas and SVG.
What I need to know is what are the pros and cons of going for a solution which is based on HTML5 compared with a solution that is based solely on SVG? Also for the long term plans of the project, I can see HTML5 as allowing so much more.
Also I am not sure what tooling support is available for users using SVG. Most of items must be templatable (changing text/images), is this at all possible?
TIA
JD
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我最近有机会尝试基于 SVG 的解决方案 Raphaël 和 Flot，一种基于画布的解决方案。两者都在不支持主要格式的浏览器上提供模拟：Raphaël 在 IE 上使用 VML，Flot 使用 excanvas 。
SVG 和canvas 都有优点和缺点。两者都可以绘制形状、路径和嵌入图像，但 canvas 可以进行像素级操作，并且可以快速绘制更多精灵，这就是它在 HTML5 游戏中变得流行的原因。 SVG 具有更强大的路径，尽管您必须学习语法。
SVG 还有另一个非常有趣的优点：图表上的元素是 DOM 节点，因此它可以使用浏览器鼠标和单击事件以及添加、删除或更改单个节点，而无需重新绘制整个图表。在画布上做同样的事情需要手动跟踪每个视觉元素的位置，并在物体移动时重新绘制整个画布。 （Canvas 确实允许您进行双缓冲和缓存，因此可以快速重绘它，但是跟踪所有内容的逻辑仍然取决于您。）
因此，我认为 SVG 是交互式图形的更好选择和图表，而画布更适合高级图形。无论哪种情况，跨平台兼容性都是一个问题，并且需要一个抽象层。
I've recently had an opportunity to try Raphaël, an SVG-based solution, and Flot, an canvas-based solution. Both provide emulation on browsers that don't support the primary format: Raphaël uses VML on IE, and Flot uses excanvas.
Both SVG and canvas have advantages and disadvantages. Both can draw shapes, paths, and embed images, but canvas can do pixel-level manipulation and can draw a lot more sprites quickly, which is why it's becoming popular for HTML5 games. SVG has more powerful paths, although you'll have to learn the syntax.
SVG has another really interesting advantage: elements on a chart are DOM nodes, so it can use browser mouse and click events as well as add, remove, or change an individual node without redrawing the whole chart. Doing the same thing on a canvas involves manually keeping track of the locations of every visual element and redrawing the whole canvas when stuff moves. (Canvas does let you do double buffering and caching stuff sop it is possible to redraw it quickly, but the logic of keeping track of where everything is is still on you.)
For that reason, I think SVG is a better choice for interactive graphs and charts, while canvas is more appropriate for advanced graphics. In either case, cross-platform compatibility is a concern and a abstraction layer is indicated.
SVG 可能比 HTML5
SVG is potentially more search-engine friendly and accessible than HTML5 <canvas>, in that SVG elements and text can be (potentially -- not sure if they actually do!) indexed and read out to a screenreader, user whilst <canvas> is initially just a bitmap and would need additional content to be created if one of these ads was to be presented as part of a web page. OTOH, if it's a game-like tool that's not for content creation then perhaps that's not an issue ... perhaps give more details?