Scalable Vector Graphics (SVG) is the vector drawing standard specified by W3C (World Wide Web Consortium). It is used to generate all the graphs in this site's test results, as well as the logo at the head of this page, other diagrams and equations. Like all vector graphics formats, SVG differs fundamentally from raster (bitmap) approaches to representing an image.
Raster images – like those on a television or your computer screen – comprise rows and columns of pixels, each of which is assigned a colour. Provided there are sufficient pixels, the resulting image can be high-definition. But if a raster image is zoomed sufficiently it becomes pixelated or 'blocky'.
Vector image files, by contrast, specify an image geometrically, as a combination of 'primitives' such as lines, rectangles and circles. If we take the example of a straight line, it is specified as a start point and end point, with associated attributes such as thickness and colour. In SVG a line is specified like this:
line x1="20" y1="20" x2="50" y2="30" stroke="blue" stroke-width="0.2"
This describes a blue line of thickness 0.2 units running from x,y coordinates 20,20 to 50,30.
If SVG could only draw individual lines, rectangles, polygons, arcs, circles and ellipses it would be clunky, but SVG polyline objects combine multiple straight lines and path objects combine straight lines and/or arcs to form more complex shapes. Polylines are used to draw the traces in HTL's graphs, while paths are used to draw the earpad shapes in the (forthcoming) Ear Fit diagrams.
Vector graphics have two principal advantages over raster graphics. First, for simple images the file size is much smaller than a high-definition raster file depicting the same object(s), and so the image is faster to load. Second, because they do not comprise pixels (although they are converted to pixels for display on a screen), vector images and text do not become blocky when zoomed – they are high-resolution whatever the magnification. SVG images have the further advantage that they can be animated, which allows them to have interactive features if desired. Although SVG's native animation functions are limited, they can be hugely expanded by incorporating script functions. All of HTL's user-interactive animations are realised using ECMAScript.
These benefits – and the fact that SVG text is accessible to screen reading software to assist visually impaired visitors to this site – explain why SVG is the chosen file format for HTL's graphs. But there are downsides to SVG too, notably that – because it is a human-readable text format – it is easily understood and modified. For responsible use, this ease of editing is good, but it potentially allows an SVG file to be stripped of elements which identify its origins (metadata, logos, copyright notices, etc.). It is even easy to modify, and hence falsify, its graphical content.
This is why you should not trust anything which appears or claims to be an HTL SVG graph, if published anywhere other than this website.