doraTeX
commented
8 years ago 上記の(6)に限らず，テキスト保持PDFをアニメーションSVGに変換すると何かとトラブルを引き起こすようなので，アニメーションSVG形式の出力の場合はPDFをアウトライン化してからSVG化するように変更。
新しい変換ルーチンは以下の通り。
改訂版実装法
例えばSVG出力ファイル名が hoge.svg で，変換前が100ページのPDFであったとする。
(1) まずPDFのアウトラインをとる。
(2) そこから mudraw で100枚のSVGで生成する。
(3) 各SVGファイルのヘッダ2行を削除する。
<?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">(4) 後で1枚のSVGに合体したときに id のコンフリクトが起こらないように，各SVG内の各要素の id に別々のプレフックスを付ける。
具体的には，1枚目のSVG内の id=" という文字列を id="hoge-1- に，2枚目は id="hoge-2- のようにページ番号を付ける。（1枚のHTML内にインラインSVGを複数配置した場合の id のコンフリクトを防ぐため。）
(5) 各SVG内の id への参照をプレフックス付きのものに置換する。そのため，# を #hoge-1- や #hoge-2- のように置換する。ただし，〜 のような数値文字参照を置換しないように，前に & が伴う場合を除く。すなわち，正規表現で書けば，否定戻り読みをして (?<!\&)\# を置換対象にすればよい。
(6) 各SVGファイル冒頭の <svg の部分に id を振り，<svg id="hoge-1-svg", <svg id="hoge-2-svg" のように置換する。
(7) 出力用SVGを次のように用意する。
<?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 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
【SVGソース】
</defs>
<use>
<animate attributeName="xlink:href" begin="0s" dur="【総秒数】s" repeatCount="【繰り返し数】" values="【id一覧】" />
</use>
</svg>【SVGソース】部分には，(1)～(6) で作成した100枚のSVGのソースを流し込む。【総秒数】部分には，総ページ数*ウエイト秒数の値を書き込む。【繰り返し数】部分には，繰り返し数を書き込む。無限ループの場合はindefiniteという文字列を書き込む。【id一覧】部分には，#hoge-1-svg;#hoge-2-svg;#hoge-3-svg;...;#hoge-98-svg;#hoge-99-svgのような列を書き込む。
aminophen
abenori
新機能案
SVG出力で「単一ファイルまたはアニメを生成」がONの場合には，SVGを用いたアニメーションを出力する機能を付ける。
実装法
例えばSVG出力ファイル名が
hoge.svgで，変換前が100ページのPDFであったとする。(1) まずは普通に100枚のSVGを mudraw で生成する。
(2) 各SVGファイルのヘッダ2行を削除する。
(3) 後で1枚のSVGに合体したときに id のコンフリクトが起こらないように，各SVG内の各要素の id に別々のプレフックスを付ける。 具体的には，1枚目のSVG内の
id="という文字列をid="hoge-1-に，2枚目はid="hoge-2-のようにページ番号を付ける。（1枚のHTML内にインラインSVGを複数配置した場合の id のコンフリクトを防ぐため。）(4) 各SVG内の id への参照をプレフックス付きのものに置換する。そのため，
#を#hoge-1-や#hoge-2-のように置換する。ただし，〜のような数値文字参照を置換しないように，前に&が伴う場合を除く。すなわち，正規表現で書けば，否定戻り読みをして(?<!\&)\#を置換対象にすればよい。(5) 各SVGファイル冒頭の
<svgの部分に id を振り，<svg id="hoge-1-svg",<svg id="hoge-2-svg"のように置換する。(6) Chrome で文字部分が表示されないバグ(?)に対応するため，
<symbol id="(.*?font.*?)"><pathを<symbol><path id="\1"へ正規表現置換。(7) 出力用SVGを次のように用意する。
【SVGソース】部分には，(1)～(6) で作成した100枚のSVGのソースを流し込む。【総秒数】部分には，総ページ数*ウエイト秒数の値を書き込む。【繰り返し数】部分には，繰り返し数を書き込む。無限ループの場合はindefiniteという文字列を書き込む。【id一覧】部分には，#hoge-1-svg;#hoge-2-svg;#hoge-3-svg;...;#hoge-98-svg;#hoge-99-svgのような列を書き込む。こうして作ったアニメーションSVGのサンプルはこちら。
※ GIFアニメと同様に，コマ数が多くなるとファイルサイズがそれに比例して大きくなるので，インラインで使うのではなく
<img>要素で呼び出す場合には，gzip で圧縮した svgz形式 にしておくのがよいだろう。