Tutorial 10:

Using the SVG DOM support to explore an SVG file

In this tutorial, we are going to explore the SVG::DOM functionality. SVG::DOM allows you to query the structure of an SVG in memory (The SVG being worked with either generated using the SVG module or parsed from a file using the SVG::Parser module), and information about the module.

The documentation for the SVG::DOM support can be found at /man/svg/dom.html

We will explore the use of the following methods:

• getChildren
• getFirstChild
• getLastChild
• getParent
• getSiblings
• getElementByID
• getElementID
• getElements
• getElementName
• getParentElement
• getType
• getAttributes
• getAttribute

First, let's define a relatively static SVG image

#!/usr/bin/perl

use CGI;
use CGI::Carp qw(fatalsToBrowser);
#always use strict or you'll make a fool of yourself
use strict;


use lib '/home/roasp/local_perl';
#the above line is required on this server which 
#does not allow me to add SVG.pm 
#to the Perl directory tree by installing it. Instead I put it in
#/home/roasp/local_perl 

use SVG;

my $s = SVG->new('width'=>'200','height'=>'100');
my $g1 = $s->group(id=>"group_1");
my $g2 = $s->group(id=>"group_2");
$g1->circle(stroke=>"red",'r0'=>1,x=>"50%",y=>"20",'id'=>'circle_id_1');
$g1->rect(fill=>"green",'id'=>'rect_id_1', 'x'=>"10%",'y'=>"90%", width=>"20",height=>"10");
$g1->rect(fill=>"cyan",'id'=>'rect_id_2', 'x'=>"20%",'y'=>"80%", width=>"30",height=>"15");
$g1->rect(fill=>"brown",'id'=>'rect_id_3', 'x'=>"30%",'y'=>"70%", width=>"10",height=>"20");
$g1->anchor('-xref'=>'http://www.roitsystems.com/tutorial/index.shtml','id'=>'anchor_1')
	->text('id'=>'text_1', 'x'=>15,'y'=>150,'stroke'=>'red')->cdata('Hello, World');
$g2->ellipse(fill=>"red",'id'=>'ellipse_id_1', 'cx'=>"10%", 'ry'=>"10%",'rx'=>"10%");
$g2->ellipse(fill=>"yellow",'id'=>'ellipse_id_2', 'cx'=>"20%", 'cy'=>"20%",'ry'=>"10%",'rx'=>"10%");
$g2->ellipse(fill=>"blue",'id'=>'ellipse_id_3', 'cx'=>"30%", 'cy'=>"30%",'ry'=>"10%",'rx'=>"10%");
$s->ellipse(fill=>"cyan",'id'=>'ellipse_id_4', 'cx'=>"50%", 'cy'=>"40%",'ry'=>"10%",'rx'=>"10%");
$s->ellipse(fill=>"orange",'id'=>'ellipse_id_5', 'cx'=>"50%", 'cy'=>"50%",'ry'=>"10%",'rx'=>"10%");

print "Content-type: image/svg+xml\n\n",$s->render();

this renders the following image:

Next, we'll play with the groups

First of all, let's add a listing of the current circle IDs:: We begin by adding a group to carry our text - just to simplify our lives

#add a group to contain the search results
my $g3 = $s->group(id=>"group_3");

Next we retrieve all the '<rect>' elements with the getElements method which returns an array containing the references to the elements whose names matche 'rect'

my @rects = $s->getElements('rect');
#get a nice random start position for the position of the text
my $y = int(rand(255));

Next let's loop through the array @rect and retrieve that element's ID with the getElementID method

my $y = int(rand(10));
foreach  my $this_rect (@rects) {
	$y++;
	my $id = $this_rect->getElementID;
	$g3->text('id'=>"h-$id", 'x'=>15,'y'=>$y.'em')->cdata("Rect: $id");
}

Finally, let's not forget to print the document type and render (or xmlify or serialize) the DOM into an image.

print "Content-type: image/svg+xml\n\n",$s->render();

What we've accomplished:

We've generated an SVG image, and retrieved information about the primitives and used that information to generate other primitives.