Simple example of svg card rendering

[Snacko]

Lately I've been fooling around in C/C++ with the gtk+ rendering framework ie. cairo for image rendering and pango for font rendering. This allows for example to render the cards via SVG. Text and set symbol are SVG shapes, this only leaves the background texture and artwork as rasters.
I'm not sure if I'll finish this or when.
Here's an early example http://www.mediafire.com/?dfdmhizetzy

[Huggybaby]

Very interesting...the type is very clear.

[Snacko]

That's because the glyphs are vectors and aren't antialiased (which blends the sharp text edges with background).
You could also drop a html file like this which shows the text is being vector scaled and redrawn at different sizes.

<style type="text/css"><!--
body { background: green; }
--></style>
<embed src="tmp.svg" width="736" height="1050"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<embed src="tmp.svg" width="368" height="525"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<embed src="tmp.svg" width="184" height="263"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />

[Incantus]

Hey Snacko,

Could you upload the svg file again, or any other sample cards you've made with SVG? Mediafire seems to have lost it. Also, would you be willing to share your code for vector rendering of cards? I've been thinking of moving that way for Incantus, and being able to jumpstart the layout algorithm would be awesome! Thanks.

[Snacko]

This is completely work in progress as I haven't touched it since but I would want to finish it.
It doesn't yet do any font scaling to fit target space.
You can check http://www.mediafire.com/file/dh2irjjrf ... le-svg.zip

I also don't see much point in SVG other than being cool vector image that you can scale up, but what's the point when you only need not so big image and scaling it down is pretty fast while preserves quality with Lanczos filter.

The good thing about cairo is that you can easily switch backends, so the same code can render svg, gl quads, pdf, gdi under windows and much more. The downside is that ARGB textures and font rendering under windows don't mix. You get some hideous results with garbled text.

I could upload the C++ code under LGPL, but I'm not sure it's much of use at the current state.

[Nate]

I think TTF should be just as clear as SVG, no?

[Snacko]

Yes as long as you generate at native size. The only advantage of svg is that you can generate one vector image and use it at any size, while for scalar graphics you always need to render at your target size to not lose any quality.

[Incantus]

I built a simple interactive javascript card generator using raphaeljs (which uses SVG for those browsers that support it - ie not IE). You can play around with it at http://incant.us/creator.