Page 1 of 1

Simple example of svg card rendering

PostPosted: 12 Dec 2009, 15:21
by 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

Re: Simple example of svg card rendering

PostPosted: 13 Dec 2009, 05:22
by Huggybaby
Very interesting...the type is very clear.

Re: Simple example of svg card rendering

PostPosted: 13 Dec 2009, 17:36
by 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/" />

Re: Simple example of svg card rendering

PostPosted: 21 Feb 2010, 14:20
by 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.

Re: Simple example of svg card rendering

PostPosted: 21 Feb 2010, 21:25
by 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.

Re: Simple example of svg card rendering

PostPosted: 05 Jul 2010, 12:30
by Nate
I think TTF should be just as clear as SVG, no?

Re: Simple example of svg card rendering

PostPosted: 05 Jul 2010, 21:26
by 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.

Re: Simple example of svg card rendering

PostPosted: 23 Sep 2010, 20:34
by 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.