先日『SVGファーストガイド』を読んでSVGのあらましを習得しました。楽天ブックスAmazon「SVG」とは、XMLで記述できるベクター形式の画像のこと。PNG・JPEGのように、ピクセルの集まりで描写するラスター形式とは異なります。拡大しても劣化しないのが特徴。それに加えてHTML内にSVGコードを記述して画像を表示できるのです。HTML中に記述できるSVGを「インラインSVG」と呼んでいますね。HTML5からインラインSVGがサポートされた経緯があるため、現在はほぼすべてのブラウザで表示できます。これはつまり、コードで画像を表現できることと意味します。画像をサーバーにアップロードする必要はありません。適切なコードさえ記述すればいいのです。いうことはですよ?HTML5対応のWordPressにもインラインSVGを記述できるはず・・・!早速、検証してみました。例として、SVGで長方形を挿入してみました。/></svg>うん、ぜんぜん表示できちゃってますね。「テキスト編集モード」で更新すること。「ビジュアル編集モード」にしてはいけません。ビジュアル編集モードにした瞬間、SVGコードは消失するのでご注意ください。SVGはいくら拡大しても劣化しません。加えて、アニメーションも描写できる特性も持っています。下記のアニメーションコードを入力したところ、次の表現が可能でした。fill="freeze"/></circle></svg>表示できない方は、コード中に無駄な「改行」がないかチェックしてみてください。改行あるなしで表示が変わりますイラストレーターで作ったSVGの画像をコードで挿入してみるということはですよ?イラストレーターで作ったSVGもコードでWordPressに挿入できるんでは・・・・と可能性が広がってきます。検証してみたところ・・・・できましたできました!イラストレーターで書き出しする際に、形式を「SVG」に設定。オプションから「コード表示」をみると、SVGのコードが出てきます。このコードを先程と同様に記事の「テキスト編集モード」でペースト。-14)"/></svg>svgたったこれだけの手順で、イラストレーターで生み出したSVGを「コード」で表現できました。長年、ラスター形式で画像を挿入してきた身としては、非常に画期的な手法にうつります。画像を保存しなくてもよいからです。SVGコードをHTML中に記述すればいいだけです。結果的に、これまで画像保存のために食っていたストレージを節約できるでしょう。「美しく」画像を挿入できるのです。大事なことなので再度申し上げますが、ビジュアル編集モードにはくれぐれもご注意ください。その過ちを犯した瞬間、SVGコードは蒸発するでしょう。うっかりに気をつけて、WordPressでもSVGを活用してみてください。楽天ブックスAmazonそれでは!Lin著者情報ken日常の小さな学びをメモします。コメントをキャンセル12345メールアドレスは公開されることはありません。コメント氏名メールアドレス次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。