Friday, June 23, 2017

performance - Is SVG a viable technology choice for web-based game?



I have started to read up about the web technology available for doing web-based game with only Javascript, but I have no where got feedback about SVG with HTML5. Is is a viable choice ? Does it performs well compared to other technique like Canvas, DOM & CSS Transformation, etc.



Answer



SVG is supported in HTML5; whether the browser your player is using supports it is a different story.


Depending on your needs you should check out RaphaelJS. Raphael provides SVG-like support for IE by switching to VML when rendering for IE. Raphael provides a lot of functionality including animations and Cufon font support. It's definitely worth a look.



Since SVG is a part of the DOM it is pretty simple to attach DOM events like "click" and "hover" to the created SVG elements. This might make SVG more suitable for HUD-type displays rather than animating sprites, etc.


You probably have a lot of testing ahead of you to determine the relative performance characteristics of SVG versus canvas, however.


Straight DOM manipulation will probably be the worst of the bunch. As you change things in the DOM the browser's layout engine will recalculate the layout of the page to accomodate your changes which will probably kill your game's performance. If you have to go this route, prefer CSS (especially CSS3-specific features like transformations and keyframing).


No comments:

Post a Comment

Simple past, Present perfect Past perfect

Can you tell me which form of the following sentences is the correct one please? Imagine two friends discussing the gym... I was in a good s...