Copyright 2001 RO IT Systems GmbH RO IT Systems GmbH SVG And Perl London.pm Tech Talks.

Copyright 2001 RO IT Systems GmbHRO IT Systems GmbH www.roitsystems.com

SVG And Perl

Ronan Oger

RO IT [email protected]@roasp.com

[email protected]@roitsystems.com

London.pm Tech Meeting 2004.01.22London.pm Tech Meeting 2004.01.22

London.pm Tech Talks


SVG Modules on CPAN

• SVG• SVG::Parser• SVG::TT::Gr

aph• SVG::Plot• SVG::Graph• GD::SVG• SVG::GD


SVG.pm

• DOM-ish XML-generation module

• Lightweight / fast– Optimized for speed– Not strictly DOM-compliant– Supports most of W3's DOM API 2

• Extensible– Can add arbitrary XML tags– html & arbitrary XML

#!/usr/bin/perl

use SVG;

use strict;

my $svg = SVG->new();

$svg->circle(x=>0,y=>0,r=>10,id=>'test');

print $svg->xmlify;


SVG.pm output

• Hello SVG World!• Draw a line• Navigating the DOM• Tessalate• YAPH

Click on images to view as SVG


SVG::Parser – Peter Wainwright

• Built to work with SVG module

#!/usr/bin/perl -w

use strict;

use SVG::Parser;

die "Usage: $0 <file>\n" unless @ARGV;

my $xml;my $out

{

local $/=undef;

$xml=<>;

}

my $parser=new SVG::Parser(-debug => 1);

my $svg=$parser->parse($xml);

print $svg->xmlify;

#!/usr/bin/perl -w

use strict;

use SVG::Parser qw(SAX=XML::LibXML::Parser::SAX Expat SAX);

die "Usage: $0 <file>\n" unless @ARGV;

my $svg=SVG::Parser->new()->parsefile($ARGV[0]);

print $svg->xmlify;


Hello SVG World!

#!/usr/bin/perl -w

use strict;

use SVG;

print "Content-Type: image/svg+xml\n\n";

my $svg=new SVG();

$svg->rect(id=>'rect1',x=>'20px',y=>'55px',

width=>10,height=>10,fill=>'yellow');

my $text = $svg->text(x=>20, y=>55,

fill=>'red', stroke=>'black');

$text->cdata("Hello SVG world!");

#grab the fill element

my $fill = $svg->getElementByID('rect1')

->getAttribute('fill');

#modify the fill attribute of the text element

$text->setAttribute('fill',$fill);

print $svg->render(); #xmlify

http://www.roitsystems.com/conferences/yapc_eu2003/code/hello_world.txt


Draw a Line

#!/usr/bin/perl -w

use strict;

use SVG;


my $svg=new SVG(width=>60, height=>45);

my $group1=$svg->group(id=>"outer_group");

my $group2=$group1->group(id=>"inner_group");

$group2->line(x1=>20, y1=>30, x2=>50, y2=>35, stroke=>"blue");

print $svg->render();

http://www.roitsystems.com/conferences/yapc_eu2003/code/01b-GroupedLine.txt


Navigate the DOM ...Part 1#!/usr/bin/perl –w

use strict;

use SVG;


my $svg=new SVG(width=>60, height=>60);

my $group1=$svg->group(id=>"outer_group");

$group1->rect(x=>10, y=>10, width=>40, height=>40, fill=>"yellow");

my $group2=$group1->group(id=>"inner_group", stroke=>"blue");

$group2->line(x1=>10, y1=>30, x2=>50, y2=>40);

$group2->line(x1=>30, y1=>10, x2=>40, y2=>50);

$group2->line(x1=>10, y1=>40, x2=>40, y2=>10);

my $anchor = $group1->anchor(-href=>'http://example.net');

my $circle = $anchor->circle(cx=>30, cy=>30, r=>6, fill=>"red");

$circle->set(begin=>"mouseover", end=>"mouseout",

attributeName=>'fill', to=>'cyan');

print $svg->render(); #or xmlify or serialize

http://www.roitsystems.com/conferences/yapc_eu2003/code/01i-FirstNextIterator.txt


Navigate the DOM ...Part 2

iterate($svg);

sub iterate {

my ($element,$depth)=@_;

$depth=0 unless defined $depth;

my $child=$element->getFirstChild();

return unless $child;

do {

print "\t"x$depth,

"Element $child is a ",

$child->getElementName(),

"\n";

iterate($child,$depth+1) if $child->hasChildren;

} while ($child = $child->getNextSibling);

}


