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




 

先日『SVGファーストガイド』を読んでSVGのあらましを学習しました。

「SVG」とは、XMLコードで記述できるベクター形式の画像のこと。PNG・JPEGのように、ピクセルの集まりで描写するラスター形式とは異なる形式です。

 

ズバリ、ベクター形式の画像は、

拡大しても劣化しない

のが特徴。それに加えて

HTMLにSVGのコードを記述してブラウザに画像を表示できるのです。

HTML中に記述できるコードタイプのSVGを業界では「インラインSVG」と呼んでいますね。

HTML5からインラインSVGがサポートされた経緯があるため、現在はほぼすべてのブラウザでHTML中に書かれた「コードのSVG」を表示できます。

 

これはつまり、

コードで画像を表現できる

と意味します。

わざわざ画像ファイルを保存してサーバーにアップロードする必要はありません。

ただただ、適切なコードさえ記述すればいいのです。

 

はい、ということはですよ?

HTML5を活用しているはずのWordPressにもインライン SVGを記述できるはずではありませんか。

早速、検証してみました。

 

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

例として、SVGで長方形を挿入してみました。

 

うん、ぜんぜん表示できちゃってますね。

WordPressでSVGを活用するポイントは、

「テキスト編集モード」で記事を更新すること。
Image from Gyazo
決して「ビジュアル編集モード」にしてはいけません。ビジュアル編集モードにしてしまうと、これまでせっせと書いてきたSVGのコードが一瞬で消失するのでご注意くださいませ。

 

SVGの画像はいくら拡大しても劣化しません。

加えて、SVGでアニメーションの描写もできるという特性も持っています。

試しに、SVGアニメーションの下記のコードを入力してみたところ、次のようなアニメーション表現がWordPress上の記事でも可能でした。

 

表示できないと悩んでいる方はコード中に無駄な「改行」がないかチェックしてみてください。改行があるなしで表示される可能性が変わります

 

イラストレーターで作ったSVGの画像をコードで挿入してみる

ということはですよ?

イラストレーターで作ったSVGもコードでWordPressに挿入できるんでは・・・・

と可能性が広がってきます。

検証してみたところ・・・・できましたできました!

イラストレーターで書き出しする際に、形式を「SVG」に。

 Image from Gyazo

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

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

 
svg
たったこれだけの手順で、イラストレーターで作成したSVGファイルを「コード」で表現できました。

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

なぜなら、画像をファイルとして保存しなくてもよいからです。

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

結果的に画像保存用のストレージを節約できるでしょう。

 

また、SVGはベクター形式なので拡大しても劣化しない点も心強いです。

イラストレーターでイラストは作成する際は画像ファイルで書き出す必要は全くなく、

SVGをコードで抽出して、それをWordPressのテキスト編集モードで挿入すればいい、と。

さすれば「綺麗に」「美しく」劣化しない画像を記事中に挿入できると判明しました。

 

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

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

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

 

それでは!

Lin




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

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




コメントを残す

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