272. How to display svg image file?

Problem

This is in response to Digiku's post titled "Loading SVG with Elizabeth Smith's builds".

Scalable Vector Graphics (SVG) is a new graphics file format based on XML. SVG allows us to create dynamically generated, high-quality graphics from real-time data with precise structural and visual control. You can use svg in your web applications. And of course you can use it in your php-gtk2 applications too!

This article shows you how to display an svg file in php-gtk2 as shown below:

How to display svg image file?


Solution

Important Note: This only works for PHP-GTK2 compliled with gtk+ v2.10 and above. If you are using an older version, for linux, you may follow the step-by-step instructions to recompile php-gtk2 with gtk+ v2.10. For windows, you may use the Builds by Elizabeth Smith or the official php-gtk2 beta release available at http://gtk.php.net/download.php.

If you using the official php-gtk2 beta release, you will be able to run the following sample code without any further requirement.

However, if you are using the builds by Elizabeth Smith, there are two more steps that you need to do to be able to display svg.

  1. First, follow the steps as outlined here to set up PHP-GTK2 using the builds by Elizabeth Smith.
  2. Once you have the core PHP-GTK2 set up, download the file php-gtk2.0.0-beta-GTK+2.10.12.zip as described in Elizabeth's post. Unzip the file. Look for the file "gdk-pixbuf.loaders" in the folder etc\gtk-2.0. Copy this file and put it in the same folder (i.e. etc\gtk-2.0) where you installed your PHP-GTK2. You will find a file with the same name already exists there. Just replace it.
  3. One last step: you need bzip2.dll. If you have downloaded one of Elizabeth Smith's packages a while ago, those packages contain this bzip2.dll. Copy this file and put in the root folder of where you installed PHP-GTK2.
  4. You are now ready to load svg files!
  5. Note: It seems that bzip2.dll is no longer bundled in Elizabeth Smith's packages. I believe she will later add this back to the packages, or provide download of this file in the download area. For now, if you need this dll, just drop me a note via the feedback form, and I'll email it to you.

Assuming you have followed the steps above and set up PHP-GTK2 to support svg files.

  • First use GdkPixbuf::new_from_file($svg_img_file) to load the svg image file into a pixbuf.
  • You may do some image manipulation on the pixbuf. When you're done processing the image, use GtkImage::new_from_pixbuf() to load the image into a GtkImage.
  • If you do not require any image processing, you can also simply use GtkImage::new_from_file($svg_img_file) to load the svg file direct into a GtkImage.

Sample Code

The following svg file is required by the sample code below. Please save a copy of the svg image file and put them in the same directory where you store the sample code: http://www.kksou.com/php-gtk2/gif/svg_example1.svg

1   
 2   
 3   
 4   
 5   
 6   
 7   
 8   
 9   
 10   
 11   
 12   
 13   
 14   
 15   
 17   
 18   
 19   
 20   
 21   
 22   
 23   
 24   
 25   
 26   
 27   
<?php
$window = new GtkWindow();
$window->set_title($argv[0]);
$window->set_size_request(400, 300);
$window->connect_simple('destroy', array('Gtk','main_quit'));
$window->add($vbox = new GtkVBox());

// display title
$title = new GtkLabel("Display SVG (Scalable Vector Graphics ) image file");
$title->modify_font(new PangoFontDescription("Times New Roman Italic 10"));
$title->modify_fg(Gtk::STATE_NORMAL, GdkColor::parse("#0000ff"));
$title->set_size_request(-1,40);
$title->set_justify(Gtk::JUSTIFY_CENTER);
$alignment = new GtkAlignment(0.5, 0, 0, 0);
$alignment->add($title);
$vbox->pack_start($alignment, 0, 0);
$vbox->pack_start(new GtkLabel(), 0, 0);

$svg_pixbuf = GdkPixbuf::new_from_file("svg_example1.svg"); // note 1
$img = GtkImage::new_from_pixbuf($svg_pixbuf); // note 2
//$img = GtkImage::new_from_file("svg_example1.svg"); //note 3

$vbox->pack_start($img);
$window->show_all();
Gtk::main();
?>

Output

As shown above.
 

Explanation

  1. Load the svg file into a pixbuf.
  2. Create a GtkImage from the pixbuf.
  3. If all you want is to display the svg file without any image processing, you may use this instead of the steps as outlined in note 1 and 2.

Add comment

Security code
Refresh