EPUB形式のデータを作成する
EPUB形式のデータは、すでにおなじみの「Sigil」を使って作ります。前回はInDesignからEPUBを作成する方法も解説しましたが、InDesignはSVGデータの埋め込みができないので今回は使用しません（InDesignでテキスト部分を作ってから手作業で埋め込めば不可能ではありませんが）。
EPUBでSVGを表示するには、外部ファイルとして読み込む方法とXHTML内に直接記述する方法（インラインSVG）の2つがあります。最初に、外部ファイルとして読み込む方法を試してみましょう。Sigilを起動してテキストを流し込んだら、画像を挿入したい場所にカーソルを移動させて「画像挿入ボタン」をクリックします。
ボタンをクリックして画像を挿入する
SVG形式のファイルを選択する。すると文章中にSVGデータが挿入される
Sigilで外部ファイルとしてSVGを読み込んだ状態。img要素のsrc属性にファイル名が指定されている
外部ファイルとして読み込んだSVGは、iPadのiBooksやStanzaではPNGやJPEG画像と同じようにビットマップ画像として処理されます。
外部ファイルとして読み込んだSVGをiBooksで表示した状態。SVG画像を選択すると画像全体が対象になる
次に、XHTML内にSVGデータを直接記述するインラインSVGも試してみましょう。インラインSVGは表示したいSVGファイルをエディターで開き、<svg> ～ </svg>の部分をSigilのXHTML内にコピー＆ペーストします。
インラインSVGで配置した画像。XHTML内にsvg要素を使って直接記述されている
インラインSVGを含むEPUBデータをiPadのiBooksで開くと、外部ファイルの場合と表示結果が若干異なっています。図の中の文字の部分だけを選択できることからも、SVGがベクター画像とテキストとして処理されていることが分かります。
図の中の文字を選択できる
ただし、インラインSVGの場合、Stanzaのように未対応のビューワーでは図の中の文字だけが表示されます。
StanzaではSVGデータ内の文字だけが表示されてしまう。外部ファイルにした場合は画像として表示される
特定のビューワーに限定せずにSVGを利用したい場合は、現時点ではインラインではなく外部ファイルとして読み込ませるほうが安全です。
