ゲーミング化した神奈川県章をPDFに貼り付けようとした #TeXで遊ぼう

新しい生活様式ではいかがお過ごしでしょうか。私は新しきものを拒絶し時代の狭間に取り残されそうになりながら精神的に自滅しそうな毎日を無益に過ごしています。

そんな老害ムーブをかましている時、ふと題名の通りのことを思い付きました。例によって $\LaTeX$ です。今回は $\LaTeX$ でPDFにsvgを貼り付ける方法を述べていきます。と、思っていたのですが出来ませんでした。

（おことわり：情報工学は専門分野ではないので、所々間違っている可能性があります。ご指摘の際はふわふわ言葉でお願いします。ホバーランランルーと言われると私の身体が爆散します。）

なぜこのようなことを？
SVGとは何か？
神奈川県章をゲーミング化する
完成したゲーミング神奈川県章
TeXに貼り付ける
課題
おわりに（という名の自分語り）
参考文献

なぜこのようなことを？

神奈川県内のすべての海水浴場が閉鎖され、花びらの欠けた夏がやって来ようとしています。そんな中、少しでも家で神奈川県を楽しんでParty Peopleの気分になっていただけたら嬉しいなあと思いました。嘘です。後付けです。Peopleの綴りが思い出せなかったのは公然の秘密です

あ、PartyといえばParty Parrotのsvg版もあるのでリンク貼っておきますね。

https://codepen.io/nathangath/pen/RgvzVY/

SVGとは何か？

ベクタ形式の画像ファイルです。説明が面倒なのでWikipediaのリンクを貼っておきます。

Scalable Vector Graphics - Wikipedia

簡単に利点を挙げると、

サイズが軽い
拡大してもザラザラしない
テキストエディタで編集できる

の3点でしょうか。プログラミング感覚で画像が作れます。

企業や組織のロゴやアイコン、シンボルによく使用されます。写真のjpgやイラストのpng、アニメーションのgifなどと比べて直接貼り付けられるサイトが少ないためか知名度は低いかもしれません。ちなみにTwitterやニコニコ静画でもサポートされていません。Hatenaでも未対応と言われました。狂いそう・・・！（静かなる怒り）

XMLベースでコードが記述されることもあって様々な機能を備えています。その一つがアニメーション（動画）機能です。

defghi1977.html.xdomain.jp

SVGの動画化には様々な方法が存在しますが、今回はanimate要素を使います。描画されている要素にanimate要素を挿入し、あれやこれや属性を加えることで簡単にゲーミング化できます。

神奈川県章をゲーミング化する

ウィキメディア・コモンズを使う

テキストエディタがあればSVGを作れるとはいえ、CUIで神奈川県章を記述できるほどの数学的センスは持ち合わせていません。Wikipediaの姉妹プロジェクトであるウィキメディア・コモンズにある神奈川県章を二次創作することにしました。

commons.wikimedia.org

creativecommons.org

権利的にはCC BY-SA 3.0だから大丈夫…だよね？（怪レい）

一応CC BY-SA 3.0のライセンス全文と非公式日本語訳を貼っておきます。

Wikipedia:Text of Creative Commons Attribution-ShareAlike 3.0 Unported License - Wikipedia

Wikipedia:クリエイティブ・コモンズ表示-継承 3.0 非移植 - Wikipedia

ゲーミング化の定義

重要なことを忘れていました。スラングとしての「ゲーミング○○」とは一体何なのか？定義する必要があります。一応調べてみたのですが、製品によって発光する色がまちまちでよく分かりませんでした！いかがでしたでしょうか？

weathernews.jpゲーミングと名の付く製品は一般的に虹色に光ります。虹色とは上で示した記事の通り、日本では赤、橙、黄、緑、水色、青、紫の七色で構成されます。今回はこの「七色を階調的に表現したもの」をゲーミングとします。

SVGファイルのコードを改変する

ようやく本題です。本題その1です。

グループ化する

animate要素を適用させるには、一般的に

<path （中略）/>

と書かれているところを

<path （中略）><animete （中略）/></path>

と改変します。今回は描画されている図形を全てゲーミングで塗り潰すので、g要素でグループ化して、グループの中にanimate要素を付加します。

<path （中略）/>
（中略）
<path （中略）/>

これが

<g>
<path （中略）/>
（中略）
<path （中略）/>
<animete （中略）/>
</g>

こんな感じに。

こうしてコードの改変を控えめにすることでストレスの減少やタイプミスによるエラーを減らしています。対象画像は都合にいいことに、既に全体的にグループ化されていたので、animate要素を付加するだけで簡単に改変できました。

animate要素の中身

animate要素は以下の構成で記述しました。

<animate attributeName="fill" dur="3" values="red;orange;yellow;green;skyblue;blue;purple;red" repeatCount="indefinite"/>

属性名	説明
attributeName	動かしたい属性を記述
dur	動作時間、単位はs（秒）
values	値、ここでは色を記述、セミコロンで区切れる
repeatCount	反復回数、indefiniteは不定

属性の説明はざっくり上の表の通りです。attributeNameとvaluesはいじくれば色々とできますが、応用例はぐぐれば出てきます。私は疲れました。

ゲーミング化する要素のfill属性を消す

attributeName属性でfill属性を指定しても、対象要素のfill属性が優先されるようで、動画化しませんでした。fill属性を消さないとゲーミング化しませんので、忘れずに消しておきましょう。

