Best approach to Rendering Vector Graphics with SDL?

SDL Development
1

This question stems from my investigation into supporting my application on various screen resolutions. I recently discovered Vector graphics. Now, this is all really new to me, so incase I am missing anything I wanted to approach the Forum.

Random Rant #1–
Yeah Google is my best friend. ACtually that’s probably true. So how about some semi-physical remote communication with other real people and their real opinions

The Questions

  1. What is so great about vector art?
    • well I suppose I have this one answered. It’s basically a way of expressing graphics so that it can display at any resolution without loss of quality. Google for high-tech answer
  1. How come I can’t find anything on Displaying Vector Art with SDL??
    • Something as useful as this sounds to be begging for association with SDL… I mean ya I found some screwy libSVG library from 2008 or so… but something so outdated I will prefer to stay away from. I am hoping for better answers/advice.

My Circumstance

I am looking to support various devices such as PC, tablet, cell phone. Now the vector graphics looks like a great answer. From here I wonder what is the best move? I don’t know much about vector graphic file formats. The benefits behind each one, or why cell phones are using a different SVG format, i think it’s called tiny SVG?? (not sure, time is short)

SVG library vs. Rasterization

this all depends on if SDL + Vector Graphics is a nice relationship. Because if not, the other resolution I see is to use some kind of Rasterizer, to at some point use the user’s Screen resolution to rasterize SVG (or whatever vector format file extension) into png files. So it just boils down to whether I can render SVG directly inside/with my SDL code, using a library or whatever (portability is of course super necessary, as far as PC(win,mac,linux)/android/iOS). If I cannot find a way to directly do SVG renderings, then I figure I could rasterize to PNG somehow and then load the PNG’s like my app already does.

This is still rough in the dome. So I am really looking for answers. Can anyone help me out? Once again, I’m just trying to open up this treasure chest of universal screen support

2

First obvious answer: OpenGL (or in the case of phones, OpenGL ES).
Then you can render pretty much any primitive you want with it.

Also there was a function proposed for the SDL renderers which lets
you draw arbitrary polygons (there are already some for some basic
primitives, as well as scaling bitmaps), I don’t think it’s in SDL yet
though.

Note that ultimately you’d be drawing the primitives on your own,
there isn’t e.g. a SDL_DrawSVG function or something like that. But
it’s something, I suppose.

2013/3/13, bazz :> This question stems from my investigation into supporting my application on

various screen resolutions. I recently discovered Vector graphics. Now, this
is all really new to me, so incase I am missing anything I wanted to
approach the Forum.

Random Rant #1

Yeah Google is my best friend. ACtually that’s probably true. So how about
some semi-physical remote communication with other real people and their
real opinions

The Questions

  1. What is so great about vector art?
    • well I suppose I have this one answered. It’s basically a way of
      expressing graphics so that it can display at any resolution without loss of
      quality. Google for high-tech answer
  1. How come I can’t find anything on Displaying Vector Art with SDL??
    • Something as useful as this sounds to be begging for association with
      SDL… I mean ya I found some screwy libSVG library from 2008 or so… but
      something so outdated I will prefer to stay away from. I am hoping for
      better answers/advice.

My Circumstance

I am looking to support various devices such as PC, tablet, cell phone. Now
the vector graphics looks like a great answer. From here I wonder what is
the best move? I don’t know much about vector graphic file formats. The
benefits behind each one, or why cell phones are using a different SVG
format, i think it’s called tiny SVG?? (not sure, time is short)

SVG library vs. Rasterization

this all depends on if SDL + Vector Graphics is a nice relationship. Because
if not, the other resolution I see is to use some kind of Rasterizer, to at
some point use the user’s Screen resolution to rasterize SVG (or whatever
vector format file extension) into png files. So it just boils down to
whether I can render SVG directly inside/with my SDL code, using a library
or whatever (portability is of course super necessary, as far as
PC(win,mac,linux)/android/iOS). If I cannot find a way to directly do SVG
renderings, then I figure I could rasterize to PNG somehow and then load the
PNG’s like my app already does.

This is still rough in the dome. So I am really looking for answers. Can
anyone help me out? Once again, I’m just trying to open up this treasure
chest of universal screen support

3

Depends what you want to use it for. In SDL, where you’re managing all
the rendering yourself and not piggybacking off a UI library, 99.9% of
the time you’d want to pre-rasterise your vector assets (i.e. load
them in as PNGs) because it’s so much freaking easier and cheaper.

Otherwise, you’d have to include a separate stack for parsing the XML,
decoding the SVG data, rasterising on-the-fly, and keeping the screen
updates acceptable enough so that your test hardware doesn’t catch
fire from all the extra work. Even if you wanted to do this using
librsvg/cairo/libxml2, and didn’t mind taking several kilograms of
hallucinogens to understand and write working GObject code, the LGPL
prohibits static linking and you’d be locked out of iOS.

So yeah, save your assets as bitmap. Need more resolution? Save them
at a bigger size. New screen technology comes along? Save them even
huger still.

If you still really think you need SVG rendering, you might want to
wait for Digia to finish scrubbing up Qt 5 for iOS and Android;
they’ve thrown a lot of work at their QML stack to crank out
accelerated vector graphics.On 13 March 2013 13:05, bazz wrote:

