Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 10 years ago.

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?

Answer 1

You could do worse than explore a new charting library: http://g.raphaeljs.com/

You won t believe it at first.

Answer 2

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.)

Answer 3

Now you can use SVG anywhere

Answer 4

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.

Answer 5

The best option would be SVG or HTML5 that will fall back on PNG if the others aren t available.

Answer 6

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.

Answer 7

You can use SVG with a png fallback just using CSS as it is described in this answer: https://stackoverflow.com/a/13575068/418711

友情链接