固定レイアウトのSVG指定 :: ひまつぶし雑記帖

固定レイアウトのSVG指定

2013/11/8 [15:34:24] (金)

先日公開した『kindle猫写真集』https://t2aki.doncha.net/?id=1382691748 の固定レイアウト、SVGでの指定について補足自分メモ。

KADOKAWAグループのEPUB制作仕様が公開されたので中を見たところ、画像は固定レイアウトにしてSVGで記述する、ということなのでちょっとだけ調べた。

目次画像用に使ったxhtmlファイル
（画像のサイズは 900x1270 で、画像の中に目次がある）
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <title>和猫～Japanese Bob Tail</title> <meta name="viewport" content="width=900, height=1270" /> </head> <body> <div> <svg xmlns="https://www.w3.org/2000/svg" version="1.1" xmlns:xlink="https://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 900 1270"> <image width="900" height="1270" xlink:href="../images/dummy.jpg" /> <a xlink:href="contents001.xhtml" target="_top"> <rect fill-opacity="0.0" x="250" y="930" width="400" height="60" /> </a> <a xlink:href="contents127.xhtml" target="_top"> <rect fill-opacity="0.0" x="250" y="990" width="400" height="60" /> </a> </svg> </div> </body> </html>
※KADOKAWAの仕様ではまだ「imageマップは使わない」となっているけど、ibooksなどEPUB3では使えるので目次に使った（クリッカブルマップのSVG版、かな）

上記のxhtml、もろもろ呪文状態で使ってるんだけど

svg（SVGで画像表示の設定。XMLだ）

・viewBox
画像領域のどの部分を切り取るかという指定（画像領域の左上からxyの座標を指定する）上記だと、x座標0、y座標0、幅900、高さ1270

・width height
viewBoxで切り取った画像領域をブラウザ（リーダー）で表示するサイズを指定。上記だと幅100%、高さ100%と目いっぱい表示するように指定（opfや、metaタグのviewportだったりで表示サイズを900x1270に指定してあるので天地左右100%でOK）

image（実際の画像ファイルの指定）

・実際のサイズを指定してファイルを指定する。 HTMLだとimgタグ。

rect（四角領域を作ってクリッカブルマップ）

・xy座標と、幅高さを指定してその四角の中は透明で埋める（fill-opacity）この四角を目次のリンクにする（HTMLのusemapより指定のしかたが分かりやすい）

一枚画像だけのためのxhtmlファイルなので愛想もなにもない短い単純なファイル。
固定レイアウトは画像サイズも揃えるので、画像ファイル名だけが違うxhtmlが画像の数だけ単調に並ぶ。

KADOKAWAのEPUB仕様では、リフローだとspine部で該当ページだけ固定レイアウト指定することになっている。
本文に混じる挿絵や見開き横長挿絵のために固定とリフローの混在がkindleやibooksで使えるようになってからが本番、だな。

KADOKAWA-EPUB PORTAL（EPUB制作仕様ページ）
https://kadokawa-epub.bookwalker.co.jp/home

↑これはかなり細かくて丁寧な資料なので、オススメ。