完成したゲーミング神奈川県章

割とチカチカするので凝視すると気分が悪くなるかもしれません。悪しからず。テ、テ、テレビを見る時は～

図1 ゲーミング化した神奈川県章

未対応でもSVGを貼れる方法があるようで、下のサイトの手法で貼り付けてみました。

dhrname.hatenablog.com

アニメーションも動いていてほっとしています。余計な枠が見えていますが、<code></code>で囲んでいるせいでしょう。しかし、これがないとSVGの貼り付けができないのです。余計な枠は見なかったことにしてください。人間の視覚の補完機能は優秀です。人間の可能性を信じてください。

TeXに貼り付ける

一応本題その2ですが、アニメーションの貼り付けできなかったので参考程度に留めてください。

Inkscapeをインストールする

以下で使用するパッケージでは内部でInkscapeを使用するため、Inkscapeをインストールする必要があります。

Inkscape 1.0をダウンロード | Inkscape

またインストール後にパスを通します。 $\TeX$ の一部のインストールソフトでは自動でやってくれますが、Inkscapeは手動で設定する必要があります。

svg.styを使う

この節のパクリ参考元はこちらです。

konoyonohana.blog.fc2.com

>クラスファイルは欧文クラスを利用します．日本語には対応していません．

Oops!なんと和文クラスファイルに対応してないとのこと。ただバグなのかは分かりませんが、和文クラスファイルでもタイプセットできたので、以下に手法を示します。（なお前述の通りアニメーションは動作しませんが）

まずはhoge.texファイルを以下のように記述します。

\documentclass{article}
\usepackage[varg,cmintegrals,cmbraces]{newtxmath} %数式の書体
\usepackage{newtxtext}
\usepackage{svg} %SVGを取り込む

\title{Gaming Kanagawa Prefecture}
\author{Zweiglinie}

\begin{document}

\maketitle

\begin{abstract}
PARTY OR DIE
\end{abstract}

\section{Kanagawa Prefecture}

\includesvg{Emblem_of_Kanagawa_Prefecture_gaming.svg}

\end{document}

$\mathrm{pdf}\LaTeX$ でタイプセットします。

pdflatex --shell-escape hoge

タイプセットが成功すると作成したhoge.texと同じフォルダにsvg-inkscapeというフォルダが勝手に作成されます。svg-inkscapeファルダの（タイプセットに使ったSVGファイルの名前）_svg-tex.pdf_texという謎拡張子ファイルを、作成したtexファイルのあるフォルダにコピーします。

次にクラスファイルをltjsarticleに変えて

\documentclass{ltjsarticle}

$\mathrm{Lua}\LaTeX$ でタイプセットします。

lualatex hoge

こうするとSVGを貼り付けられます。

f:id:Zweiglinie:20200627005739p:plain

図2 一般的な神奈川県章のSVGをPDFに埋め込んだ様子

animate要素を記述しても図2のように無視されます。アニメーションを入れなければ十分に利用価値はあると思います。

InkscapeでPDFに変換する

Inkscapeは一般的にマウス等を使ってロゴを作ったりロゴを作ったりロゴを作ったりするGUIのソフトで知られていますが、パスを通すとCUIのソフトとしても利用できます。

コマンドプロンプトであれやこれやすることで簡単にファイルの変換ができます（コマンドラインって言うらしいんですが正直言い方を変える理由がよく分からなかったです）。

さて、これでSVGをPDFに変換できれば $\mathrm{Lua}\LaTeX$ で直接貼れます！

inkscape --export-latex=Emblem_of_Kanagawa_Prefecture_gaming.pdf Emblem_of_Kanagawa_Prefecture_gaming.svg

これで変換を試みたところ

WARNING: unknown type: svg:animate

なんとピンポイントにanimate要素なんか知らねえと言われました。悲しい。

蛇足1

困った時は

inkscape -?

で、英語のヘルプが出ます。英語の勉強をしておくことで仕様が変わった時でも柔軟な対応が可能です。

蛇足2

パスを通してあるので

inkscape

と打つとGUIのInkscapeが起動します。コマンドプロンプトから起動したい時には有用です。

課題

$\LaTeX$ にアニメーションのSVGを直接貼れなかった訳ですが、 $\LaTeX$ に直接貼れる $\mathrm{Ti}k\mathrm{Z}$ にもアニメーションの機能があるため、SVGをうまいこと $\mathrm{Ti}k\mathrm{Z}$ に変換できれば実質貼れそうだなあと思いました。

勉強するのが面倒くさいので誰かやってください。うっかり勉強して神奈川県章が七色に光るPDFができたら、また記事にするかもしれません。

おわりに（という名の自分語り）

いかがでしたかを茶化しておいて薄っぺらい内容で恥ずかしくないのかよ？課題はありますが改善する気はないです。飽きましたし疲れますからね。texdocで $\mathrm{Ti}k\mathrm{Z}$ のマニュアルを見てみると1300ページ以上のPDFが開きます。高機能なことは嬉しいですが、概要を把握するだけでも苦労するのはどうにかならんかなあと思います。

世の中変わりつつありますが、 $\TeX$ はいつでもあなたを待っています。 $\TeX$ に興味を持った方はこれを機にインストールを、 $\TeX$ を使ったアニメーションの動くSVGをPDFに貼り付ける方法を思い付いた方はぜひともブログ記事をお待ちしております。俺もやったんだからさ