Are SVG and CSS3 special for HUD than sprites?

Discuss game development design and post your game ideas

Post » Fri Nov 09, 2012 12:43 am

I've researching on videogame development sites, i found an useful info why would use svg and css as vectors for HTML5 games.

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

What do you think?
Posts: 3,106
Reputation: 27,643

Post » Mon Nov 12, 2012 1:04 pm

The problem with SVG is it's support inside the <canvas> tag.
On FF, you can draw a svg inside a canvas, and retrieve it as a raster image, via toDataURL().
Chrome (and WebKit in general) has a browser-wide bug : when you draw a SVG on a canvas, the canvas is set as 'tainted', and you can't retrieve the raster image.

Since everything in C2 is based on canvas, you need to work with it. That's why my SVG plugin is on hold, I'm waiting for an update on the WebKit side...
Posts: 709
Reputation: 6,704

Return to Game Development, Design & Ideas

Who is online

Users browsing this forum: No registered users and 1 guest