This question stems from my investigation into supporting my application on
various screen resolutions. I recently discovered Vector graphics. Now, this
is all really new to me, so incase I am missing anything I wanted to
approach the Forum.

Random Rant #1

Yeah Google is my best friend. ACtually that’s probably true. So how about
some semi-physical remote communication with other real people and their
real opinions

The Questions

  1. What is so great about vector art?
    • well I suppose I have this one answered. It’s basically a way of
      expressing graphics so that it can display at any resolution without loss of
      quality. Google for high-tech answer
  1. How come I can’t find anything on Displaying Vector Art with SDL??
    • Something as useful as this sounds to be begging for association with
      SDL… I mean ya I found some screwy libSVG library from 2008 or so… but
      something so outdated I will prefer to stay away from. I am hoping for
      better answers/advice.

My Circumstance

I am looking to support various devices such as PC, tablet, cell phone. Now
the vector graphics looks like a great answer. From here I wonder what is
the best move? I don’t know much about vector graphic file formats. The
benefits behind each one, or why cell phones are using a different SVG
format, i think it’s called tiny SVG?? (not sure, time is short)

SVG library vs. Rasterization

this all depends on if SDL + Vector Graphics is a nice relationship. Because
if not, the other resolution I see is to use some kind of Rasterizer, to at
some point use the user’s Screen resolution to rasterize SVG (or whatever
vector format file extension) into png files. So it just boils down to
whether I can render SVG directly inside/with my SDL code, using a library
or whatever (portability is of course super necessary, as far as
PC(win,mac,linux)/android/iOS). If I cannot find a way to directly do SVG
renderings, then I figure I could rasterize to PNG somehow and then load the
PNG’s like my app already does.

This is still rough in the dome. So I am really looking for answers. Can
anyone help me out? Once again, I’m just trying to open up this treasure
chest of universal screen support

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

4

bazz wrote:

  1. What is so great about vector art?

Supposedly faster more efficient downloads for browsers (if you’re
displaying via the web). However, not all browsers support it. As to
vector formats, IE used VML for a long time. It’s finally switching
to the W3C standard. W3C promotes SVG. Xfig format has been around
for a long time (longer than SVG) and is mainly used by applications
on a system. Haven’t seen much if any web use of Xfig format.

  1. How come I can’t find anything on Displaying Vector Art with SDL??
    • Something as useful as this sounds to be begging for association with SDL… I mean ya I
      found some screwy libSVG library from 2008 or so… but something so outdated I will prefer to
      stay away from. I am hoping for better answers/advice.