#!/usr/bin/perl -w

use strict;

use SVG;

my $svg = SVG->new(width=>"100%", height=>"100%");

my $g = $svg->group(style=>{"fill-rule"=>"evenodd","stroke-linejoin"=>"round", "stroke-linecap"=>"round"});

my $d1 = $g->defs();

my $path = $svg->get_path(-type=>"path", x=>[0,90,60], y=>[0,60,90], -closed=>1);

my $d1g1p = $d1->group(id=>"Tess0p")->path(%$path);

my $d1g0 = $d1->group( id=>"Tess0", fill=>"rgb(255,255,0)",

stroke=>"none")->use(-href=>"#Tess0p");

Tessalate ...Part 1

http://www.roitsystems.com/conferences/yapc_eu2003/code/tessalate.txt


Tessalate ...Part 2

my $d1g1 = $d1->group(id=>"Tess1", fill=>"none", stroke=>"rgb(0,0,0)", "stroke-width"=>"2.413")->use(-href=>"#Tess0p");

$path = $svg->get_path(-type=>"path", x=>[15,75,50], y=>[15,50,75], -closed=>1);

my $d1g2p = $d1->group( id=>"Tess2p")->path(%$path);

my $d1g2 = $d1->group(id=>"Tess2", fill=>"rgb(255,170,255)", stroke=>"none")->use(-href=>"#Tess2p");

my $d1g3 = $d1->group( id=>"Tess3", fill=>"none", stroke=>"rgb(0,0,0)", "stroke-width"=>"2.413")->use(-href=>"#Tess2p");

my $d2p2 = $g->defs()->pattern(id=>"TessPattern", patternUnits=>"userSpaceOnUse", x=>"0", y=>"0", width=>"100", height=>"100", viewBox=>"0 0 100 100", overflow=>"visible");

$d2p2->group()->use(-href=>"#Tess0");





Tessalate ...Part 3

$svg->comment('Now let us define the polygon with the fill inside it refered to by url reference');

$svg->polygon(points=>"163.816,337.5 ".(140+rand(20)).",".(400+rand(60))." 234.868,344.079 334.868,428.289 291.447,299.342 480.921,284.868 326.974,".(160+rand(60))." 344.079,30.9211 232.237,167.763 123.026,29.6053 150.658,191.447 37.5,94.0789 ".(100+rand(10)).','.(200+rand(40))." 7.23684,288.816 84.8684,287.5 33.5526,333.553 111.184,320.395 82.2368,448.026",fill=>"url(#TessPattern)", stroke=>"black");

$svg->text(x=>100,y=>20)->cdata("Using A tessalated pattern to create a fill");

$svg->anchor(-href=>'http://roasp.com/tutorial/source/tessalate.txt')->text(x=>50,y=>400, fill=>'red' )->cdata("View Script Source");

print "Content-type: image/svg+xml\n\n";

print $svg->xmlify;


• Based on TT (no SVG.pm dependency)

SVG::TT::Graph – Leo Lapworth

#!/usr/bin/perl -w

use SVG::TT::Graph::Bar;

my $width = '500',my $heigh = '300',my @fields = qw(field_1 field_2 field_3);

