generate images in SVG rather than PNG

Also specify width and height on img elements in details pages.

2 files changed, 23 insertions, 23 deletions

diff --git a/lib/Smokeping.pm b/lib/Smokeping.pm
index dc83f91..64eb36c 100644
--- a/lib/Smokeping.pm
+++ b/lib/Smokeping.pm
@@ -998,14 +998,14 @@ sub get_overview ($$$$){
 
         }
         my ($graphret,$xs,$ys) = RRDs::graph 
-          ($cfg->{General}{imgcache}.$dir."/${prop}_mini.png",
+          ($cfg->{General}{imgcache}.$dir."/${prop}_mini.svg",
     #       '--lazy',
            '--start','-'.exp2seconds($cfg->{Presentation}{overview}{range}),
            '--title',$cfg->{Presentation}{htmltitle} ne 'yes' ? $phys_tree->{title} : '',
            '--height',$cfg->{Presentation}{overview}{height},
            '--width',$cfg->{Presentation}{overview}{width},
            '--vertical-label', $ProbeUnit,
-           '--imgformat','PNG',
+           '--imgformat','SVG',
            Smokeping::Graphs::get_colors($cfg),
            '--alt-autoscale-max',
            '--alt-y-grid',
@@ -1024,7 +1024,7 @@ sub get_overview ($$$$){
         } else {
          $page.="<A HREF=\"".lnk($q, (join ".", @$open, ${prop}))."\">".
             "<IMG ALT=\"\" WIDTH=\"$xs\" HEIGHT=\"$ys\" ".
-            "SRC=\"".$cfg->{General}{imgurl}.$dir."/${prop}_mini.png\"></A>";
+            "SRC=\"".$cfg->{General}{imgurl}.$dir."/${prop}_mini.svg\"></A>";
         }
         $page .="</div></div>\n";
     }
@@ -1213,7 +1213,7 @@ sub get_detail ($$$$;$){
         my $name = $slave ? " as seen from ". $cfg->{Slaves}{$slave}{display_name} : "";
         mkdir $cfg->{General}{imgcache}."/__navcache",0755  unless -d  $cfg->{General}{imgcache}."/__navcache";
         # remove old images after one hour
-        my $pattern = $cfg->{General}{imgcache}."/__navcache/*.png";
+        my $pattern = $cfg->{General}{imgcache}."/__navcache/*.svg";
         for (glob $pattern){
                 unlink $_ if time - (stat $_)[9] > 3600;
         }
@@ -1245,7 +1245,7 @@ sub get_detail ($$$$;$){
         # chart mode 
         mkdir $cfg->{General}{imgcache}."/__chartscache",0755  unless -d  $cfg->{General}{imgcache}."/__chartscache";
         # remove old images after one hour
-        my $pattern = $cfg->{General}{imgcache}."/__chartscache/*.png";
+        my $pattern = $cfg->{General}{imgcache}."/__chartscache/*.svg";
         for (glob $pattern){
                 unlink $_ if time - (stat $_)[9] > 3600;
         }
@@ -1452,7 +1452,7 @@ sub get_detail ($$$$;$){
                 $title = "$desc from " . ($s ? $cfg->{Slaves}{$slave}{display_name}: $cfg->{General}{display_name} || hostname) . " to $phys_tree->{title}";
             }
             my @task =
-               ("${imgbase}${s}_${end}_${start}.png",
+               ("${imgbase}${s}_${end}_${start}.svg",
                @lazy,
                '--start',$realstart,
                ($end ne 'last' ? ('--end',$end) : ()),
@@ -1464,7 +1464,7 @@ sub get_detail ($$$$;$){
                @log,
                '--lower-limit',(@log ? ($max->{$s}{$start} > 0.01) ? '0.001' : '0.0001' : '0'),
                '--vertical-label',$ProbeUnit,
-               '--imgformat','PNG',
+               '--imgformat','SVG',
                Smokeping::Graphs::get_colors($cfg),
                (map {"DEF:ping${_}=${rrd}:ping${_}:AVERAGE"} 1..$pings),
                (map {"CDEF:cp${_}=ping${_},$max->{$s}{$start},LT,ping${_},INF,IF"} 1..$pings),
@@ -1498,15 +1498,15 @@ sub get_detail ($$$$;$){
         }
 
         if ($mode eq 'a'){ # ajax mode
-             open my $img, "${imgbase}_${end}_${start}.png" or die "${imgbase}_${end}_${start}.png: $!";
+             open my $img, "${imgbase}_${end}_${start}.svg" or die "${imgbase}_${end}_${start}.svg: $!";
              binmode $img;
-             print "Content-Type: image/png\n";
+             print "Content-Type: image/svg+xml\n";
              my $data;
              read($img,$data,(stat($img))[7]);
              close $img;
              print "Content-Length: ".length($data)."\n\n";
              print $data;
-             unlink "${imgbase}_${end}_${start}.png";
+             unlink "${imgbase}_${end}_${start}.svg";
              return undef;
         } 
         elsif ($mode eq 'n'){ # navigator mode
@@ -1516,7 +1516,7 @@ sub get_detail ($$$$;$){
                 $page .= "<div class=\"".panel_heading_class()."\"><h2>$desc</h2></div>";
             }
            $page .= "<div class=\"panel-body\">";
-           $page .= qq|<IMG alt="" id="zoom" width="$xs{''}" height="$ys{''}" SRC="${imghref}_${end}_${start}.png">| ;
+           $page .= qq|<IMG alt="" id="zoom" width="$xs{''}" height="$ys{''}" SRC="${imghref}_${end}_${start}.svg">| ;
            $page .= $q->start_form(-method=>'POST', -id=>'range_form', -action=>$cfg->{General}{cgiurl})
               . "<p>Time range: "		
               . $q->hidden(-name=>'epoch_start',-id=>'epoch_start')
@@ -1548,14 +1548,14 @@ sub get_detail ($$$$;$){
                 }
                 $page .= "<div class=\"panel-body\">";
                 $page .= ( qq{<a href="}.cgiurl($q,$cfg)."?".hierarchy($q).qq{displaymode=n;start=$startstr;end=now;}."target=".$t.$s.'">'
-                      . qq{<IMG ALT="" SRC="${imghref}${s}_${end}_${start}.png">}."</a>" ); #"
+                      . qq{<IMG ALT="" WIDTH="$xs{$s}" HEIGHT="$ys{$s}" SRC="${imghref}${s}_${end}_${start}.svg">}."</a>" ); #"
                 $page .= "</div></div>\n";
             }
         } else { # chart mode
             $page .= qq{<div class="panel-body">};
             my $href= (split /~/, (join ".", @$open))[0]; #/ # the link is 'slave free'            
             $page .= (  qq{<a href="}.lnk($q, $href).qq{">}
-                      . qq{<IMG ALT="" SRC="${imghref}_${end}_${start}.png">}."</a>" ); #"
+                      . qq{<IMG ALT="" WIDTH="$xs{''}" HEIGHT="$ys{''}" SRC="${imghref}_${end}_${start}.svg">}."</a>" ); #"
             $page .= "</div>";
             
         }
diff --git a/lib/Smokeping/Graphs.pm b/lib/Smokeping/Graphs.pm
index 0743e57..690a498 100644
--- a/lib/Smokeping/Graphs.pm
+++ b/lib/Smokeping/Graphs.pm
@@ -155,7 +155,7 @@ sub get_multi_detail ($$$$;$){
         }
         mkdir $cfg->{General}{imgcache}."/__navcache",0755  unless -d  $cfg->{General}{imgcache}."/__navcache";
         # remove old images after one hour
-        my $pattern = $cfg->{General}{imgcache}."/__navcache/*.png";
+        my $pattern = $cfg->{General}{imgcache}."/__navcache/*.svg";
         for (glob $pattern){
                 unlink $_ if time - (stat $_)[9] > 3600;
         }
@@ -165,7 +165,7 @@ sub get_multi_detail ($$$$;$){
         # chart mode 
         mkdir $cfg->{General}{imgcache}."/__chartscache",0755  unless -d  $cfg->{General}{imgcache}."/__chartscache";
         # remove old images after one hour
-        my $pattern = $cfg->{General}{imgcache}."/__chartscache/*.png";
+        my $pattern = $cfg->{General}{imgcache}."/__chartscache/*.svg";
         for (glob $pattern){
                 unlink $_ if time - (stat $_)[9] > 3600;
         }
@@ -282,7 +282,7 @@ sub get_multi_detail ($$$$;$){
         push @task, '--lazy' if $mode eq 's' and $lastheight{$start} == $max->{$start};
 
         push @task,
-               "${imgbase}_${end}_${start}.png",
+               "${imgbase}_${end}_${start}.svg",
                '--start',$realstart,
                ($end ne 'last' ? ('--end',$end) : ()),
                '--height',$cfg->{Presentation}{detail}{height},
@@ -291,7 +291,7 @@ sub get_multi_detail ($$$$;$){
                '--rigid','--upper-limit', $max->{$start},
                '--lower-limit',($cfg->{Presentation}{detail}{logarithmic} ? ($max->{$start} > 0.01) ? '0.001' : '0.0001' : '0'),
                '--vertical-label',$ProbeUnit,
-               '--imgformat','PNG',
+               '--imgformat','SVG',
                Smokeping::Graphs::get_colors($cfg),
                 @G,
                "COMMENT:$ProbeDesc",
@@ -307,15 +307,15 @@ sub get_multi_detail ($$$$;$){
         
 
         if ($mode eq 'a'){ # ajax mode
-             open my $img, "${imgbase}_${end}_${start}.png";
+             open my $img, "${imgbase}_${end}_${start}.svg";
              binmode $img;
-             print "Content-Type: image/png\n";
+             print "Content-Type: image/svg+xml\n";
              my $data;
              read($img,$data,(stat($img))[7]);
              close $img;
              print "Content-Length: ".length($data)."\n\n";
              print $data;
-             unlink "${imgbase}_${end}_${start}.png";
+             unlink "${imgbase}_${end}_${start}.svg";
              return undef;
         } 
 
@@ -325,7 +325,7 @@ sub get_multi_detail ($$$$;$){
                 if $cfg->{Presentation}{htmltitle} eq 'yes';
             $page .= "<div class=\"panel-body\">";
 
-           $page .= qq|<IMG id="zoom" alt="" width="$xs" height="$ys" SRC="${imghref}_${end}_${start}.png">| ;
+           $page .= qq|<IMG id="zoom" alt="" width="$xs" height="$ys" SRC="${imghref}_${end}_${start}.svg">| ;
 
            $page .= $q->start_form(-method=>'GET', -id=>'range_form')
               . "<p>Time range: "
@@ -352,7 +352,7 @@ sub get_multi_detail ($$$$;$){
                 if $cfg->{Presentation}{htmltitle} eq 'yes';
             $page .= "<div class=\"panel-body\">";
             $page .= ( qq{<a href="?displaymode=n;start=$startstr;end=now;}."target=".$q->param('target').'">'
-                  . qq{<IMG ALT="" SRC="${imghref}_${end}_${start}.png" class="img-responsive">}."</a>" ); #"
+                  . qq{<IMG ALT="" SRC="${imghref}_${end}_${start}.svg" class="img-responsive">}."</a>" ); #"
             $page .= "</div></div>\n";
         } else { # chart mode
             $page .= "<div class=\"panel\">";
@@ -360,7 +360,7 @@ sub get_multi_detail ($$$$;$){
                 if $cfg->{Presentation}{htmltitle} eq 'yes';
             $page .= "<div class=\"panel-body\">";
             $page .= (  qq{<a href="}.lnk($q, (join ".", @$open)).qq{">}
-                      . qq{<IMG ALT="" SRC="${imghref}_${end}_${start}.png" class="img-responsive">}."</a>" ); #"
+                      . qq{<IMG ALT="" SRC="${imghref}_${end}_${start}.svg" class="img-responsive">}."</a>" ); #"
             $page .= "</div></div>\n";
         }