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

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com SVG Modules on CPAN SVG SVG::Parse r SVG::TT::G raph SVG::Plot SVG::Graph GD::SVG SVG::GD

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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;

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com SVG.pm output Hello SVG World! Draw a line Navigating the DOM Tessalate YAPH Click on images to view as SVG

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com SVG::Parser – Peter Wainwright Built to work with SVG module #!/usr/bin/perl -w use strict; use SVG::Parser; die "Usage: $0 \n" 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 \n" my $svg=SVG::Parser->new()->parsefile($ARGV[0]); print $svg->xmlify;

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Draw a Line #!/usr/bin/perl -w use strict; use SVG; print "Content-Type: image/svg+xml\n\n"; 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();

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Navigate the DOM...Part 1 #!/usr/bin/perl –w use strict; use SVG; print "Content-Type: image/svg+xml\n\n"; 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=>' 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

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Navigate the DOM...Part 2 iterate($svg); sub iterate { my $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); }

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com #!/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

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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=>" ", overflow=>"visible"); $d2p2->group()->use(-href=>"#Tess0"); $d2p2->group()->use(-href=>"#Tess1"); $d2p2->group()->use(-href=>"#Tess2"); $d2p2->group()->use(-href=>"#Tess3");

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com Tessalate...Part 3 $svg->comment('Now let us define the polygon with the fill inside it refered to by url reference'); $svg->polygon(points=>" ,337.5 ".(140+rand(20)).",".(400+rand(60))." , , , , ,".(160+rand(60))." , , , , , ".(100+rand(10)).','.(200+rand(40))." , , , , , ",fill=>"url(#TessPattern)", stroke=>"black"); $svg->text(x=>100,y=>20)->cdata("Using A tessalated pattern to create a fill"); $svg->anchor(-href=>' >text(x=>50,y=>400, fill=>'red' )->cdata("View Script Source"); print "Content-type: image/svg+xml\n\n"; print $svg->xmlify;

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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', = qw(field_1 field_2 field_3); my $graph = SVG::TT::Graph::Bar->new({ # Required for some graph types 'fields' => #.. other config options 'height' => '500', }); = qw( ); $graph->add_data({ 'data' => 'title' => 'Sales 2002', }); print $graph->burn();

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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.

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com GD::SVG – Very good – Used in bioperl GD::SVG and SVG::GD SVG::GD – Versatile – Mine

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com SVG::Plot – Kake & Jo Walsh Uses SVG.pm For semantic web experiments – Plot dat triplets (x,y,url anchor) #!/usr/bin/perl -w use SVG::Plot; my $points = [[0,1,' rgeROITtitle.png'],[20,20,' 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;

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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/glyphs my $frame = $graph->add_frame; #lets plot y = x^2 = 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 => #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 graphic print $graph->draw;

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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 :-(

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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

Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com SVG & Perl Resources Sites – http// Serverside SVG portal – by RO IT systems. – SVG recommendation – Comprehensive SVG documentation with extensive examples. – SVG Open conference home – Repository of papers and presentations from past conferences dating back to SVG Open – Petra Kukofkas SVG design page – SVG cartoons and animations, discussions, SVG articles. – project: SVG Programmers' Application Resource Kit. Sponsored by SchemaSoft. – SVG page by Tobias rief in Berlin. – Foundation. – SVG wiki – excellent site for cross-reference. – an SVG discussion forum sponsored by EvolGrafiX. – A rich cartography-specific SVG site with a number of high quality academic papers and demos. – More links to selected SVG- and Perl- related sites – Adobe SVG site. SVG plugin vendor 1. – Corel SVG site. SVG plugin vendor 2. Newsgroups – SVG Developers – Gemeral, dominant SVG newsgroup – SVG Coders – programmers newsgroup Manuals – SVG.pm manual. – Programming SVG With Perl - The first chapter of a book presenting the basics on SVG programming with Perl – SVG Books listed on the SVG wiki