先日『SVGファーストガイド』を読んでSVGのあらましを習得しました。
「SVG」とは、XMLで記述できるベクター形式の画像のこと。
PNG・JPEGのように、ピクセルの集まりで描写するラスター形式とは異なります。
ベクター形式の画像は、
拡大しても劣化しない
のが特徴。それに加えて
HTML内にSVGコードを記述して画像を表示できるのです。
HTML中に記述できるSVGを「インラインSVG」と呼んでいますね。
HTML5からインラインSVGがサポートされた経緯があるため、現在はほぼすべてのブラウザで表示できます。
これはつまり、
コードで画像を表現できること
と意味します。
もはや画像をサーバーにアップロードする必要はありません。
ただただ、適切なコードさえ記述すればいいのです。
ということはですよ？
HTML5対応のWordPressにもインラインSVGを記述できるはず・・・！
早速、検証してみました。
WordPressにインラインSVGを挿入する方法
例として、SVGで長方形を挿入してみました。
<svg width="500" height="300"> <rect x="30" y="50" width="350" height="150" fill="#FF9933" stroke="black" stroke-width="5" /> </svg>
うん、ぜんぜん表示できちゃってますね。
WordPressでSVGを活用するポイントは、
「テキスト編集モード」で更新すること。
決して「ビジュアル編集モード」にしてはいけません。
ビジュアル編集モードにした瞬間、SVGコードは消失するのでご注意ください。
SVGはいくら拡大しても劣化しません。
加えて、アニメーションも描写できる特性も持っています。
下記のアニメーションコードを入力したところ、次の表現が可能でした。
<svg width="500" height="300"> <circle cx="250" cy="150" r="100" fill="red" stroke="orange" stroke-width="10"> <animate attributeName="cx" attributeType="xml" from="60" to="400" begin="0s" dur="5s" fill="freeze"/> </circle> </svg>
イラストレーターで作ったSVGの画像をコードで挿入してみる
ということはですよ？
イラストレーターで作ったSVGもコードでWordPressに挿入できるんでは・・・・
と可能性が広がってきます。
検証してみたところ・・・・できましたできました！
イラストレーターで書き出しする際に、形式を「SVG」に設定。
オプションから「コード表示」をみると、SVGのコードが出てきます。
このコードを先程と同様に記事の「テキスト編集モード」でペースト。
<svg id="レイヤー_1" data-name="レイヤー 1" xmlns="http://www.w3.org/2000/svg" width="282" height="282" viewBox="0 0 282 282"><title>svg</title><rect x="6" y="6" width="270" height="270" fill="#fff"/><path d="M294,26V284H36V26H294m12-12H24V296H306V14Z" transform="translate(-24 -14)"/><circle cx="92" cy="86" r="25" fill="#fff"/><path d="M116,81a19,19,0,1,1-19,19,19,19,0,0,1,19-19m0-12a31,31,0,1,0,31,31,31,31,0,0,0-31-31Z" transform="translate(-24 -14)"/><circle cx="184" cy="84" r="25" fill="#fff"/><path d="M208,79a19,19,0,1,1-19,19,19,19,0,0,1,19-19m0-12a31,31,0,1,0,31,31,31,31,0,0,0-31-31Z" transform="translate(-24 -14)"/><ellipse cx="142.77" cy="152" rx="21.77" ry="18"/><path d="M75,212s58,115,186,0" transform="translate(-24 -14)"/></svg>
たったこれだけの手順で、イラストレーターで生み出したSVGを「コード」で表現できました。
長年、ラスター形式で画像を挿入してきた身としては、非常に画期的な手法にうつります。
なぜなら、画像を保存しなくてもよいからです。
ただ、SVGコードをHTML中に記述すればいいだけです。
結果的に、これまで画像保存のために食っていたストレージを節約できるでしょう。
また、SVGはベクター形式なので拡大しても劣化しなこともあり、
「美しく」画像を挿入できるのです。
ただし、大事なことなので再度申し上げますが、
ビジュアル編集モードにはくれぐれもご注意ください。
その過ちを犯した瞬間、SVGコードは蒸発するでしょう。
うっかりに気をつけて、WordPressでもSVGを活用してみてください。
それでは！
Lin
