ようやくSVGを扱ってみようかなと思い始めてきました。
超初心者がSVGをWordPressで扱う方法をまとめておきます。
SVGとは？
正式名称はScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）といいます。
Webで扱える、ベクタ形式の画像。
拡大してもギザギザしないニクいやつです。
以下wikipediaより。
ベクタ形式であるため、拡縮自在である。その他に、XMLベースの為、ウェブブラウザで（画像として、という意味ではなく、HTMLのソースビュー等と同様に、という意味で）閲覧でき、テキストエディタ等で編集できる。また、HTMLとの親和性により、ハイパーリンクを埋め込んだり、JavaScript 等と連携させることもできる。
SVG は、拡張の自由度が高い XML (Extensible Markup Language) で記述されており、XML ならではの各種機能を定義した要素を持つ。SVG ではそれ自身に回転・拡大・移動などの表現を定義しているため、単体で多様な表現をすることが可能である。
従来のウェブサイトでは、いわゆるインタラクティブな双方性のある画面変化を伴う表示を JavaScript や FLASH を用いてきた。HTML/XHTML に SVG を組み合わせることにより、JavaScript や FLASH を導入せずとも同様の効果が発揮されることが期待される。
XML なので、原理的には専用のアプリケーションを用いることなく通常のテキストファイルとして作製・編集できる。
これだとなんのこっちゃわからないですが、簡単に言うと画像だけどプログラムでできてるよーみたいなことです。たぶんそういう事が書いてあります。たぶん。
SVGはすべてのモダンブラウザ（「W3Cなどが定める現在のWeb標準」を満たしているブラウザ）でサポートされていますし、ディスプレイの高画質化もありこれからのスタンダードになると思われます。
SVGで画像を作ってみよう
というサイトでSVG画像を編集してダウンロードすることができます。
よく見かける流体シェイプが簡単に作れます。
色を選んでスライダーでいい感じのシェイプを作ったら右下のダウンロードボタンをクリック。
WordPressの「メディア」にSVGファイルのアップロードができない問題
見出し通りなんですが、WordPressの「メディア」にSVGファイルのアップロードができない問題が発生しました。
セキュリティの問題ということです。
SVGはJavaScriptが実行できてしまうなどさまざまなセキュリティリスクがあるのですよね。
今回はこのリスクを踏まえたうえで、WordPressでSVGファイルを使えるようにしたいと思います。
WordPressでSVGファイルをアップロードできるようにする方法
WordPressでSVGファイルをアップロードできるようにする方法は2通りあります。
プラグインを使用する方法と「functions.php」に記述する方法です。
WordPressでSVGファイルをアップロードする方法【簡単】を参考にさせていただきました。
私はCocoonで子テーマを作成しているので、子テーマののfunctions.phpに下記を記述。
function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_action('upload_mimes', 'add_file_types_to_uploads');
すると、
SVGファイルがアップロードできるようになりました。
WordPressでSVGファイルを表示させてみる
普通にimgで表示させると…
CSSで背景にしてテキストを載せると…
テキストをのせたサンプル
SVGをWordPressで扱ってみる【超初心者向け】 まとめ
WordPressでSVGを扱うにはちょっと注意が必要です。
が、覚えておいて損はないと思います。
SVGはCSSで色を変更することなどもできますので、次回やってみたいと思います。
コメント