Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

closed as off-topic by Anko, Seth Battin, Josh Petrie Apr 20 '15 at 15:26

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about "how to get started," "what to learn next," or "which technology to use" are discussion-oriented questions which involve answers that are either based on opinion, or which are all equally valid. Those kinds of questions are outside the scope of this site. Visit our help center for more information." – Anko, Seth Battin, Josh Petrie
If this question can be reworded to fit the rules in the help center, please edit the question.

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
Use Snap.svg, it's the successor of RaphaelJs from the same author, but without the messy support for ridiculously old browsers and Internet explorers VML. Cleaner, better, more modern and faster. – Mészáros Lajos May 26 '15 at 8:11

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

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