Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

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.

share|improve this question

4 Answers 4

up vote 6 down vote accepted

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

share|improve this answer
+1 for raphael, just started using it –  lhk Dec 29 '12 at 22:51

Take a look at this website to see SVG compatibility. Right now it's dodgy at best and I wouldn't recommend it for anything other than test demos for showcases.

Don't expect people to use the latest and greatest browser.

I think using SVG would be a huge mistake and will shy your users away when they see things broken.

share|improve this answer

You would be much better off using Canvas. Neither of them are supported in IE, and canvas is known to be a viable web-based game technology; plus it has decent rendering speed, especially in Chrome (and apparently also in IE9, according to the early demos; I haven't tried it recently). If you need to target older versions of IE and/or mobile platforms, stick to plain old DOM, which doesn't have very good performance but it's still acceptable for simple games (e.g. Pacman).

share|improve this answer

Short answer yes.

Long answer,

I still work in an environment totally dependent on IE6 and have used this wonderful library for charts. (which uses VML for IE6-IE8) I definitely love canvas and prefer it for writing games with js. So if you want to make a game in svg I say do it, other games have been created using it (see Raphael examples). Regardless you will still be using JS to do it, so if you want to transition to canvas, it wont be as painful.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.