WordPressでSVGアニメーションを挿入したい（インラインでは難しい...？）

WordPressで記事を書いていて、動くSVGを挿入するのに苦戦したので、そのメモを残します。結果としては、『SVG Support』というプラグインを導入することと、SVGのanimateタグを使うことによって、WordPressでも動くSVGアニメーションを表示できるようになりました。

こちらのnoteでは、SVGアニメーションを表示できるまでに苦戦した原因と、その解決策についてまとめていきます。

WordPressバージョン : 4.9.10
テーマ :  賢威7.1 クール版

WordPressでインラインSVGがうまく記述できない

WordPressの投稿画面で、テキストエディタから直接SVGを記述して[プレビュー]ボタンを押すと、プレビュー画面ではうまく表示してくれます。しかし、ビジュアルエディタに切り替えると、先ほど記述したはずのSVG要素が消えてしまいます。

どうやらこれはWordPressの仕様のようです。SVGは非常に便利ながらもXML形式のため、使い方を誤ってしまうとセキュリティが担保されなくなることから、WordPressでは標準サポートされていません。

インラインでSVGを記述できるよう、functions.phpをいじってみたりしましたが、結局うまくいかず...。

SVGメディアを追加できない

「それならSVGファイルをアップロードして表示するか」と思い、投稿画面の[メディアを追加]ボタンからSVGファイルをアップロードしようと試みましたが...

考えてみれば当然ですよね。インラインSVGが記述できなくても、SVGをアップロードできてしまうなら、結局脆弱的になってしまいます。

しかし、このSVGファイルのアップロードを可能にしてくれるプラグインがありました。『SVG Support』というプラグインです。

このプラグインを有効化するだけで、SVGをアップロードすることが可能になります。どうやってSVGアップロードを可能にしているかは全く未知ですが...。

SVG+CSSではアニメーションできない

最初はSVGにカスタムなclassをあらかじめ割り振ったものをアップロードし、それを投稿ページから個別CSS設定のkeyframesでアニメーションさせようと考えていました。しかし、プレビューしてみると全く動いてくれません。開発者ツールを見てみると...。

アップロードしたSVGファイルは、<img>タグによって読み込まれています。これが原因で、CSSのkeyframesが適用されていませんでした。

通常、フロント側からSVGを表示する方法としては、以下の方法があります。

・HTML内に直接SVGを記述する
・<img>タグで表示する
・<object>タグで表示する
・JavaScriptで表示する
・CSSのbackground-imageで表示する

しかし、WordPressの投稿という制約上、SVG+CSSでアニメーションを実現することは難しいようです（何か方法がある場合は教えていただけると幸いです）。

これらを考慮した上で、最終的な方法としては、SVGファイル内に<animate>タグを用いることでアニメーションを実現しました。

SVGのanimateタグでSVGアニメーションファイルを作成

最初からこの方法を思いついていれば何なりとWordPressでSVGアニメーションを表示することができましたが、SVGよりもCSSの方が慣れていたため思いつきませんでした。

以下のようなSVGファイルを作成し、WordPressでアップロードします。

