web関連

2014/08/14

SVG使ってみたあれこれ

svg-cover

こんにちは、名刺には書かれてないですがデザイナーのさっちゃんです。

「SVGなら解像度を気にせず使えるからファイルサイズが軽くなる!」
「これからはSVGだよね!イラレでも書き出せるし!」

というのをここ1年くらいよく聞く気がします。
でも本当にSVGっていいの?どうなの?救世主なの?
というわけで実際SVGに手を出してみて感じた諸々を記事にしてみました。

※この記事に出てくるSVGはillustratorで書きだしたものを指しています。
コードを直接記述するレベルまでは行ってないので、その旨ご了承下さい!m(_ _;)m

SVGのここがいいよね!

そもそもSVGってなんなの?はこちらをご参照下さいm(_ _)m

XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。
ベクター画像は画像を点の集合体ではなく、線や面などの図形の集合体として扱うため、見る環境に応じて最適な表示が可能となる。

出典:http://e-words.jp/w/SVG.html

要するに

拡大縮小しても荒くならない画像!

です。

今までは、スマホやタブレットの解像度が上がるとそれに合わせて大きいサイズの画像を用意しないといけませんでした。
(表示が荒くなってしまうため)

でもSVGはベクター画像なので、1個だけ用意すればいくら拡大しても荒くならない!

素晴らしいです。

これで解像度はやたら高いのにメモリがアレなAndroidでもサクサクサイトが見られるようになりそうです。

SVGの気になる点

主にファイルサイズや拡大縮小で威力を発揮しそうなSVGですが
次に使ってみてアレ?!と思った点を挙げていきます。

AndroidOS2.3系だとSVGが出ない…!

 

OS2.3系のブラウザだと、なんとSVGの表示をサポートしていないため画像の部分が「?」になってしまいます。

SVGはアイコンやちょっとしたイラストに使うことが多いため、出ないと割と痛いかも…。

因みに、2.3系なんてもう絶滅したんじゃないの?と思いきや2014年現在未だに使ってらっしゃる方が13%ほど居るIE6のような立ち位置になっています。

svg-share

出典:http://developer.android.com/about/dashboards/index.html

webでなくアプリなら、プラットフォームを絞れるので気にしなくても良いかもしれないですね。

Windows版safariに癖がある?

 

これは実は他の環境でチェックしてないので、もしかしたら問題にならない範囲かもしれないですがimgのサイズをcssで指定する場合に結構癖がありそうです。

[1]figure+imgの高さをautoにした場合

svg-css1

なんかすごい高さ出た ゚ ゚( д )!

[2]figureの高さをauto、imgの高さを指定した場合

svg-css2

なんかすごい縮んだ!((((;゚Д゚))))

[3]figureの高さを指定、imgの高さをautoにした場合

svg-css3

ちゃんと出た!・.。*・.。*(〃´∀`)・.。*・.。*

【まとめ】

svgのサイズをcssで指定するときは、imgを囲んでる要素に高さ指定をすると良さそうです。
chromeやfirefox、iOS、AndroidOS4以降の場合、上記すべてのタグで問題なく表示されました。

illustratorからSVGに書き出す時の注意点

 

最後にillustratorで書き出せるよ!と聞いて真っ先にやらかした点を記載しておきます。

illustratorではアピアランスで複数の線・塗りを指定できるのですがそのまま書き出すと思ったとおりのものにならないことがあります。

svg-illust1

ご覧のように、何も気にせず書き出すと、本来書き出したい色と違う状態で書き出されてしまいました。

svg-illust2

書きだした時のアピアランスはこんな感じ。

描画モードの変更・効果などを指定したものは書き出されません。
(SVGには乗算や効果はないので考えてみれば当然ですが)
イラレで作った画像は全部SVGで書き出せる!と思ってると思わぬ落とし穴があります。

【まとめ】

・アピアランスで、塗りを複数設定している場合はうまく書き出されない
・アピアランスの線は大丈夫
・基本単色のものに使おう!
・複雑な塗りやイラストレーター独自の効果を使ったもの、写真などは今まで通りpngとかjpgとかで

————–

いかがでしたでしょうか。
使えれば便利なSVG、AndroidOSの2.3が完全に消えるくらいには一般的な画像形式になってそうですね!

では(^O^)/