It is currently 13 Dec 2018, 07:12
   
Text Size

Simple example of svg card rendering

by Nate and Snacko

Moderators: Snacko, CCGHQ Admins

Simple example of svg card rendering

Postby Snacko » 12 Dec 2009, 15:21

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
Snacko
DEVELOPER
 
Posts: 826
Joined: 29 May 2008, 19:35
Has thanked: 4 times
Been thanked: 73 times

Re: Simple example of svg card rendering

Postby Huggybaby » 13 Dec 2009, 05:22

Very interesting...the type is very clear.
User avatar
Huggybaby
Administrator
 
Posts: 3077
Joined: 15 Jan 2006, 19:44
Location: Finally out of Atlanta
Has thanked: 574 times
Been thanked: 572 times

Re: Simple example of svg card rendering

Postby Snacko » 13 Dec 2009, 17:36

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/" />
Snacko
DEVELOPER
 
Posts: 826
Joined: 29 May 2008, 19:35
Has thanked: 4 times
Been thanked: 73 times

Re: Simple example of svg card rendering

Postby Incantus » 21 Feb 2010, 14:20

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.
Incantus
DEVELOPER
 
Posts: 267
Joined: 29 May 2008, 15:53
Has thanked: 0 time
Been thanked: 3 times

Re: Simple example of svg card rendering

Postby Snacko » 21 Feb 2010, 21:25

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.
Snacko
DEVELOPER
 
Posts: 826
Joined: 29 May 2008, 19:35
Has thanked: 4 times
Been thanked: 73 times

Re: Simple example of svg card rendering

Postby Nate » 05 Jul 2010, 12:30

I think TTF should be just as clear as SVG, no?
Nate
DEVELOPER
 
Posts: 29
Joined: 26 Aug 2008, 19:13
Has thanked: 0 time
Been thanked: 1 time

Re: Simple example of svg card rendering

Postby Snacko » 05 Jul 2010, 21:26

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.
Snacko
DEVELOPER
 
Posts: 826
Joined: 29 May 2008, 19:35
Has thanked: 4 times
Been thanked: 73 times

Re: Simple example of svg card rendering

Postby Incantus » 23 Sep 2010, 20:34

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.
Incantus
DEVELOPER
 
Posts: 267
Joined: 29 May 2008, 15:53
Has thanked: 0 time
Been thanked: 3 times


Return to HQ Card Generator

Who is online

Users browsing this forum: No registered users and 1 guest


Who is online

In total there is 1 user online :: 0 registered, 0 hidden and 1 guest (based on users active over the past 10 minutes)
Most users ever online was 279 on 11 Jul 2013, 22:03

Users browsing this forum: No registered users and 1 guest

Login Form