【読者限定】電動昇降デスク15%割引クーポン

WordPressでSVG形式のファイルを扱う方法を徹底解説 ロゴ画像やバナーを美しく表現できるぞ

WordPress SVGファイル利用

最近ようやく爆発的に普及してきたSVG画像。Retinaディスプレイ端末がどんどん増えていくこともあり、iPhoneやMacから自分のサイトを見ると、ロゴがぼやけていたりしていたり、バナーがぼやっとしていたりと感じる人も多くなってきたかもしれません。

画像がぼやけていたことが気になってモヤモヤしていたこともあり、今回WordPressでSVGの取り扱いが出来るように設定。

実際にSVGファイルを作って書き出し、取り込んで設定してみました。

WordPressでロゴなどを綺麗に表示させたい人は是非チェックしてね!

NORI

SVGファイルとは

Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス、SVG)は、XMLをベースとした、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 SVGの仕様はW3Cによって開発され、オープン標準として勧告されているベクター画像であり、Retinaディスプレイ対応サイトなどでは頻繁に利用されています。

SVGは、最初に述べたようにベクター画像のフォーマットです。ベクター画像に対して、PNGやJPEGのような画素(ピクセル)で構成する画像形式を「ラスター画像」と呼びます。

ピクセルの集合によって表現されるラスター画像の場合、拡大するとぼやけた表示になってしまいますが、ベクター画像の場合はピクセルの概念が無いため、どんなに拡大・縮小してもくっきりとした表示が保たれます。

SVGファイル 対応ブラウザのシェア率

Can I useというサイトで現在のSVG対応ブラウザのシェア率が確認できます。

http://caniuse.com/#search=svg

SVGファイル ブラウザ対応

IE8やAndroid Browser4.3以外では、ほぼ表示対応しています。このサイトへのアクセス解析状況も踏まえ画像をSVGに切り替えても問題ないと思い導入に踏み切りました。

これが2、3年前だったらまだ考えてたかもしれませんね。

WordPressでSVGをアップロードできるよう設定

通常のままではWordPressでSVGファイルを取り扱えず、メディアからのアップロードができず、以下のような形でエラーがでるはずです。

メディアライブラリsvg

SVGファイルをアップするには、functions.phpへちょっとした追記設定が必要になってきます。

お使いのテーマのfunctions.phpに下のコードを追記してください。そうすると「メディア」からJPG・PNGのように追加が可能となります。

functions.phpへの追記

コード
function custom_mime_types( $mimes ) {
	$mimes['svg'] = 'image/svg+xml';
	return $mimes;
}
add_filter( 'upload_mimes', 'custom_mime_types' );

.htaccessへの追記

また、SVGの表示にはサーバー側の設定を変更する必要があります。.htaccessに以下のコードを書き加えてください。

コード
AddType image/svg+xml .svg
メディアからアップロードして「このファイルタイプはセキュリティの観点から許可されていません。」というエラー表示がでる場合は設定が間違っている可能性が高いので見直してみましょう。

NORI

functions.phpに記載しなくても変更できる方法ってあるのかな?
functions.php を安全に管理・追加できるプライグイン「Code Snippets」を使うと便利だよ!

NORI

WordPress おすすめプラグイン code snippets 設定方法 WordPressの functions.php を安全に管理・追加できるプライグイン「Code Snippets」

SVGファイルとpngファイルの見え方

iPhone6でキャプチャーをとって比べてみたロゴをpng形式とsvg形式で書き出して設定したイメージ画像です。

左がpng形式で書き出した画像、右がsvg形式で書き出した画像。この時点ですでに違いは明確です。左(png書き出し)はやはり輪郭がぼんやりしているのに対し、右(svg書き出し)はハッキリくっきりしてる印象です。

チェックしてみたのがバナーのsvgでの書き出しの違い。検証端末はRetinaディスプレイでのMacbook Proでのキャプチャー画像です。

上がpng形式で書き出した画像、下がsvg形式で書き出した画像。

こちらも違いは明確です。文字やロゴがハッキリくっきりしている印象です。

Macbook ProでのSVGファイルの見え方

Retinaディスプレイでの表示画像のキャプチャーになります。

png形式で書き出した画像
png

svg形式で書き出した画像
svg

ここまではっきりでるとは思ってもみなかったので、Retinaディスプレイで見たときの感動といったらもう・・・・。

ソフトを使ったSVGファイルの書き出し方

タイトル
svgでの書き出しにはillustratorやPhotoshopなどのソフトが必要となります。

特に指定がなければ以下の画像のような設定で書き出しをしていれば表示されます。

バナーなどで画像などを入れている場合については画像の場所リンクではなく、埋め込みにチェックを入れてないと画像が抜けて書き出されてしまうので注意してください。

svg

いままでpng書き出しとかで対応して満足していた自分がおりましたが、実際のところはRetinaディスプレイが広まってきたこともあり、ここ最近の端末進化と共に画像やロゴのぼやっとした感じが気になっておりました。

WordPress SVGファイル利用 おすすめプラグイン

WordPressでSVGファイルを利用するのに簡単なプラグインはこちら。

SVG Support
SVG Support
Developer: Benbodhi
Price: Free
Safe SVG
Safe SVG
Developer: Daryll Doyle
Price: Free
WordPress プラグインのインストール方法がわからない場合、こちらの記事を参考にしてね!

NORI

WordPress 超入門 【初心者でも安心】WordPress プラグインのインストール方法を動画で解説

WordPress SVGファイル取扱い方法のレビューまとめ

本記事は、WordPressを使ってSVGファイルを取扱い可能にする方法についての解説記事です。

今回自分で実証してみた結果からわかったことは、今後はsvgを積極的に使っていこう!ということころでしょうか。

設定したことで気持ち的にすっきりしたので、今後はきれいな画像を表示させるように心がけていければと思います。
WordPressでSVGの取り扱いを検討していたり、悩んでいる人がいれば是非チャレンジしてみてください。表示の美しさの違いに驚きます!

以上、NORI(@norilog4)でした。

0 0 評価
記事の評価
guest
0 件のコメント
Inline Feedbacks
全てのコメントを見る