schoo授業感想「Retina液晶対策とSVG画像」

オンライン動画学習サービスの「schoo（スクー）」。
授業の受講感想記です。

今回の授業は、
＊SVGでWebフォント制作
https://schoo.jp/class/1968
田中先生の録画授業です。

「SVGでWebフォント制作」とのタイトルで、
◇前半：SVGのアイコンフォントについて
◇後半：SVS画像について
の二本立ての内容でした。

私が感銘を受けたのは後半の方です。
「Retina液晶」対策でSVGを使いましょうという内容でした。

Retina（レティナ）対策とSVG

アップルがiPhoneやMacBookなどに搭載しているRetina液晶は高解像度で、これでWEBサイトでJPGやPNGの画像を見ると、原寸大の画像はぼやけがちになります。

Retina対策。
これ、WEBデザイナーにとって頭の痛い問題ですね。

WEBデザインの解説書などを読むと、解決策としてあえて表示サイズの数倍の画像を載せて、CSSで縮小して表示するように書いてます。

正直ひたすら面倒くさいですｗ でも放置するわけにはいかない。

そんな貴方に「SVGファイル」というわけです。
SVGはベクター形式の画像フォーマットで、これを使うとRetinaで見てもぼやけたりしません。

SVG対応ブラウザの増加

これだけ優秀なファイル形式であるのもかかわらず、今まで使われてこなかったのは、SVG非対応のブラウザが多かったからです。

それが2016年、大半のブラウザが対応済みとなりました。
非対応は、もはや絶命寸前のIE8とアンドロイドOS2.3以下の搭載ブラウザ、さらにはガラケーのみです。

SVGの時代がやってきました。

SNSや各ブログサービスは未だ非対応

ただし、SNSや各ブログサービスの大半はまだSVGには非対応です。
アップロードしようとしても拒否されると思います。

たとえばFacebook・Twitter・はてなブログ・アメーバブログは非対応です。
WordPressもメディアライブラリから画像をアップする場合はSVGは使えません。

WordPressの場合は、通常のWEBサイトのように、直接サーバにファイルをアップしてimgタグなどで引っ張ってくれば掲載が可能となります。

このブログもWordPressで作ってますが、サーバにアップすることでSVG画像を載せることができます。

ちなみに、SVG画像はAdobeの「Illustrator」やフリーソフトの「Inkscape」などを使えば書き出すことが出来ます。

＊Inkscape
http://forest.watch.impress.co.jp/library/software/inkscape/

加速するSVG化の流れ

このSVG化の流れは加速していくでしょうね。

私もこれからWEBデザインの案件を受けた時は、イラストなどは全てSVGにしようと思ってます。

ひょっとして中には、まだWindowsXPでIE8使ってサイト見てる人もいるかもしれませんが、まあゴメンナサイとしか言いようがないです(^_^;)

schoo授業感想：まとめページ