SVG

ePUB OPS Reading Systems must support SVG (Scalable Vector Graphics) as an OPS Core Media Type.

Overview

Many images, such as maps, charts, graphs, etc., originate from vector graphics systems, not photographs. Such images can be represented in a vector (as opposed to raster) format that describes the image in terms of lines, curves and absolutely positioned blocks of text (as opposed to an array of pixels). Replacing raster images with vector ones makes documents more accessible and searchable. This additional effort on the part of Reading Systems provides a framework that authors can use to improve accessibility significantly. Vector images also improve the visual quality of documents (since vector images are inherently scalable) and tend to decrease document sizes.

Scalable Vector Graphics (SVG) is a text-based graphics language that describes images with vector shapes, text, and embedded raster graphics. SVG is an XML markup language for describing two-dimensional vector graphics. It is a W3C standard. Basically SVG is to vector graphics what XHTML is to text. It is explicitly designed to work with other W3C standards such as CSS, DOM and SMIL. SVG has support for CSS which can be used like CSS in a standard ePub or HTML document.

The Canvas

At the start of an SVG image a canvas must be created. The width and height of this canvas is often determined by the parent element. The SVG defined sizes may therefore be scaled to fit. In general the SVG statement itself may be used to define the canvas size. Real dimensions or relative dimensions can be used but are either specified or converted to pixels. Supported units include em, ex, px, pt, pc, cm, mm, in, and percentages. Inside the canvas is a viewport which may be implied. The initial viewport uses an arbitrary x,y coordinate system and this is scaled to fit inside the canvas. The origin is the upper left corner. X points right and Y points down.

 <svg width="300px" height="200px" version="1.1"
     viewBox="0 0 1500 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg">

New viewports can also be defined when needed either with a viewBox or a Transform. A transform can offset the starting point, rotate or scale (via a multiplier) the coordinates. The specifications provides more complex examples illustrating these features.

Examples

Here is an example of an SVG file. An SVG file will normally have a .SVG extension.

1. <?xml version="1.0" standalone="no"?>

2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

3. <svg id="svg2" version="1.0" width="400" height="400" xmlns:svg="http://www.w3.org/2000/svg" 

4.            xmlns="http://www.w3.org/2000/svg">

5.   <g id="layerOne">

6.     <rect id="myRect" width="50" height="50" x="100" y="25"

7.         style="fill:blue;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

8.     <circle id="myCirc" cx="200" cy="200" r="50"

9.         style="fill:green;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

10.     <path id="myPath" d="M 238 49 L 350 145 L 327 172 L 215 76 Z"

11.         style="fill:red;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

12.   </g>

13. </svg>

This is how the image will display.

Shapes

SVG markup is relatively simple. You can follow the basic idea of pixels and layout shapes as such. Just understand that what you specify as 100px may scale up to 150px along with the rest of the image scaling up 150%.

Rectangles

4.   <g id="layerOne">

5.     <rect id="myRect" width="50" height="50" x="100" y="25"

6.         style="fill:blue;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

7.     <circle id="myCirc" cx="200" cy="200" r="50"

8.         style="fill:green;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

Attributes:

x = "<coordinate>"

The x-axis coordinate of the side of the rectangle which has the smaller x-axis coordinate value in the current user coordinate system. If the attribute is not specified, the effect is as if a value of "0" were specified.

y = "<coordinate>"

The y-axis coordinate of the side of the rectangle which has the smaller y-axis coordinate value in the current user coordinate system. If the attribute is not specified, the effect is as if a value of "0" were specified.

width = "<length>"

The width of the rectangle. A negative value is an error (see Error processing). A value of zero disables rendering of the element.

height = "<length>"

The height of the rectangle. A negative value is an error (see Error processing). A value of zero disables rendering of the element.

rx = "<length>"

For rounded rectangles, the x-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error.

ry = "<length>"

For rounded rectangles, the y-axis radius of the ellipse used to round off the corners of the rectangle. A negative value is an error.

Circles

5.     <rect id="myRect" width="50" height="50" x="100" y="25"

6.         style="fill:blue;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

7.     <circle id="myCirc" cx="200" cy="200" r="50"

8.         style="fill:green;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

9.     <path id="myPath" d="M 238 49 L 350 145 L 327 172 L 215 76 Z"

10.         style="fill:red;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

Attributes:

cx = "<coordinate>"

The x-axis coordinate of the center of the circle. If the attribute is not specified, the effect is as if a value of "0" were specified.

cy = "<coordinate>"

The y-axis coordinate of the center of the circle. If the attribute is not specified, the effect is as if a value of "0" were specified.

r = "<length>"

The radius of the circle. A negative value is an error (see Error processing). A value of zero disables rendering of the element.

