WordPressにインラインSVGを挿入する方法




 

先日『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を活用するポイントは、

テキスト編集モード」で更新すること。
Image from Gyazo
決して「ビジュアル編集モード」にしてはいけません。

ビジュアル編集モードにした瞬間、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」に設定。

 Image from Gyazo

オプションから「コード表示」をみると、SVGのコードが出てきます。
Image from Gyazo

このコードを先程と同様に記事の「テキスト編集モード」でペースト。

<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を「コード」で表現できました。

長年、ラスター形式で画像を挿入してきた身としては、非常に画期的な手法にうつります。

なぜなら、画像を保存しなくてもよいからです。

ただ、SVGコードをHTML中に記述すればいいだけです。

結果的に、これまで画像保存のために食っていたストレージを節約できるでしょう。

また、SVGはベクター形式なので拡大しても劣化しなこともあり、

「美しく」画像を挿入できるのです。

 

ただし、大事なことなので再度申し上げますが、

ビジュアル編集モードにはくれぐれもご注意ください。

その過ちを犯した瞬間、SVGコードは蒸発するでしょう。
 
うっかりに気をつけて、WordPressでもSVGを活用してみてください。

 

それでは!

Lin




音生入力で楽にブログを書く技が満載!
ブログ音声入力術

音声入力の使い方から文章を書くコツまで完全網羅。ブログを書きたいすべての人向けの電子書籍




コメントを残す

メールアドレスが公開されることはありません。