WordPressをローカルで検証するために
MAMPを使用しているのだけれど、
これに画像形式のSVGを対応させてみました〜♪
2010年に発売されたiPhone 4に搭載され、2倍の解像度で、
特に文字の美しさを飛躍的に向上させたRetinaディスプレイだけど、
この6年でいつの間にか、更に美しい3倍の解像度へ進化してたんですね。
iPhoneもPlusで画面が大きくなりましたもんね〜（汗）。
JPGやPNG画像だと単純に3倍の大きさが必要になるのかぁ…。
本当は2.5倍だそうだけど、計算が面倒なので3倍って話になってるとか（笑）。
もちろん世の中には等倍や2倍のディスプレイも存在してるから…
等倍・2倍・3倍の3種類の画像を用意して切り替えるか、
画像のボケや歪みを無視して（苦笑）1枚の画像を使い回すか、になるんだけど、
そんな面倒な状況の中で登場したのがSVGって画像形式。
ベクター形式のSVGなら1枚の画像で全ての解像度OKって優れモノ！
話しはMAMPからどんどんズレていき（笑）…
ここ近年はスマホのシェア拡大でサイト設計も
レスポンシブが当たり前のようになってきた雰囲気だけど、
画像までキッチリ仕上げているサイトはまだまだ少ないですよね。
解像度に合わせて3種類の画像を用意してるトコなんてなかなか見ないし、
等倍（低解像度）の画像1枚をバシバシ使い回して
ボケや歪みは見なかったコトにしてるサイトの方が多い… 気がする（汗）。
世間と営業企画と制作現場がズレてるような…。
ブレイクポイントだとかCSSのテクニック、JavaScriptなどが先行し、
肝心のデザインはというと、どんな画面サイズにも対応するために
シンプルで同じようなデザインにコンテンツの流し込み…。
当初はプログラマの世界だったサイト制作にデザインが求められ、
2000年以降は流れ着いたデザイナーが席巻していた制作現場だけど、
ここにきてデザインよりも多様性や効率が優先されるようになり、
再びサイトはプログラマの元へ戻っていってる感じですね〜。
ところで…
今回のこの便利なSVGはベクター形式なので
JPGやPNG画像と比較してファイルサイズが重い重い（涙）。
このサイズの大きさがSVGを使用する壁になっていたけど、
圧縮されやっと実用レベルのサイズに縮小したSVGZの登場で
今後の普及がどーなるか楽しみですね！
あと、もう1つの注意点は、
サーバの方でSVGやSVGZを表示するための設定が必要です。
やっと本題に戻って（笑）…
MAMPでSVGを表示させるには、
アプリケーション内にあるMAMPをイジります。
１アプリケーション > MAMP > conf > apache > httpd.conf
２httpd.conf の<IfModule mime_module> 〜 </IfModule>を見つける。
「AddEncoding」で検索すると楽かも。
３AddEncodingの解説の下あたりに「AddEncoding gzip .svgz」を追加。
４MAMPを再起動。
これでMAMPでもSVGとSVGZが表示OKになりましたー！
ちなみに試したのはMAMP 3.4です。
最後に再び脱線して（苦笑）…
次期MacOSの10.12 Sierraに搭載予定なSafari 10では
Googleが開発した画像形式の「WebP」がサポートされるらしいです。
更にadobeのPhotoshop形式な「PSD」もサポート予定だとか…。
Webフォントでアイコンって手法もあるし、
ブラウザの画像形式は何でもアリの流れになってきましたね〜（笑）。
と、SVGを試してみて…
使ってるIllustrator CS6ではアートボード単位で書き出されます。
画像の大きさに合わせてアートボードを1つ1つ設定するのは
使い慣れてない手順のせいか… かなりな手間でした、はい（汗）。
COMMENTs 0