備忘録

WordPressでSVGファイルを使えるようにする方法

もくりんぐ
もくりんぐ
みなさ〜ん こんにちは〜、カスタマイズが大好きなもくりんぐ
@mokurin1979)です。

ココナラでロゴマークを作ってもらい、Twitterで知り合ったくまさんにサイトのヘッダーのロゴをカスタマイズしてもらいました。

ココナラで作ってもらった時の
ロゴのサイズは、

1000×1000

ヘッダーのロゴサイズは、

40×40

このサイズ変更をすると、画像がぼやけてしまいます。

これまでは、くまさんのサイトで、画像を小さくしても画質がいいSVGファイルにしてもらい提供してくれてましたが最近使えなくなってしまいました。

くまさんに頼ってばかりではいけないと思い、自分でWordPressにSVGファイルを作って入れてみました。

上手くいったので手順を書いていきたいと思います。

PNGファイルとSVGファイルの違い

もくりんぐ
もくりんぐ
実際にPNGのファイルとSVGのファイル の差をご覧ください。
PNGファイルの場合
SVGファイルの場合

同じロゴでも、綺麗なロゴだと引き締まって見えます。

ゆーちゃん
ゆーちゃん
こんなに綺麗なら全部SVGファイルの画像にしたらいいんじゃない。

この画質の差は凄いです。

しかし、SVGファイルには、メリット・デメリットがあります。
しかも、実はWordPressはSVGのファイルは非対応なんです。

WordPressが非対応な理由は、セキュリティの問題です。

悪質なJavaScriptがSVGに埋め込まれる可能性があり、SVGを表示した時に実行されてしまうということをWordPressは、問題にしています。

ゆーちゃん
ゆーちゃん
サイトのセキュリティは、大切だよね
もくりんぐ
もくりんぐ
でも、通常のSVGを使っていれば問題はないんだょ。

次は、SVGファイルについて、書いていきたいと思います。

SVGファイルのメリット・デメリット

もくりんぐ
もくりんぐ
SVGファイルについて書いていきます。

SVG は、拡張の自由度が高い XML (Extensible Markup Language) で記述されており、XML ならではの各種機能を定義した要素を持つ。SVG ではそれ自身に回転・拡大・移動などの表現を定義しているため、単体で多様な表現をすることが可能である。

従来のウェブサイトでは、いわゆるインタラクティブな双方性のある画面変化を伴う表示を JavaScript や FLASH を用いてきた。HTML/XHTML に SVG を組み合わせることにより、JavaScript や FLASH を導入せずとも同様の効果が発揮されることが期待される。

XML なので、原理的には専用のアプリケーションを用いることなく通常のテキストファイルとして作製・編集できる。

ウィキペディアより

もくりんぐ
もくりんぐ
わかりやすく書いていきます。

・SVGファイルは、XMLという言語で作られています。
SVGの拡張子をtxtファイルにすると書かれている言語が見れます。サイズや色等のカスタマイズはXMLの言語を書き換える事でできます。

・SVGファイルは、JPGやPNGのような画像を色のついたドットと呼ばれる点の羅列・集合として表現するデータ再現方式のビットマップデータで作成されているものとは違い、イラストレータで使われる形式の画像を、点の座標とそれを結ぶ線(ベクター、ベクトル)などの数値データをもとにして演算によって再現する方式のベクターデータで作成されています。

メリット・デメリット

メリット

拡大や縮小に強い。
容量が小さい。

デメリット

色や形状が複雑なものには弱い。

WordPressでSVGファイルを使う設定

もくりんぐ
もくりんぐ
下記のコードをfunctionの1番下に記載すれば準備完了です。
コード

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

SVGファイルに変換

もくりんぐ
もくりんぐ
1番悩んだのが、PNGファイルからSVGファイルに変換する作業でした。

ネットで調べるといろんな変換できるサイトがでてきますが、背景の透過が黒くなってロゴが透過になったり…。
txtファイルにして、背景の色やサイズ変換は簡単だったのですが肝心のロゴ色がどうしても変え方がわからない。

困った時は、Twitter。
検索してみると、

凄い役立つ、ツイートを発見。

試しにやってみると、サイズもリサイズできて綺麗なSVGファイルを作ることができました。

まとめ

もくりんぐ
もくりんぐ
SVGファイルは、ロゴマークなどには最適の画像ファイルだと思います。

単純なロゴマークなどの画像を大きくしたり小さくしたりして表示したい場合には、SVGファイルがとても便利です。

ロゴマークをリサイズサイズした時には、ロゴマークがブレて表示されるなど不満がありましたら是非一度お試しください。