みなさんはブログのロゴタイトルにSVG画像を使っていますか？
僕のブログでは最近、タイトルロゴの画像形式をSVGにしました！（なのでBlogの文字の色が微妙に変化しています！！）
どうです？以前のPING画像に比べてちょっとお洒落にみえないでしょうか？（自己満足）
そもそもSVGってなに？とう方のために簡単に説明しますと、SVGはillustratorなどのペイントソフトで有名なベクター画像のファイル形式のことです。
僕も普段のお絵かきにはInkscapeというフリーのドローソフトを使っているため、いつかはタイトルロゴをSVG形式にしたいと思っていました。
しかしながら残念なことに現在WordpressではSVG画像がデフォルトでサポートされていません・・・
なのでちょっと手間がかかりますが、プラグインをインストールして対応させる必要があります。
- アップロード方法については以下を参考にして下さい。
「え！！プラグイン必要とかめんどくさそう・・・」という方も多いかと思います。
この記事では僕がなぜわざわざプラグインをインストールしてまでしてSVG形式の画像をオススメするかについての理由と、WordPressでSVG画像を使用する際の注意点についてご紹介したいと思います。
ブログのタイトルロゴにSVG画像をオススメする理由
ここでは僕がこんなにもSVG画像をオススメする理由を５つ紹介いたします。
理由１：画像をアニメーションで動かせる
これが僕がオススメする一番の理由です。
動くものが大好きな僕にとってアニメーションを付けられることはとっても魅力的！
アニメーションで画像を動かしたり、色を変化させたり自由自在に画像を操ることができるんです！！
この機能が使いたいがためにSVGについて勉強したと言っても過言ではないです。
まとめ アニメーションが使えるのでブログに遊び心を加えられる
理由２：解像度に依存しないので拡大・縮小が自由自在
PNG形式やJPEG形式のようなビットマップ形式の画像ですと拡大して大きくした際に画像が荒くなってしまうことがあります。
でも安心してください！SVG形式なら画質が劣化しないのです！！！
なので高解像度のRetinaディスプレイを使っても大きく拡大してもずっと綺麗なままなんです。
SVG形式が拡大・縮小に強い理由は、ピクセル毎に表すのではなく、画像を、座標を結ぶ線などの数値データを元にして演算処理することで画像として再現する方式であるためです。
まとめ 数値データから演算により表現するため、画像を拡大しても画質が劣化しない
理由３：後からオブジェクトごとに色を変えられる
PNG形式のようなビットマップ形式画像の場合、後から色を変えることはできません。
でもSVG形式であればオブジェクト毎に後から色を変えることができるんです。
同じ画像でもオブジェクトによって色を変えたりと自由自在に色の変化を楽しむことができます。
まとめ プログラム言語であるためオブジェクトごとに自由に色を変えられる
理由４：とにかく軽量なのでサーバーに優しい！
PNG等の画像ファイルってファイルの容量が大きいですよね。
僕の以前まで使っていたPNG形式のブログのロゴタイトルと新しくしたSVG形式のブログのログタイトルを比較してみました。
- PNGファイルは55KB
- SVGファイルは 5KB
結果、10分の1以下の容量で、めちゃくちゃ軽くなっていました！！！
これでブログの動作も以前よりサクサクになるはずです。
まとめ PNG形式やJPEG形式のバイナリファイルと比較して軽量化することができる！
理由５：写真は苦手だけどロゴのような画像はSVGの得意分野
いままでSVGのメリットばかりお話していましたが、SVGにも苦手分野があります。
写真のように画素数の多い画像の場合SVGには適していません。このような画像ではPIN形式やビットマップ形式で扱う方が適していますし容量も少なくなります。
でも、ロゴ画像のような画像はSVGの力が発揮される得意分野なんです！
なのでアイキャッチのような画像ではなくロゴにSVGを使う事をお勧めします。
まとめ ロゴのような画像はSVG画像の得意分野
SVG画像使用時の注意点
ロゴでの利用に最適なSVGですがもちろん注意点もあります。
対応していないブラウザがある
IE11でもサポートされるようになり、ほとんどのブラウザで対応していますが、中には対応していないブラウザもある可能性がありますので注意が必要です。
結論
やっぱりブログのタイトルはSVGが最適です！
対応ブラウザも増えてきており個人的にますます注目度のあがっているSVG形式！
ぜひみなさんもこれを機会にSVG画像にしてみてはいかがでしょうか！
コメント