The abbreviation SVG stands for Scalable Vector Graphics. When embedded within an HTML website, SVG-formatted graphics can behave responsively. Whether viewed on a smartphone, tablet or web browser, an SVG graphic adapts itself to the size of the screen and uses the space available to it in the best way possible – with no dip in picture quality. SVG graphics can also be animated and even designed in such a way as to be interactive.
These properties make it hugely beneficial to use SVG graphics in mobile documentation.
• SVG graphics are especially suitable for images displayed on mobile devices because they can adapt to any screen size – the picture remains sharp, even when zooming in on high-resolution screens.
• Their vector qualities mean that SVG graphics take up significantly less memory space than pixel-based graphics. This also makes loading times shorter, so the end-user can access the contents of the mobile documentation much more quickly.
• Text with pre-determined font size and style can be embedded within SVG graphics. As the text is not converted to pixels or paths, the text within the graphic can even be found by a web search.
• An SVG graphic can contain animations. These animations can either begin automatically, or be started interactively by an event, such as tapping on a specific area (see the example below).
• Language-specific texts in an SVG graphic can only be compiled and administrated in one file and each language has its own layer. When the language to be displayed in the mobile documentation has been selected, the relevant layer of the SVG graphic is called up.
Example of an SVG graphic from the Sennheiser Documentation App
In this example, the graphic has no legend. After clicking on the graphic once – e.g.: on a cable – the text is briefly displayed, disappearing after five seconds. This is how information can be included in the graphic. The text is not visible at first, which preserves the overview, but it is still just one tap away and accessible at all times.