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.

Suppose I have a bunch of 2D art in some vectorized format such as SVG. Is there an easy-ish way to render that directly without having to implement a full SVG renderer myself?

Of course I could rasterize it off-line (e.g. in the content pipeline) for different resolutions/zoom levels, but I would like to maintain the crisp visuals at continuous zoom levels that vector graphics offer.

share|improve this question
add comment

1 Answer

up vote 21 down vote accepted

A good question. I was experimenting with this at one point - I couldn't find a easy, pre-built solution. But let me point you to some of the resources I found when attempting to implement it myself:


First of all there's an article from GPU Gems 3: Rendering Vector Art on the GPU (and the associated Loop-Blinn paper).

The hardest part is that, while drawing quadratic curves are easy, cubic curves (like those found in your typical SVG) are considerably harder. The article goes into detail on this, but you'll need to bring your maths hat.

The alternative to rendering cubic curves is to convert the cubic curves to quadratic ones. Also a non-trivial problem.

Once you can render vector curves on the GPU, it's a simple matter of parsing the SVG in your content pipeline and turning it into a mesh that you can render. Parsing SVG is easy, by the way.

Another, potentially easier alternative is to forego curves all together and simply triangulate a linear approximation of your SVG.

Both these solutions require triangulation - here's a reasonable triangulator suited to XNA.


As a completely different alternative, you can use a "distance field" to render sprites with nearly-vector-like sharp edges.

Here is a paper from Valve from SIGGRAPH 2007 on how to do this: Improved Alpha-Tested Magnification for Vector Textures and Special Effects (PDF)

The basic method here is very easy to implement. The difficulty comes when trying to make it support sharp corners (something only touched on in the paper). This method also has some pretty severe limitations for anything but drawing simple shapes. It's best suited to UI text and decals (like Valve is using it for).


Now that I've said all that - I have to say that, in my experience, all the effort here is not worth it!

Unless your gameplay is going to be based primarily around extreme vector zooming effects like the very cool Masagin demo, you can get away with pre-rendering your SVG and simply using bitmap techniques (easier, better supported, etc).

(One of the first techniques that comes to mind is mipmapping (wiki) high-resolution versions of your sprites, to give you resolution independence up until your maximum sprite size.)

This blog post is probably a good place to get started adding SVG rendering support to your XNA content pipeline.

share|improve this answer
    
Excellent answer, thank you! That is way more than enough rope to hang myself with. In the end, I will probably take your advice to go the bitmap route. In the meantime, I've got some reading to do! :P –  drxzcl Aug 5 '10 at 8:06
    
Is this answer still accurate? –  lochok Jun 21 '12 at 14:16
    
@lochok Yes. There's nothing in my answer that will suddenly stop working. It's possible that a better way of doing vectors might be developed in the future - but, at time of writing, I haven't heard of anything new. –  Andrew Russell Jun 22 '12 at 12:35
    
I moreso meant there being no existing solution –  lochok Jun 23 '12 at 8:46
add comment

Your Answer

 
discard

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.