WordPressではsvg形式の画像をアップロードすることができない。これは、svgがxmlをベースとしているためで、ユーザーが意図しないjavascriptの実行など、セキュリティ上の懸念があるから。倫理上の問題はともかく、得体のしれないウェブサイトからブログ投稿用の画像を引っ張ってくることはよくあるので、これは妥当な判断だと思う。
「wordpress svg」などと検索すると、WordPressのアップロード形式制限を緩和し、svgをアップロードできるようにするPHPスクリプトやプラグインを紹介する記事がたくさんヒットする。しかし、前述のように、あえて制限しているのであって、そのリスクはしっかりと理解しておくべき。まったくセキュリティ面に触れていない記事も多いようなので、無責任でなんとも残念だけど。
だけど、ベクター画像を使いたい
WordPressでSVGを扱うのは面倒くさいけど、やはりSVGなどのベクター画像が魅力的なのは間違いない。JPEGなどのラスタ画像と違って縮小・拡大しても非常に綺麗に表示される上、単純なイラストであればファイルサイズも数キロバイト程度と回線にも優しい。様々なデバイスで表示され、「ギガが減る」などが流行る現代でブログとの相性は良い。やっぱりWordPressでも投稿内でSVGをできるだけ簡便に使いたい。
GitHub Gist + RawGit + <img>
そこで、試行錯誤して、なんとかシックリくる使い方を考えた。まずSVGだが、セキュリティ上の懸念からブログサーバーにアップロードしたくないので、GitHub Gistにアップロード、というか貼り付けることにした。GitHub GistはGitHubの姉妹サービスみたいなもので、gitで文書やソースコード片を共有したり、オンライン上のメモ代わりにつかったりするサービス。SVGの中身はテキストファイルなので、コピペでアップロードができてちょうど良い。
ただ、Gistにあるファイルはプレーンテキストで配信されているので、そのままだとSVGとして使えない。そこで、RawGitを使うことにした。RawGitはGitHub上のファイルを適切なcontent-typeとセットでCDN配信してくれるサービス。これもGistのRawURLを貼り付けるだけで利用できるので楽チンだ。
これでオンライン上にSVGファイルが用意できたが、困ったことにSVGはクロスオリジンを超えて表示するのが困難だ。
なので、SVGのURLをsrcに指定したIMGタグで表示することにした。WordPressのエディタから「メディアを追加」機能をつかってSVGのURLを貼り付ければいい。ただ、ここで注意が必要なのだけど、SVGによっては画像が表示されない時がある。出力されたショートコードをみてみると、どうやらwidthとheightが”0″になっていたようだ。調べてみると、どうやらSVGのviewbox要素が適切に設定されていないとwidthとheight要素が0になる模様。 こうなった場合、<IMG>やcaptionのwidthとheightを手動で適当な値にしてやるとエディターに表示されるようになった。
あれ？手軽じゃない？
ここまですると、記事内にSVGが表示されるんだけど、冷静になってみると手軽とは言えないかもしれない。慣れちゃえば困らないけど、アイキャッチにしたり、WordPressのメディアライブラリで管理したりできないという弊害もあるわけだし。まあ、それはそれとして、SVGの利点とのトレードオフってことで我慢するよ。