Menu
I was wondering whether it's better to make an animation like this in canvas or svg (performance wise)? I'm rewriting it now in jquery but I read somewhere that a canvas is redrawn every time it changes.
353
SVG provides better performance with a larger surface or a smaller number of objects. Canvas provides better performance with a smaller surface or a large number of objects. The SVG syntax is easy to understand, but it is impossible to read the graphics object. Canvas syntax is very simple and easy to read.
Differences Between SVG and CanvasSVG is a language for describing 2D graphics in XML. Canvas draws 2D graphics, on the fly (with a JavaScript). SVG is XML based, which means that every element is available within the SVG DOM. You can attach JavaScript event handlers for an element.
You can create animations with HTML5 by combining HTML, CSS, and JavaScript (JS), with which you can build shapes. Also, you can control animations and edit images, video, and audio by means of JS or CSS elements, all of which you then add to a drawing board, which you set up with the <canvas> element.
For these "simple" animations and scene graphs it doesn't really matter if you use SVG or Canvas performance wise. Both should work fine without performance issues.
However it might be easier to create animation with SVG compared to Canvas. In Canvas you have to redraw the whole scene and in SVG you could just create the ring once and then define a transformation (rotation) on it.
For SVG check out d3.js or raphael and for canvas you can check out processingjs, fabric.js, kinetic.js or paper.js
82
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