Paths

7.     <circle id="myCirc" cx="200" cy="200" r="50"

8.         style="fill:green;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

9.     <path id="myPath" d="M 238 49 L 350 145 L 327 172 L 215 76 Z"

10.         style="fill:red;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

11.   </g>

12. </svg>

Attributes:

d = "path data"

The definition of the outline of a shape.

• M indicates movetos
• L indicates linetos
• Z indicates the closepath

pathLength = "<number>"

The author's computation of the total length of the path, in user units. This value is used to calibrate the user agent's own distance-along-a-path calculations with that of the author. The user agent will scale all distance-along-a-path computations by the ratio of ‘pathLength’ to the user agent's own computed value for total path length. ‘pathLength’ potentially affects calculations for text on a path, motion animation and various stroke operations. A negative value is an error.

xLinks

You can draw shapes and make them clickable by putting them inside of an anchor element like you would in normal xHTML. Take our first example. If you wanted to take the square and link it to a web page you could do the following:

4.   <g id="layerOne">

5.     <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="htpp://www.eprdctn.org">

6.       <rect id="myRect" width="50" height="50" x="100" y="25"

7.           style="fill:blue;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

8.     </a>

9.     <circle id="myCirc" cx="200" cy="200" r="50"

10.         style="fill:green;opacity:1;fill-opacity:0.5;stroke:black;stroke-opacity:1;" />

Embedding Images

There are a few times where you will want to embed another image inside of your SVG. One example I often use for embedding images in SVG is creating image maps. You can embed an image and later add opac elements that link to different parts of your xHTML. This is great for graphs and maps.

1. <?xml version="1.0" standalone="no"?>

2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 

3.   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

4. <svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 

5.    xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2" version="1.0" 

6.    width="768" height="923">

7.   <g id="layerOne">

8.     <image xlink:href="19_img01.jpg" width="768" height="923" />

9.   </g>

10. </svg>

Here is another for scalable covers in an eBook. This is inside an HTML page. The width and height should be the actual size of the image.

1.  <div>

2.     <svg xmlns="http://www.w3.org/2000/svg" 

3.       height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" 

4.       viewBox="0 0 482 775" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">

5.       <image height="775" width="482" xlink:href="../Images/cover.jpeg"></image>

6.     </svg>

7.   </div>

Text

The example below contains the text string "Hello, out there" which will be rendered onto the canvas using the Verdana font family with the glyphs filled with the color blue.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="10cm" height="3cm" viewBox="0 0 1000 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
  <desc>Example text01 - 'Hello, out there' in blue</desc>
 
  <text x="250" y="150" 
        font-family="Verdana" font-size="55" fill="blue" >
    Hello, out there
  </text>
  <!-- Show outline of canvas using 'rect' element -->
  <rect x="1" y="1" width="998" height="298"
        fill="none" stroke="blue" stroke-width="2" />
</svg>

Other Examples

• Breakfast in Bridgetown by Paul Gerald - This works best on iPad but shows off SVGs being used as image maps. Also uses nonlinear content.

General Notes on SVG Usage in ePUB

OPS supports the full SVG 1.1 Recommendation. The only exception is that, since OPS is not targeting interactive content, SVG animation and scripting features are not supported. These features must not be used by publication authors; a Reading System should not render such content. CSS styling of SVG must be fully supported.
Text in SVG images should be selectable and searchable. SVG images may contain links (a elements) and thus may be used for navigation. If a Reading System supports "tabbing" through links, SVG links must be included.

For ePub version 2, inline SVG is only supported within documents using the XHTML Preferred Vocabulary. It must not be used within DTBook documents. For ePub 3 SVG can be either inside an XHTML or as a standalone entity with an SVG file extension.

Creating SVG

• LaTeX to SVG converter - LaTeX has many devotes but is not recognized in ePUB. This converter helps overcome these problems for complex layouts like math equations.
• Inkscape - A free open source vector graphics editor, with capabilities similar to Illustrator, CorelDraw, or Xara X, using the W3C standard Scalable Vector Graphics (SVG) file format.
• Adobe Illustrator - can create SVG.
• SVG-edit - "A complete vector graphics editor in the browser," open-source project hosted on Google.
• A text editor.
• svgEpub - A free open source epub authoring tool, which can create SVG files from raster image files.

For more information

• The W3.org specification - for SVG 1.1
• The IDPF.org ePub 2.0.1 specification - SVG
• The IDPF.org ePub 3.0 Draft - SVG Content Documents
• The IDPF.org ePub 2.0.1 to 3.0 New Changes - SVG
• CSS_HowTo illustrates using SVG to scale a cover image.
• Tutorial Nice tutorial on some of the shapes and lines you can draw in SVG.