<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" width="600px" height="200px" viewBox="0 0 60 20" fill="#FFFFFF" stroke="#48595A" stroke-width=".5" stroke-linecap="round" stroke-linejoin="round"><g class="g1"><circle cx="1" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="1; 11; 1;" repeatCount="indefinite"></animate></circle><circle cx="1" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="1; 11; 1;" repeatCount="indefinite"></animate></circle><circle cx="1" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="1; 11; 1;" repeatCount="indefinite"></animate></circle><circle cx="1" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="1; 11; 1;" repeatCount="indefinite"></animate></circle><circle cx="1" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="1; 11; 1;" repeatCount="indefinite"></animate></circle></g><g class="g2"><circle cx="7" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="7; 17; 7;" repeatCount="indefinite" begin=".25s"></animate></circle><circle cx="7" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="7; 17; 7;" repeatCount="indefinite" begin=".25s"></animate></circle><circle cx="7" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="7; 17; 7;" repeatCount="indefinite" begin=".25s"></animate></circle><circle cx="7" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="7; 17; 7;" repeatCount="indefinite" begin=".25s"></animate></circle><circle cx="7" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="7; 17; 7;" repeatCount="indefinite" begin=".25s"></animate></circle></g><g class="g3"><circle cx="13" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="13; 23; 13;" repeatCount="indefinite" begin=".5s"></animate></circle><circle cx="13" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="13; 23; 13;" repeatCount="indefinite" begin=".5s"></animate></circle><circle cx="13" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="13; 23; 13;" repeatCount="indefinite" begin=".5s"></animate></circle><circle cx="13" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="13; 23; 13;" repeatCount="indefinite" begin=".5s"></animate></circle><circle cx="13" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="13; 23; 13;" repeatCount="indefinite" begin=".5s"></animate></circle></g><g class="g4"><circle cx="19" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="19; 29; 19;" repeatCount="indefinite" begin=".75s"></animate></circle><circle cx="19" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="19; 29; 19;" repeatCount="indefinite" begin=".75s"></animate></circle><circle cx="19" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="19; 29; 19;" repeatCount="indefinite" begin=".75s"></animate></circle><circle cx="19" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="19; 29; 19;" repeatCount="indefinite" begin=".75s"></animate></circle><circle cx="19" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="19; 29; 19;" repeatCount="indefinite" begin=".75s"></animate></circle></g><g class="g5"><circle cx="25" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="25; 35; 25;" repeatCount="indefinite" begin="1s"></animate></circle><circle cx="25" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="25; 35; 25;" repeatCount="indefinite" begin="1s"></animate></circle><circle cx="25" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="25; 35; 25;" repeatCount="indefinite" begin="1s"></animate></circle><circle cx="25" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="25; 35; 25;" repeatCount="indefinite" begin="1s"></animate></circle><circle cx="25" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="25; 35; 25;" repeatCount="indefinite" begin="1s"></animate></circle></g><g class="g6"><circle cx="31" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="31; 41; 31;" repeatCount="indefinite" begin="1.25s"></animate></circle><circle cx="31" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="31; 41; 31;" repeatCount="indefinite" begin="1.25s"></animate></circle><circle cx="31" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="31; 41; 31;" repeatCount="indefinite" begin="1.25s"></animate></circle><circle cx="31" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="31; 41; 31;" repeatCount="indefinite" begin="1.25s"></animate></circle><circle cx="31" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="31; 41; 31;" repeatCount="indefinite" begin="1.25s"></animate></circle></g><g class="g7"><circle cx="37" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="37; 47; 37;" repeatCount="indefinite" begin="1.5s"></animate></circle><circle cx="37" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="37; 47; 37;" repeatCount="indefinite" begin="1.5s"></animate></circle><circle cx="37" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="37; 47; 37;" repeatCount="indefinite" begin="1.5s"></animate></circle><circle cx="37" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="37; 47; 37;" repeatCount="indefinite" begin="1.5s"></animate></circle><circle cx="37" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="37; 47; 37;" repeatCount="indefinite" begin="1.5s"></animate></circle></g><g class="g8"><circle cx="43" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="43; 53; 43;" repeatCount="indefinite" begin="1.75s"></animate></circle><circle cx="43" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="43; 53; 43;" repeatCount="indefinite" begin="1.75s"></animate></circle><circle cx="43" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="43; 53; 43;" repeatCount="indefinite" begin="1.75s"></animate></circle><circle cx="43" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="43; 53; 43;" repeatCount="indefinite" begin="1.75s"></animate></circle><circle cx="43" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="43; 53; 43;" repeatCount="indefinite" begin="1.75s"></animate></circle></g><g class="g9"><circle cx="49" cy="5" r=".5"><animate attributeName="cx" dur="1.5s" values="49; 59; 49;" repeatCount="indefinite" begin="2s"></animate></circle><circle cx="49" cy="7.5" r=".5"><animate attributeName="cx" dur="1.5s" values="49; 59; 49;" repeatCount="indefinite" begin="2s"></animate></circle><circle cx="49" cy="10" r=".5"><animate attributeName="cx" dur="1.5s" values="49; 59; 49;" repeatCount="indefinite" begin="2s"></animate></circle><circle cx="49" cy="12.5" r=".5"><animate attributeName="cx" dur="1.5s" values="49; 59; 49;" repeatCount="indefinite" begin="2s"></animate></circle><circle cx="49" cy="15" r=".5"><animate attributeName="cx" dur="1.5s" values="49; 59; 49;" repeatCount="indefinite" begin="2s"></animate></circle></g></svg>

アップロードしたファイルを投稿記事内に挿入するだけで、アニメーションするSVGを表示することができました。これができれば、自由に作成した動くSVGファイルをWordPressでも表示できるようになります。

まだまだWordPressの勉強も進んでいないことが浮き彫りになりました。これを実現するまで丸1日かかってしまいました。WEBマスターへの道は程遠い...。