Upgrade to SVG #5
Conversation
There was a problem hiding this comment.
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?
|
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:
The new |
|
I like the idea of linking the SVG from the PNG. Maybe the config option should be either png or png+svg? |
|
Sounds fine 👍. Will look into this in the next few days. |
|
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 The real gain comes from using svgo --multipass --pretty --indent=0 ./*.svg
for i in *.svg; do
gzip -kf9 "$i"
doneI'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.gzNow that's better than png. Some people might prefer |
|
The other thing about SVGs is that the graph size scales linearly with the number of data points. Compression and simplification can only help that much: there physically are as many data points as there is in the original. This eventually results in some prettttty slow minifying and compression. Ideally you'd want to downsample the thing, but doing that in either peal or bash is, ugh, idk. Anyways my version at https://github.com/Artoria2e5/chrony-graph/ is being used in prod despite all the issues. Haha! I just fixed that with |
3 participants
Generate SVG files instead of PNG: Better quality, zoomable