您更喜欢哪一个？用于图形和图像的 SVG、HTML5 或 regen'd-PNG图表？
我正在开发一个新网站，以图表形式显示一些运营指标。因此，网站上将显示大约十几个图表/图形。我希望能够让它们根据浏览器的大小动态缩小（在合理范围内）。
我正在讨论将这些选项生成为以下选项之一的利弊：
- SVG。非常适合缩放，但可能支持有限，
- HTML5。对于未来和 FF 客户来说，IE 显然是一个不错的选择？
- PNG。这会 要求我重新生成 PNG 基于 DIV &c 的大小。
哪个是更好的选择？我倾向于 PNG 只是为了无处不在的支持，但希望有客户端缩放。鉴于浏览器中 SVG 和 HTML5 画布支持的现状，最佳解决方案是什么？
I'm developing a new site that graphs some operational metrics. As such about a dozen charts/graphs will be displayed on the site. I want to be able to have them dynamically scale down (within reason) based upon the size of the browser.
I'm debating the pros/cons of generating these as one of these options:
- SVG. Great for scaling but may have limited support,
- HTML5. Clearly a great choice for the future and for FF customers, IE?
- PNG. This would
require that I regenerate the PNG
based upon the size of the DIV &c.
Which is the preferable option? I'm leaning towards PNG just for ubiquitous support, but would like to have client-side scaling. What is the best solution given the state of affairs of SVG and HTML5 canvas support in browsers?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（7）
对于图表，我更喜欢 SVG 而不是 HTML5 canvas 或 PNG。 Canvas 和 PNG 在 Firefox 中缩放为位图。 （Canvas 提供矢量 API，但它是一个可绘制的位图表面，而不是矢量存储。）SVG 在 Firefox 中缩放为矢量图形。
我经常在缩放视图的情况下跑步，所以我很欣赏真正的矢量缩放。
（画布对于无法处理保留模式图形性能的游戏来说很有意义。）
I prefer SVG over HTML5 canvas or PNG for charts. Canvas and PNG zoom as bitmaps in Firefox. (Canvas provides a vector API, but it's a drawable bitmaps surface--not a vector store.) SVG zooms as vector graphics in Firefox.
I ofter run with the view zoomed, so I appreciate real vector zooming.
(Canvas makes sense for games that can't handle the perf hit of retained mode graphics.)
您可能会做比探索新的图表库更糟糕的事情：
http://g.raphaeljs.com/
一开始你不会相信。
You could do worse than explore a new charting library:
http://g.raphaeljs.com/
You won't believe it at first.
现在您可以在任何地方使用 SVG
Now you can use SVG anywhere
所有现代浏览器都支持 SVG。
所有现代浏览器都支持 Canvas。
Internet Explorer 两者都不支持。
Raphaël (raphaeljs.com) 中存在 SVG 的部分 API，以及 IE 的后备机制
IE 的部分 Canvas 实现存在于 ExCanvas
我想说这不是一个问题“Canvas 或 SVG”，但是存在哪些高级库最能满足您的需求。
SVG is supported by all modern browsers.
Canvas is supported by all modern browser.
Internet Explorer supports neither.
A partial API for SVG, with fallback mechanism for IE exists in Raphaël (raphaeljs.com)
A partial Canvas-implementation for IE exists in ExCanvas
I'd say say its not a question of "Canvas or SVG", but what high-level library exists that best covers your needs.
最好的选择是 SVG 或 HTML5，如果其他选项不可用，则可以使用 PNG。
The best option would be SVG or HTML5 that will fall back on PNG if the others aren't available.
ExplorerCanvas 为 IE 带来了
支持。所以，这将是 1 和 1 的合并。 2. 好处是 (a) 随着越来越多的浏览器添加对的支持，您将自动获得已经支持它的好处，并且 (b) 您将随浏览器大小进行缩放。ExplorerCanvas brings
<canvas>support to IE. So, it would be an amalgamation of 1 & 2. The benefit would be that (a) as more browsers add support for<canvas>, you would automatically get the benefits of already supporting it and (b) you would get scaling with browser size.您可以使用带有 png 后备的 SVG，只需使用 CSS，如本答案所述： https://stackoverflow.com/a/13575068 /418711
You can use SVG with a png fallback just using CSS as it is described in this answer: https://stackoverflow.com/a/13575068/418711