Start networking and exchanging professional insights

Register now or log in to join your professional community.

Follow

Which is better for developing stock charts: HTML5 Canvas or SVG?

user-image
Question added by Faten Almajaly
Date Posted: 2015/07/06
Sandhya Binoy
by Sandhya Binoy , Software Professional , Karrox technologies

SVG is better.Canvas is immediate drawing mode API.

But SVG is the creature of DOM.Possible to use JavaScript events automatically.

Mohammad Arif
by Mohammad Arif , Principal Engineer UI , NatWest Group

SVG is an earlier standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.

SVG is an earlier standard for drawing shapes in browsers. However, SVG is at a fundamentally higher level because each drawn shape is remembered as an object in a scene graph or DOM, which is subsequently rendered to a bit map. This means that if attributes of an SVG object are changed, the browser can automatically re-render the scene.

 

SVG images are represented in XML, and complex scenes can be created and maintained with XML editing tools.

 

The SVG scene graph enables event handlers to be associated with objects, so a rectangle may respond to an onClick event. To get the same functionality with canvas, one must manually match the coordinates of the mouse click with the coordinates of the drawn rectangle to determine whether it was clicked.

Conceptually, canvas is a lower level protocol upon which SVG might be built. However, this is not (normally) the case—they are independent standards. The situation is complicated because there are scene graph libraries for Canvas, and SVG has some bit map manipulation functionality.

You should use Canvas for:

  • Interactive image editing: cropping, resizing, filters (think red eye removal, sepia, colorize, etc.)
  • Generating raster graphics: data visualizations, data plots, rendering fractals, function plots.
  • Image analysis: read pixels to gather data for histograms, color usage, and anything else you can imagine.
  • Rendering game graphics, such as sprites and backgrounds.

You should use SVG for:

  • Resolution-independent Web application user interfaces.
  • Highly interactive animated user interfaces.
  • Data charts and plots.
  • Vector image editing.

Ahmad Sabbah
by Ahmad Sabbah , Lead User Experience (UX) / User Interface (UI) Lead Designer , Dar Al Riyadh

I prefer SVG's and there is a lot of plugins like http://www.jchartfx.com/ & http://benpickles.github.io/peity/ but it is easier to use Canvas such as chartjs.org 

 

in this article they describe the difference in details https://msdn.microsoft.com/en-us/hh552482.aspx 

 

Good luck

Mostafa El-sabaa
by Mostafa El-sabaa , freelance UI Developer , FreeLancer

SVG is the most controllable 

More Questions Like This

Do you need help in adding the right keywords to your CV? Let our CV writing experts help you.