Bug #3351


increase traffic graph.php SVG resolution

Added by Bill McGonigle almost 8 years ago. Updated about 6 years ago.

Needs Patch
Web Interface
Target version:
Start date:
Due date:
% Done:


Estimated time:
Plus Target Version:
Release Notes:
Affected Version:
Affected Architecture:


While debugging a limiter issue it turned out I needed the text on the traffic graphs which hadn't been working for me for a while. After a bit of googling I realized it had to do with Firefox's minimum font size setting.

What appears to be going on is this: The SVG produced for the traffic graphs has an internal coordinate resolution of 200x100. It has elements defined with font-sizes like 4. This turns out fine because the actual SVG rendering is scaled to its containing DOM element, so it's all just relative (n.b. I don't know anything about SVG really, just deducing).

The trick is that Firefox applies its minimum font size uniformly, based on css apparently. So, I have my minimum font size set to 14 (enough web designers seek to blind me) and this was causing the fonts in the SVG up to 14 out of 200/100, which leads the labels to run all over each other.

There's an old forum thread about a similar problem - not sure if it's the same or not:

To deal with this, I increased the internal resolution of the SVG (the part that says to not touch it) to 900x450 - the pfSense theme is hardcoded to 900px, so I figured that having the two match would establish appropriate scaling expectations for fonts. I scaled the other fixed values in the SVG by the same factor and also tweaked the font size and y position of the switch unit and scale labels, since they looked slightly wrong with just a straight scaling.

Seems to work for me in Firefox. I also checked it in Chromium and it looks pretty much the same as stock to me.

Attaching before and after screenshots and a patch. I haven't tested on Windows or MacOS yet and won't have a chance to do so right away - figured I'd upload what I've got so far. I'll test those when I can unless others do first.


limiter-double-chart.png (41.4 KB) limiter-double-chart.png before Bill McGonigle, 12/04/2013 12:36 AM
limiter-double-chart-improved.png (32 KB) limiter-double-chart-improved.png after Bill McGonigle, 12/04/2013 12:36 AM
pfsense-svg-increase-resolution-4.5x.patch (6.11 KB) pfsense-svg-increase-resolution-4.5x.patch Bill McGonigle, 12/04/2013 12:36 AM
Actions #1

Updated by Renato Botelho almost 8 years ago

This patch doesn't apply cleanly. Is it possible to submit this change using github's pull request? It's much easier for us to review and apply patches there.

Actions #2

Updated by Chris Buechler about 6 years ago

  • Status changed from New to Needs Patch

Bill: if you could update for bootstrap (current master) and put in a pull request, we can review there and get it merged.


Also available in: Atom PDF