Upgrade to SVG

[MarcelWaldvogel]

Generate SVG files instead of PNG: Better quality, zoomable

[ddrown]

SVG is nice, but the graphs are significantly larger for systems with many points:

9kb remote-statistics.10.1.2.143.png
2164kb remote-statistics.10.1.2.143.svg

14kb local-clock.png
10795kb local-clock.svg

I'm not sure what the best option is for this - maybe a config setting to choose between png and svg?

[MarcelWaldvogel]

I see your point. Even the compression that is applied by most web servers (about -80%) only compensates for part of this growth.

I am partly in favor of the SVGs, as I like to add a link to the file, so I can look at it in more detail, if needed. Based on this, let me propose the following:

• Create a new configuration option for the format: png, svg, or svg+png (defaulting to the latter?)
• Then, pages can link to the PNG or SVG however they like, including the option to have the PNG as "thumbnail" with a link to the SVG.

The new __ALL_REMOTES_WITH_LINK__ from #6 would then be upgraded to have the <img src set to the PNG and the <a href set to the SVG in combined mode.

[ddrown]

I like the idea of linking the SVG from the PNG. Maybe the config option should be either png or png+svg?

[MarcelWaldvogel]

Sounds fine 👍. Will look into this in the next few days.

[Artoria2e5]

I would guess that the SVG files with many points are still readily compressible with gzip. Browsers are supposed to understand a svgz file name just fine, but I should test that with my fork.

---

Results were disappointing: my MS Edge sees "svgz" then fail to decompress it. What did work was using nginx's gzip_static on regular svg.gz files.

The real gain comes from using svgo then gzipping (very luckily, it's available from epel). Given this addition to the end of bin/plot,

svgo --multipass --pretty --indent=0 ./*.svg
for i in *.svg; do
  gzip -kf9 "$i"
done

I'm looking at:

all-diff-freq.svg:
Done in 584 ms!
158.849 KiB - 85.9% = 22.396 KiB

all-offset.svg:
Done in 313 ms!
156.084 KiB - 85.8% = 22.221 KiB

all-skew.svg:
Done in 230 ms!
159.338 KiB - 85.8% = 22.646 KiB

local-clock-skew.svg:
Done in 146 ms!
51.255 KiB - 56.8% = 22.121 KiB

offset-histogram.svg:
Done in 105 ms!
21.939 KiB - 70.4% = 6.488 KiB

local-clock-stddev.svg:
Done in 91 ms!
39.685 KiB - 58.2% = 16.568 KiB

percentiles-offset.svg:
Done in 108 ms!
49.353 KiB - 56.1% = 21.673 KiB

local-clock.svg:
Done in 164 ms!
57.661 KiB - 41.5% = 33.75 KiB

percentiles.svg:
Done in 116 ms!
47.45 KiB - 56.6% = 20.601 KiB

# ls -lah *svg*
-rw-r--r-- 1 root root  23K  9月 21 19:25 all-diff-freq.svg
-rw-r--r-- 2 root root 5.5K  9月 21 19:25 all-diff-freq.svg.gz
-rw-r--r-- 1 root root  23K  9月 21 19:25 all-offset.svg
-rw-r--r-- 2 root root 4.8K  9月 21 19:25 all-offset.svg.gz
-rw-r--r-- 1 root root  23K  9月 21 19:25 all-skew.svg
-rw-r--r-- 2 root root 5.5K  9月 21 19:25 all-skew.svg.gz
-rw-r--r-- 1 root root  23K  9月 21 19:25 local-clock-skew.svg
-rw-r--r-- 2 root root 2.5K  9月 21 19:25 local-clock-skew.svg.gz
-rw-r--r-- 1 root root  17K  9月 21 19:25 local-clock-stddev.svg
-rw-r--r-- 2 root root 2.3K  9月 21 19:25 local-clock-stddev.svg.gz
-rw-r--r-- 1 root root  34K  9月 21 19:25 local-clock.svg
-rw-r--r-- 2 root root 3.6K  9月 21 19:25 local-clock.svg.gz
-rw-r--r-- 1 root root 6.5K  9月 21 19:25 offset-histogram.svg
-rw-r--r-- 2 root root  983  9月 21 19:25 offset-histogram.svg.gz
-rw-r--r-- 1 root root  22K  9月 21 19:25 percentiles-offset.svg
-rw-r--r-- 2 root root 2.7K  9月 21 19:25 percentiles-offset.svg.gz
-rw-r--r-- 1 root root  21K  9月 21 19:25 percentiles.svg
-rw-r--r-- 2 root root 2.4K  9月 21 19:25 percentiles.svg.gz

Now that's better than png.

---

Some people might prefer python3-scour from appstream over nodejs-svgo from epel, considering python3 is more commonly pre-installed than node.. But I really shouldn't be doing it at 3:30 AM...