Documentation Center

Scalable images with hotspot links

Using SVG images as an alternative to CGM images.

Why SVG?

Scalable Vector Graphics (SVG) is standards-based, free to use, and provides scalable and interactive capabilities (such as bidirectional hotspots) that rival CGM graphics. SVG graphics are supported natively on all major HTML5 browsers, which makes them independent of the operating system or hardware platform.

You enter SVG markup directly within the HTML5 markup. This eliminates the need to include image, object or other elements to reference SVG graphics that are external to HTML. SVG markup within HTML markup becomes part of the DOM for the resulting HTML document. As part of the DOM, the available tools you can use to manage and manipulate the DOM can easily be applied to SVG markup. You can add interactivity to SVG graphics with JavaScript, jQuery, and other browser scripting tools.

SVG markup stored externally can be developed and managed in accord with traditional multimedia development. External storage also allows the same graphic to be easily used across multiple HTML documents.

LiveContent S1000D and SVG

LiveContent S1000D can read the SVG markup within an ICN file, which must be within an IETP's figures folder. To enable the interactivity required to provide the features and functionality, SVG markup from relevant ICN files will be injected into the resulting HTML5 prior to rendering in LiveContent S1000D.

When you click a topic in LiveContent S1000D's TOC that has SVG graphics, they will be displayed. When you click a hotspot in a SVG graphic, the matching part of the DM will be highlighted. When you click a link inside the DM to the hotspot on the SVG graphic, the matching part inside the IPD will be highlighted.

For scaling support, only SVGs with the viewBox attribute specified in the root SVG element will be supported. For example, <svg viewBox="0 0 165350 116930" version="1.1" xmlns="http://www.w3.org/2000/svg">

Due to limitations in the way SVG works in the browser, SVGs are drawn using their own internal coordinate and unit system, unrelated to pixels or other SVG units, and the viewBox specifies how the browser should map the SVG units to the container in the browser. If the viewBox attribute is missing, the SVG will always be drawn the same size and will not scale. If the viewBox is set incorrectly, the SVG will scale but will always be too large or too small for the container. Because the required value for the viewBox depends on the internal sizing used in the SVG, LiveContent S1000D cannot simply give it an arbitrary value; as it should have been set by the creator of the SVG. Therefore, we do not support SVGs that lack a viewBox attribute.

To examine SVG markup to determine whether an SVG image contains a viewBox attribute, view the related ICN or figure file with an SVG compatible editor. This can also be examined in your preferred XML editor or viewer. SVGs with an incorrect or missing viewBox attribute will not scale properly in LiveContent S1000D; no warning message or error is generated that reflects this problem.

Hotspots will be created within a SVG image. Within SVG markup, element with Identified hotspots should include apsname attribute values that conform to the S1000D standard. The appropriate apsname values will match applicationStructureName (or the equivalent in previous issues) hotspot attribute values in referencing data modules.

Links to graphic hotspots will be implemented by attaching a function to the onclick event for related links, which modifies the associated CSS to highlight the target element with the SVG, with an id that matches the applicationStructureName (or the equivalent in previous issues) of the relevant hotspot.

Within S1000D, illustrated parts catalogs data modules (IPD) allow for interactions between hotspot graphics and the text of the data module. By clicking on a hotspot in a graphic within an IPD, the corresponding part's line item within the text of the data module should be highlighted with a yellow arrow.

To enable this capability the relationship between a hotspot and an element target within the text of an IPD data module will be create using the applicationStructureName (or the equivalent in previous issues) similar to the link to graphic hotspot described above.

To achieve this an onclick event will be added to elements within SVG markup that includes and id attribute. The event will be associated with at function that uses the element's id to determine the corresponding line item within the IPD via the item attribute of the related catalogSeqNumber.