SVG VERSUS PNG

When designing web applications for plotting data there's always the decision about whether to use SVG or PNG. They are very different formats and each have their uses. I prefer to use SVG for on-the-fly graphics for a number of reasons:

However, there are some minor disadvantages to using SVG. My experience has shown the following to be potentially problematic:

Improving legibility

By default, browsers will not necessarily choose the combination of text and shape rendering options that you would wish to use. While Firefox always displays shapes (defined using <path>) with sharp edges, IE displays them with anti-aliased edges. You will find that creating different CSS classes for each group of shapes that have similar attributes, you can obtain the best results. Rectangular shapes, such as bars on a bar chart, are best rendered with shape-rendering: crispEdges. Circular shapes are best rendered with shape-rendering: geometricPrecision which anti-aliases the shape to create smooth curves.

Notes

1 - I have a program that determines the size and amount of free space on disk drives and then generates SVG plots for each one with an HTML wrapper. The program colours each image according to the amount of free space available. Different servers have different thresholds for when to worry and while the CGI programs on each are identical, the colours are specified through a local CSS file and a class attribute. This practical example demonstrates how bespoke programs can be avoided by using local versions of customer-controlled CSS files. The first image shows one image with green as the 50% or less indicator and the second with a different CSS file.

Image of disk space icons Image of disk space icons