Rsvg#

This tutorial gets you started with writing programs that make use of Rsvg#. The sample program below will display an SVG file.

SVG Hello World

svghelloworld.cs:

    class SvgHelloWorld
    {
            static void Main(string[] args)
            {
                    Gnome.Program program =
                    new Gnome.Program("SVG Hello World", "1.0", Gnome.Modules.UI, args);

                    MyMainWindow app = new MyMainWindow(program);
                    app.ShowAll();
 
                    program.Run();
            }
    }



    class MyMainWindow
            : Gnome.App
    {
            Gnome.Program program;

            public MyMainWindow(Gnome.Program gnome_program)
                    : base("SVG Hello World", "SVG Hello World")
            {
                    this.program = gnome_program;

                    this.DeleteEvent += new GtkSharp.DeleteEventHandler(delete_event);


                    string svg_file_name = "cool.svg";
                    Gdk.Pixbuf pixbuf = Rsvg.Tool.PixbufFromFile(svg_file_name);

                    Gtk.Image image = new Gtk.Image();
                    image.Pixbuf = pixbuf;

                    this.Contents = image;
            }

            private void delete_event(object obj, GtkSharp.DeleteEventArgs args)
            {
                    this.program.Quit();
            }
    }

compile:

mcs svghelloworld.cs -r svg-sharp.dll -r gnome-sharp.dll -r gtk-sharp.dll -r gdk-sharp.dll

run:

mono svghelloworld.exe

This code has been based on the GNOME# Hello World code. (So, if you haven't read that tutorial yet, please go read that first.)

The only lines of code that (essentially) differ from that of the GNOME# Hello World tutorial are:

                    string svg_file_name = "cool.svg";
                    Gdk.Pixbuf pixbuf = Rsvg.Tool.PixbufFromFile(svg_file_name);

                    Gtk.Image image = new Gtk.Image();
                    image.Pixbuf = pixbuf;

                    this.Contents = image;

So this is what we will focus on.

First we see:

                    string svg_file_name = "cool.svg";
                    Gdk.Pixbuf pixbuf = Rsvg.Tool.PixbufFromFile(svg_file_name);

Here we first create a variable called svg_file_name which holds the name of our SVG file (which we are going to view). In our case, the name of our file is cool.svg. In your own programs, you will have to change this to the name of the SVG file that you have.

Next is where all the magic happens. Here, we make a call to the Rsvg.Tool.PixbufFromFile procedure. This procedure reads in a SVG file (which we tell it about with the svg_file_name variable that we pass to it). It then renders this SVG file into a Pixmap image and stores it in the Gdk.Pixbuf variable, which we called image. (If you don't know or understand the differences between a vector graphics image and a pixmap graphics image please read the section titled Vector Graphics vs. Pixmap Graphics.)

Now, although we have rendered our SVG file with this code. This code does not display anything (on the screen). The next little bit of code helps us display our rendered SVG file. This code is:

                    Gtk.Image image = new Gtk.Image();
                    image.Pixbuf = pixbuf;

                    this.Contents = image;

The Gtk.Image class will let us display our rendered SVG file. The first line of code above creates our Gtk.Image. (Nothing complicated about that.)

The next line of code puts our rendered SVG image (which is stored in the pixbuf variable), into our our Gtk.Image variable, which we called image. As you can see from the code above, we use the Pixbuf property of Gtk.Image; anything (of type Gdk.Pixbuf) that we assign to this property gets displayed in the Gtk.Image.

The final line of code puts our image (our Gtk.Image) into our application window. (Remember, you have to put your GUI widgets [like image] into an application window for it to be displayed on the screen. If you don't do that, then you won't see it!)