I thought the SDL_svg library ( http://www.linuxmotors.com/SDL_svg/ )
looked promising. I’m not particular about whether something’s
currently supported or not. Most Open Source programs I’ve run across
use libRSVG. (Here’s a note about it with Tux Paint:
SDL :: View topic - SDL + SVG)
I wasn’t particularly thrilled with this approach because it brings
in a lot of dependencies which I’m not otherwise using on my system.
You could look into xfig/winfig, transfig, netpbm options and store
graphics in vector format for space concerns, but convert to bitmap
before drawing.

One other link I thought was interesting:
http://code.google.com/p/svg-edit/
It’s a SVG editor in a browser.

Speaking of browsers, netsurf is a lightweight browser that supports,
among other things, SDL display. You may want to check out how
they’re adding SVG support to their browser:
http://www.netsurf-browser.org/projects/libsvgtiny/
It’s an active project if that’s what you’re looking for.

I don’t know much about vector graphic file formats. The benefits behind each one, or why cell phones are using a different SVG format, i think it’s called tiny SVG?? (not sure, time is short)

Phones are using a subset of SVG (partly for speed and partly for
compatibility). It’s basically the same format, just not all the
features.

This is still rough in the dome. So I am really looking for answers. Can anyone help me out? >Once again, I’m just trying to open up this treasure chest of universal screen support

Hopefully, I’ve given you a few ideas. Would be interested to hear if
you turn up any other useful resources for vector graphics.

Sincerely,
Laura

5

It’s important to note that you shouldn’t expect “vector graphics” to be a
magical solution and that it means different things depending on the
context.

First off, no matter what you do, vector graphics must be rasterized at
some point (unless you use a specialized display). For the best
performance, you want this rasterization to happen on the GPU. There isn’t
really a widely accepted solution for rendering vector graphics on the GPU.
Hopefully OpenVG will get wider adoption so we can depend on it. Some
hardware vendors are trying, but it’s far from common. Cairo is a software
solution (also has an OpenGL backend which might be worth looking at).

Next, when someone says “vector graphics”, they might actually mean “vector
art”. Vector art is used in a lot of games (Aquaria is one of my favorite
examples), almost never with an actual runtime vector graphics rendering
pipeline. You can create a nice-looking graphic in Inkscape (which I
highly recommend), save it to a high-res png, then use it in your game. As
long as you’re using a hardware-accelerated backend (like OpenGL), it’s
going to perform much better than parsing an SVG file and going through all
of the rasterization steps at runtime and you an do all the rotation and
scaling you want. Also, vector graphics usually look simpler than raster
graphics for good reason. If you want complex details in your visuals,
then it will probably not work well (computationally, or your time effort
to put those details in). It’s good for a few specific art styles and
techniques.

Lastly, the actual work you have to do for achieving resolution
independence with raster graphics vs. vector graphics is about the same.
You have to define the drawing region and calculate the scaling (and
possibly positioning) and everything either way. The real differences are
that you’re going to save memory using vector graphics (usually only
important for low-resolution mobile devices, but remember that the
computational cost is higher) and you’ll get better quality at high
resolution for the same low memory cost. Depending on your art tools, you
can usually export appropriately-sized raster images for the display
resolutions that you are targeting and be just fine.

In my opinion, it’s best not to spend your time trying to work out how to
use vector graphics at runtime unless the lower memory needs of vector
formats is important (as it is for browsers since download speeds are a
bottleneck). Wait until the hardware support has improved before going
down that path. Do definitely use Inkscape to create vector art assets and
use them in your hardware-accelerated games.

Jonny DOn Wed, Mar 13, 2013 at 7:21 AM, LM wrote:

bazz wrote:

  1. What is so great about vector art?

Supposedly faster more efficient downloads for browsers (if you’re
displaying via the web). However, not all browsers support it. As to
vector formats, IE used VML for a long time. It’s finally switching
to the W3C standard. W3C promotes SVG. Xfig format has been around
for a long time (longer than SVG) and is mainly used by applications
on a system. Haven’t seen much if any web use of Xfig format.

  1. How come I can’t find anything on Displaying Vector Art with SDL??
    • Something as useful as this sounds to be begging for association with
      SDL… I mean ya I
      found some screwy libSVG library from 2008 or so… but something so
      outdated I will prefer to
      stay away from. I am hoping for better answers/advice.

I thought the SDL_svg library ( http://www.linuxmotors.com/SDL_svg/ )
looked promising. I’m not particular about whether something’s
currently supported or not. Most Open Source programs I’ve run across
use libRSVG. (Here’s a note about it with Tux Paint:

SDL :: View topic - SDL + SVG
)
I wasn’t particularly thrilled with this approach because it brings
in a lot of dependencies which I’m not otherwise using on my system.
You could look into xfig/winfig, transfig, netpbm options and store
graphics in vector format for space concerns, but convert to bitmap
before drawing.

One other link I thought was interesting:
Google Code Archive - Long-term storage for Google Code Project Hosting.
It’s a SVG editor in a browser.

Speaking of browsers, netsurf is a lightweight browser that supports,
among other things, SDL display. You may want to check out how
they’re adding SVG support to their browser:
Libsvgtiny | SVG Tiny Library
It’s an active project if that’s what you’re looking for.

I don’t know much about vector graphic file formats. The benefits behind
each one, or why cell phones are using a different SVG format, i think it’s
called tiny SVG?? (not sure, time is short)

Phones are using a subset of SVG (partly for speed and partly for
compatibility). It’s basically the same format, just not all the
features.

This is still rough in the dome. So I am really looking for answers. Can
anyone help me out? >Once again, I’m just trying to open up this treasure
chest of universal screen support

Hopefully, I’ve given you a few ideas. Would be interested to hear if
you turn up any other useful resources for vector graphics.

Sincerely,
Laura
Laura Michaels' Pages - Programming

SDL mailing list
SDL at lists.libsdl.org
http://lists.libsdl.org/listinfo.cgi/sdl-libsdl.org

6

I know that this is an old post, but a recent project idea has had me thinking about this too, so

The answer depends on what your vector graphics are made of, and why you’re interested in using a vector graphics format in the first place.

If you just like the resolution independence of vector graphics, just predraw them into an SDL_Surface at the earliest point that the resolution is known. For example if you just want the graphic to look the same between devices, you can find the resolution of the device display immediately after initializing SDL and draw the graphic into an SDL_Surface when you first load it.

If your graphics are going to be scaled frequently and you want to avoid blurring effects at high scales and loss of detail at low scales (from bilinear filtering), create and manage your own mipmaps (repeatedly draw into surfaces starting from the largest scale to the smallest) - unfortunately SDL doesn’t support trilinear filtering AFAIK but nearest mipmap interpolation should work reasonably well.

(As was stated earlier, rasterizing vector graphics with beziers is computationally expensive. I recommend doing this in a background thread, or where you already require a loading screen for other reasons)

If you want to use vector graphics as 2d polygonal models and don’t use curves anywhere, SDL_gpu supports triangle rendering, or you can roll your own triangle rendering in OpenGL (just using SDL for platform independence)

If you want to use vector graphics as 2d polygonal models and do use curves, you can either build your own triangle mesh at an acceptable LOD using a subdivision method such as deCastlejau’s algorithm or treat control points as triangle vertices and use fragment shaders (SDL_gpu also supports shaders if you want to avoid using OpenGL directly).

At least these are my reasons for looking at using vector graphics for my next project, I’m honestly not too familiar enough with the intricacies of 2D vector graphics yet to be of much help beyond that. I haven’t even rolled any code yet.