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

2. 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

3. 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;

4. 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

5. 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" 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 \n" unless @ARGV; my $svg=SVG::Parser->new()->parsefile($ARGV[0]); print $svg->xmlify;

6. 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 http://www.roitsystems.com/conferences/yapc_eu2003/code/hello_world.txt

7. 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(); http://www.roitsystems.com/conferences/yapc_eu2003/code/01b-GroupedLine.txt

8. 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=>'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

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

10. 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 http://www.roitsystems.com/conferences/yapc_eu2003/code/tessalate.txt

11. 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=>"0 0 100 100", overflow=>"visible"); $d2p2->group()->use(-href=>"#Tess0"); $d2p2->group()->use(-href=>"#Tess1"); $d2p2->group()->use(-href=>"#Tess2"); $d2p2->group()->use(-href=>"#Tess3");

12. 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=>"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;

13. 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', 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();

14. 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.

15. 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

16. 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,'http://www.roasp.com/'],[2,7,'http://www.roasp.com/images/la rgeROITtitle.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;

17. 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 my @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 graphic print $graph->draw;

18. 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 :-(

19. 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

20. Copyright 2001 RO IT Systems GmbH RO IT Systems GmbHwww.roitsystems.com 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 Kukofkas 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.orgSVG 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 – svg-developers@yahoogroups.com. 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