KB4 > Fixed Layouts > SVG

Overview

Fixed-layout publications can be created using SVG to combine text and images. Each image is assigned a fixed height and width, and content is positioned within this canvas area.
The advantage of using SVG for fixed layouts over other image formats is that SVG allows text content to be embedded instead of written into the image data. This ensures that any text marked up this way is available to be read by assistive technologies. SVG also allows provides options for including alternative text and extended descriptions for images.
The scalability of SVG images also has advantages for readers with low vision as it allows the content to be zoomed without becoming pixelated and difficult to read.

EPUB

Although SVG is a natural fit for fixed layout content, web browsers are not optimized for rendering them as part of a publication. Control over the size and orientation are limited, for example.
To fix this problem for publishing, EPUB 3 introduced metadata to aid reading systems in creating the appropriate display area and characteristics for each fixed layout page.
EPUB publications can consist entirely of fixed layout SVG pages or there may only be a few fixed layout pages interspersed in a reflowable publication.
It is also possible to mix fixed-layout SVG pages with fixed-layout XHTML pages, or with images directly in the EPUB reading order.
Note
Refer to the fixed layouts overview page for more information about how fixed-layout publications are created.
Accessibility
The same practices that make reflowable publications accessible are used to create fixed layout SVG pages with the greatest accessibility. Some key practices include:
  • Ensuring the logical reading order — The order of text content within the SVG must match the order that the user would logically be expected to encounter it on the page.
  • Describing the image and any components — The SVG title and desc elements can be used to describe both the full page as well as any image components within the document.
  • Avoiding images of text — Text content can be included and styled in SVG; it does not have to be drawn.
  • Ensuring text contrast — It is important to ensure that the text components of the SVG are visually distinguishable from the background.
If SVG is used solely as a wrapper for a non-scaling image formats (e.g., JPEG, GIF, PNG), the scaling benefit of the format is lost. SVG does not make these image formats scale any better. An HTML wrapper is often the better choice, as it provides more options for describing the images.
Despite the accessibility features SVG provide, it often will not be possible to create SVG pages that are fully accessible due to the image-based nature of SVG content. Restrictions that EPUB 3 reading systems place on modifying the appearance of fixed layout publications will also impede their readability.