SONICMOOV Googleページ

脱ビットマップ!SVG画像について今一度おさらいしてみる

脱ビットマップ!SVG画像について今一度おさらいしてみる

  • このエントリーをはてなブックマークに追加

デザイナーの目黒です。
気づけばプライベートで使うデバイス全てがRetinaでした。

Retinaは綺麗で見やすくて使いやすいですね。ど近眼+乱視持ちの私は非常に助かっています。
高解像度ディスプレイが当たり前の存在となり、スクリーンサイズの多様化が進むなかで、SVG画像やウェブフォントを活用するサイトがかなり増えたように感じます。

「SVGってよく耳にはするけど実際はどうなんだろう?」と思われる方の為に、今一度SVG画像についておさらいしようと思います。

SVGとは?

SVG(Scalable Vector Graphics)とはW3Cにより開発された、XMLという言語で記述されているベクターイメージです。

ベクターなので画面の拡大・縮小をしても描写の劣化が起きないため、マルチデバイス対応として注目されています。

jpg,svg比較(実寸表示)


実寸表示(100%)の場合

jpg,svg比較(200%表示)

200%表示の場合

写真等色数が多く図形にすると複雑になってしまうものはSVGに不向きなので、jpgやpngとの使い分けが必要です。

フィルター効果を使って色やぼかしなどで見た目を変えたり、CSS3やjQueryと組み合わせてアニメーション表示も可能です。 SVG単体でアニメーションできたり…。多芸多才です。
はじめてのSVG(2)
JavaScriptとCSSは不要!SVGの気持ちいいアニメーションで作られた超軽量のかわいいローディング -SVG Loaders
SVG線画が美しいリッチアニメーションの作り方
IE8以下はSVG未対応なためフォールバック画像を用意する等対策が必要となります。
Can I use…SVGをIE等のブラウザ対応を考慮して使う方法まとめ(SVGのフォールバック画像など)
また、スクリーンリーダーの対応が追いついていないので、アクセシビリティのために一手間加える必要があります。
【SVGアクセシビリティ】グラフィックスをアクセシブルにする方法
HTML5 と SVG で考える、これからの画像アクセシビリティ

続きを読む

SVG画像の作り方

Adobe Illustrator(~CC 2014)やInkscapeなどの描画ソフトで作成可能です。
また、Photoshop CC 2014のアセットでも書き出しが可能です。
(アセットに対応していない~CS6以下はsvg書き出しができません)
Photoshop CC 2014 スクリーンショット

今回はIllustrator CC 2014でSVGを作成してみたいと思います。

1.Illustratorでオブジェクトを作成

Illustratorでオブジェクトを作る

2.文字が入る場合はアウトライン化

一部のフォントは埋め込みができなかったりシステムフォントに置き換えられてしまうこともあるので、アウトライン化するのがオススメです。
オブジェクト内の文字はアウトライン化

3.オブジェクトとアートボードサイズを合わせる

SVG画像の大きさはアートボードのサイズになってしまうため、アートボードのサイズ調整をする必要があります。(意図的に余白をとりたい時は必要ないです。)
Illustratorの「オブジェクト→アートボード→選択オブジェクトに合わせる」でぴたっとあわせられます。
アートボードをオブジェクトサイズに

4.保存時の種類で「.svg」を選択

今回の詳細設定は先日参加したマイナビクリエータースキルアップセミナー「“Illustratorの達人に聞く” Webデザイナーのための仕事効率向上セミナー」で鷹野氏が使っていた設定を参考にしています。

svg詳細設定
これで完成です!

ポイント

IllustratorでSVG画像を作成するとデータ容量が肥大傾向にあるようで、それを回避するための設定やツールが下記のブログに詳しく書かれています。

SVG画像を1キロバイトでも削るダイエット術!
SVG画像を1バイトでも削るためのコードゴルフ

SVGの表示方法

SVGの表示方法は5種類。
①HTMLに直接SVGコードを直接埋め込む(インラインSVG)
②SVGスプライト(SVGスプライトの作り方は弊社うさこ氏の記事をご参照ください)
③アイコンフォントを作成して読み込む
④img要素として読み込む
⑤object要素として読み込む 各々注意すべき点はありますし長くなるので割愛しますが、表示するだけなら「⑤要素として読み込む」が一番楽でシンプルかなと思います。
④のicomoon等を使ったアイコンフォント自作も楽しいし扱いも楽ではありますが、アイコン化したオブジェクトそのものを修正する場合、一からフォントファイルを作り直さなければならないので少々手間になってしまいます。

また、アクセシビリティの問題も発生してしまいます。
どっちのベクターSHOW!! SVG vs Webフォント を比較する
CSUN 2015 『Accessible Graphics for High Pixel Density Era』セッション のご紹介 -アクセシビリティBlog

SVGのそこはかとない敷居の高さはなんだろう?

今までのビットマップ画像と違い表示方法が多い上、その魅力を存分に発揮するためにコーディングを多く必要とするのでコーディングスキルに自信がない方には敷居が高く感じてしまうかもしれません。

また、Photoshopでカンプ制作→スライス/アセット→コーディングという既存の制作フローの場合、PhotoshopのバージョンがCC 2014に限られる事や、アクセシビリティを踏まえた使用の検討を行わなければならないことなど、手間がかかる印象を受けてしまいます。

SVGを正しく使いこなすには、知っておくべきことがたくさんあるのですね…

まとめ

CSS3やSVG、WEBフォント等で脱ビットマップ化という傾向は今後も加速していくと思います。SVGに関しては過渡期ゆえの問題も色々とありますが、「まだ早い」「面倒くさそう」と二の足を踏まず、積極的にチャレンジしていかねば!と改めて思いました。 【参考サイト】
Adobe Illustrator SVG
SVG MANIAX – CSS Nite After dark7 – SlideShare

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

目黒(デザイナー)

Ingressやってます。青チームです。

関連するSONICMOOVのサービス

Webデザイナー募集!

イラストーレーター募集!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ

Webデザイナー募集!

新着の記事

mautic is open source marketing automation