my $graph = SVG::TT::Graph::Bar->new({ # Required for some graph types 'fields' => \@fields, # .. other config options 'height' => '500',});

my @data = qw(23 56 32);$graph->add_data({ 'data' => \@data, 'title' => 'Sales 2002',});

print $graph->burn();


GD::SVG and SVG::GD

• An API to an API:

– Trying to allow us to re-use GD (raster) code to output SVG (vector) drawings

– Translates the GD API to the SVG.pm API

– Early development stages.

• GD::SVG is a replacement to GD

– all calls to GD are replaced with calls to GD::SVG.

• SVG::GD steals some of the GD namespace

– Can be dropped in place

– Can be used with GD::Graph or GD::Whatever effectively.


• GD::SVG– Very good– Used in bioperl

GD::SVG and SVG::GD

• SVG::GD– Versatile

– Mine


SVG::Plot – Kake & Jo Walsh

• Uses SVG.pm

• For semantic web experiments– Plot dat triplets (x,y,url anchor)

#!/usr/bin/perl -wuse SVG::Plot;my $points = [[0,1,'http://www.roasp.com/'],[2,7,'http://www.roasp.com/images/largeROITtitle.png'],[20,20,'http://www.google.com']];my $plot = SVG::Plot->new( points => $points, debug => 0, max_width => 800,

max_height => 400, point_size => 3, point_style => { fill => 'blue', stroke => 'yellow' }, line => 'follow', margin => 10, );$plot->scale(4);my $grid = { min_x => 0, min_y => 0, max_x => 20, max_y => 20 };

$plot->grid($grid);

print $plot->plot;


SVG::Graph – SourceForge• Based on SVG.pm#!/usr/bin/perl -w

use strict; use SVG::Graph; use SVG::Graph::Data; use SVG::Graph::Data::Datum; #create a new SVG document to plot in...my $graph = SVG::Graph->new(width=>600,height=>600,margin=>40);

#and create a frame to hold the data/glyphsmy $frame = $graph->add_frame;#lets plot y = x^2my @data = map {SVG::Graph::Data::Datum->new(x=>$_,y=>$_**2)} (0.1,0.2,1,2,3,4,5);my $data = SVG::Graph::Data->new(data => \@data);

#put the xy data into the frame$frame->add_data($data);#add some glyphs to apply to the data in the frame$frame->add_glyph('axis', #add an axis glyph 'x_absolute_ticks' => 1, #with ticks every one #unit on the x axis 'y_absolute_ticks' => 1, #and ticks every one #unit on the y axis 'stroke' => 'black', #draw the axis black 'stroke-width' => 2, #and 2px thick);

$frame->add_glyph('scatter', #add a scatterplot glyph 'stroke' => 'red', #the dots will be outlined in red, 'fill' => 'red', #filled red, 'fill-opacity' => 0.5, #and 50% opaque);

#print the graphicprint $graph->draw;


What people are doing with SVG• KDE3.2

• GPS traces on calibrated maps• London Underground track management

– No more wrong kind of snow...?

• Met Office – Graphical weather product (maps)

• NASA/ESA – Astronaut users manuals in SVG on tablet Pcs

• Integrated documents

• Maps, maps, maps

• Financial data and business graphics

• 3G Mobile data: MMS -> uses SVG/SMIL– animated, colour phone spam :-(


What you can do with SVG...• Vector graphics• Declarative Vector animations• Javascripted Animations• Trivial text positionning for CMS systems with text

boxes.• Media-independance (print/monitor/mobile consistency)

– Yeah, right!

• Open source, open source, open source


SVG & Perl Resources• Sites

– http//www.roasp.com/ Serverside SVG portal – by RO IT systems.– http://www.w3.org/TR/SVG/ SVG recommendation – Comprehensive SVG documentation with extensive

examples.– http://www.svgopen.org SVG Open conference home – Repository of papers and presentations from past

conferences dating back to SVG Open 2002.– http://www.scale-a-vector.de/home-e.htm Petra Kukofka‘s SVG design page – SVG cartoons and animations,

discussions, SVG articles.– http://www.schemasoft.org/ SPARK project: SVG Programmers' Application Resource Kit. Sponsored by

SchemaSoft.– http://www.pinkjuice.com/svg/ Prolific SVG page by Tobias rief in Berlin.– http://www.svgfoundation.org SVG Foundation.– http://www.protocol7.com/svg-wiki/ The SVG wiki – excellent site for cross-reference.– http://www.svg-cafe.com/ an SVG discussion forum sponsored by EvolGrafiX.– http://www.carto.net/ A rich cartography-specific SVG site with a number of high quality academic papers and

demos.– http://www.roasp.com/links/ More links to selected SVG- and Perl- related sites– http://www.adobe.com/svg/ Adobe SVG site. SVG plugin vendor 1. – http://www.corel.com/svgviewer/ Corel SVG site. SVG plugin vendor 2.

• Newsgroups– [email protected]. SVG Developers – Gemeral, dominant SVG newsgroup– http://svg.ilog.fr/mailman/listinfo/svg-coders/ SVG Coders – programmers newsgroup

• Manuals– http://www.roasp.com/man/ The SVG.pm manual.– http://www.roitsystems.com/conferences/yapc_eu2003/programming_svg_with_perl.rtf Programming SVG With

Perl - The first chapter of a book presenting the basics on SVG programming with Perl– http://www.protocol7.com/svg-wiki/ow.asp?SvgBooks SVG Books listed on the SVG wiki

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbH SVG And Perl London.pm Tech Talks.

Documents

Transcript of Copyright 2001 RO IT Systems GmbH RO IT Systems GmbH SVG And Perl London.pm Tech Talks.