HTML5もだいぶ当たり前になってきて、企業ホームページのロゴにSVG画像を使うサイトもちょくちょく目にする様になってきました。
画像編集ソフトなどでもjpegやgifやpngに加えてsvgでの出力もできるものも増えてきている様です。
※ただし、svgはビットマップ画像ではなく、イラストレータのようなパス形式の必要があります。
そんなsvgですが、ビジネスサービスサイトを作るときにかなりの確率で利用されているグラフ表示に非常に有効な描画技術でもあるので、ビジネスWEBエンジニアの人であれば、スキルを持っておくと今後便利に使えると思いますよ。
SVGのメリットデメリット
svgのメリットは画像の大きさに依存せずに、クオリティを保った画像表示が行えると言う点でしょう。
よくわからない人の為に、png画像とsvg画像を比較してみましょう。
まず、32x32サイズの画像。
png画像
svg画像
同じ画像を200x200にしてみると。
png画像
svg画像
※svg画像に対応していないブラウザの場合は正常に表示されません。
明らかに優位点がわかります。
もちろん、png画像も、サイズを大きくすれば、その分クオリティがアップするのですが、ファイル容量も増大します。
それに比べてsvg画像は、サイズは可変で、どんなサイズにしても、同じファイルサイズで保持することができます。
まさに、端末ごとにブラウザサイズが違うレスポンシブデザインにはうってつけのフォーマットですね。
しかし、そんなsvgでも、簡単な記号や線などであれば、いいのですが、複雑なデザイン画像などに関しては、作成することも難しく、容量も画像よりもはるかに重くなってしまうこともあります。
画像フォーマットの利用する用途まとめ
webサービスにおいて、svgのみを使うというという事は望ましくなく、jpegもpngもgifもそれぞれの良さがあるので、下記の様なポイントで利用するといいでしょう。
jpeg : 写真を大き目の画像で利用したい時
png : サイズ固定のドット絵（アイコンやボタンなど）で利用したい場合
gif : pngをアニメーション（複数枚のパラパラアニメ）にしたい時
svg : ベクター画像で書けるサイズ不変の画像や、グラフなどの線描画
上記の様にきちんと用途を使い分けを知っておくといいでしょう。
ブラウザサポート状況
svgの利用できるブラウザは以下のようになっています。
ほぼほぼ対応していますが、IEの10以下は使えないみたいなので、必要のある人は要注意です。
https://caniuse.com/#search=svg
IEの10以下をMSはなかったことにしようとしているようですが、世の中の企業でwindows7をバリバリ現役で使っている会社もまだまだ数多くいます。
発展性の無い企業であれば、セキュリティの為と言いつつ、IE6しか使えないと言う危篤な会社も存在するようで、古いブラウザを使う方がセキュリティホールの危険が大きい気がするんですが、多くの会社が「ルールだから・・・」という理由でブラウザ縛りがあるようです。
ビジネス領域であれば、よくある話ですが、ビジネスツールにおいて、無視できない状況です。
企業でなくても、昔買ったパソコンをそのまま使い続けているITリテラシの高く無い人も同じ状況であると言えます。
「最新のブラウザを使ってください」とか「GoogleChromeを使用してください」と言っても通じない人はたくさんいます。
IEやChromeなどのブラウザの事をインターネットと呼ぶ人要注意ですよ。
次回予告
今回のシリーズ「SVG学習」企画では、最終的にグラフ描画までを行う事を予定しています。
グラフ表示をするライブラリは、たくさんの種類が出回っているのですが、細かな用途に対応できるライブラリがなかったり、想定よりも高額な利用料だったりして、非常に非効率なので、いっそのこと自分で作ってしまうことを目的にしました。
最終的に、グラフライブラリを作って配信してみようと思います。
そして、次回は「2日目:html記述とjavascript記述の基本」をお届けします。
0 件のコメント:
コメントを投稿