アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

IllustratorでSVGファイルを保存してみました

はじめまして、高橋まです。

以前は紙のデザインの仕事をしていましたが、
アシアルの一員となり日々webの勉強をしています。
このブログでは、web初心者の私が感動したものを
紹介していけたらいいなと思っています。

さて、今回はSVGファイルについて書きたいと思います。
今までは、webの画像といえばpng!と思っていたのですが、
ベクター形式を残したまま、ファイルの軽いフォーマットがあるよ!と
同じチームのエンジニアさんがアドバイスをくれました。
以前、アシアルデザイナー和田さんも紹介していた「SVG」です。
和田さんの記事と合わせて、読んでもらえたら嬉しいです。



SVGとはなんぞや



SVG(Scalable Vector Graphics)とは、W3CWorld Wide Web Consortium)によって
開発、メンテナンスされているフォーマット。
表示する都度、計算を行って画像を再現するベクター形式の為
拡大縮小しても画質が劣化しません。
もちろん、高解像度ディスプレイにも対応します。
そして、なんとpngファイルよりも軽量になります。




2001年9月より勧告された技術ですが、サポートしているアプリケーションが少なく
あまり知名度もなかったようです。
最近はHTML5やCSS3の普及により、モダンブラウザでは問題なく対応されているようです。
そして、アニメーションとも好相性!
最近良く見かけるアイコンが動くCSS3アニメーションもSVGの技術だったのですね。
Animated SVG Icons with Snap.svg





Illustratorからの保存方法



まずは、Illustratorsvgに保存したいオブジェクトを作ります。




別名保存からSVG(svg)を選択し、保存をクリックします。




オプションは初期設定のまま、OKをクリック。




SVGファイル保存出来ました!!





保存したSVGファイルをIllustratorで開いてみました。





パスはもちろん、
線の太さやレイヤー情報も残っていて、編集可能です。
これは、便利ですね!!


SVGファイルの使いどころ



ベクター形式は、図形の座標情報を元に描画するので、
複雑なオブジェクトや写真などの色が多いものは、容量も大きくなり使いづらいようです。
SVGファイルを最大限活用するならば、
以下のような、単純な構成で色数の少ないものがチャンスです。

・アイコン
・ロゴ
・オリジナルフォント


SVGのことを調べていると、本当に色々な可能性を感じました。
SVGを使ったアニメーションには、インタラクティブな感動があるので
今度、挑戦していきたいなと思います。

SVGと画像ファイルの容量の差を検証-2 〜PNG,GIF追記〜

こんにちは。和田です。
とうとう12月になりました。師走ですね。これからの年末、自分も頑張って走り抜けようと思います。

さて、今回は前回に引き続きといいますか、
PNG,GIFとSVGを比較した方がよいのでは!?」というご意見いただきましたので、そちらの比較をしてみようと思います。

同じ図をSVGPNG,GIF,JPGに出力して比較します。
画像の書き出し方法等は以下のとおりです。

SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はPNG、GIF、JPGにしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です
・JPGの品質は「高画質」にしています。
PNGは「PNG-24」「透明部分:なし」で書き出しています。
・GIFは「特定カラー:256」「ディザ処理アルゴリズム:誤差拡散法 100%」「透明部分:なし」で書き出しています。


◆ 規則正しい簡単な図の場合(パス数:122)


今回も規則正しい図(カラーチャートのような図)から比較してみました。以下のような2つの図です。

図−1

図−2




以下がSVG,JPEG,PNG,GIFの比較です。

サイズ(保存形式)図ー1図ー2
SVGJPEGPNGGIFSVGJPEGPNGGIF
原寸
(320×320px)
12KB25KB4KB12KB8KB49KB29KB25KB
2倍
(640×640px)
37KB5KB29KB115KB70KB45KB
3倍
(960×960px)
94KB8KB45KB188KB102KB66KB
4倍
(1280×1280px)
37KB12KB53KB225KB139KB94KB
5倍
(1600×1600px)
168KB16KB78KB332KB180KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−1については、PNGの容量が3倍の大きさまでSVGよりも小さくなりました。256色以下になるため、PNGの圧縮率が高くなったのかなと思います。

図−2ですと、今度は円の曲線部分のグラデーションが出てくるのでPNGの容量も大きくなってしまいました。代わりに画像の中ではGIFが一番小さくなりましたがSVG程の軽さまでは行きませんでした。
単純な曲線が入った図はSVGにあっているかもしれませんね。



◆ 会社案内の地図の場合(パス数:186)


次は、会社案内の図です。こちらも前回同様です。

図−3


SVGJPEG比較図
サイズ(保存形式)図ー3
SVGJPEGPNGGIF
原寸
(320×320px)
98KB33KB33KB20KB
2倍
(640×640px)
82KB74KB41KB
3倍
(960×960px)
143KB119KB66KB
4倍
(1280×1280px)
217KB164KB90KB
5倍
(1600×1600px)
291KB217KB115KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−3ですと、GIFが一番軽くなり、PNGJPEGと大して変わらない値になりました。
色数が少ないということと、横方向に同じ色が続いている事がGIFを軽くさせたのではないかと思います。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


最後は簡単な図です。こちらも前回同様です。
320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ(保存形式)図ー4
SVGJPEGPNGGIF
原寸
(320×220px)
156KB29KB33KB16KB
2倍
(640×440px)
61KB74KB37KB
3倍
(960×660px)
106KB123KB61KB
4倍
(1280×880px)
156KB168KB90KB
5倍
(1600×1100px)
213KB221KB119KB

※ グレー背景はSVGデータの以上の容量になったものです。

図−4ですと5倍の大きさにしてもGIFが一番軽くなりました。色数が少ないからだと思います。色数が増えた場合はディザの表現の限界も出てくると思いますので、そうした場合は他の画像と見比べてベストなのを選ぶのがいいかもしれません。
PNGJPEGより少し大きくなりました。



さて、前回の追記と言う形でPNGとGIFについても比較してみましたが、今回の検証で使った図だけで言えば、Webで使われるような簡単な図ではGIFが一番軽いようです。
ただ、もっといろいろな図で検証すると他の結果もでてくるかもしれません。
ですので、サイトの環境に応じてベストなものを選ぶのがいいかもしれません。
個人的には、他の媒体(印刷物など)にも利用しやすいSVGが広まってほしい気がします。そう考えるのは僕だけですかね?

次回はフォントの埋込を検証してみたいと思います。
それでは、また次回です。

SVGと画像ファイルの容量の差を検証

こんにちは。和田です。
最近、寒いですが皆様いかがお過ごしでしょうか?
自分はちょっと喉の調子が良くないです。皆様も体調にはお気をつけ下さい。

さて、今後数回に分けて、デザイナー視点でSVGファイルについて書いてみようと思います。
(あくまでデザイナー視点ですのでIllustratorで作成した図をSVG保存して、どうなるか…みたいな事を書いていきたいと思います。)

最初は、同じ図をSVGファイルと画像ファイルに書き出した際、容量にどれくらいの差がでるか試してみました。
比較の際は、以下の要領で行っています。
SVGへの書き出しは、IllustratorCS6で作成した図を別名で保存でSVG(1.1)にしています。
SVGの保存時には「使用しているフォント」のみを埋め込みにしています。
・画像への書き出しは、IllustratorファイルをPhotoshopで開き「Web用に保存」で行っています。
・作成した図は320×320pxを原寸としています。(PC用サイトの小さいサイズの図をこの程度と想定して設定しました)
・保存形式はJPG「高画質」にしています。
・書き出す画像のサイズは原寸、2倍、3倍、4倍、5倍の5種類です


◆ 規則正しい簡単な図の場合(パス数:122)


まずは、規則正しい図、今回はカラーチャートのような図で比較してみました。以下のような2つの図です。描いてみて思ったんですがなんだかユ◯クロのHEATTECHみたいになってしまいました。(汗)

図−1

図−2




以下がSVGJPEGにした場合の比較です。

サイズ保存形式図ー1図ー2
原寸
(320×320px)
SVG12KB8KB
原寸
(320×320px)
JPEG25KB49KB
2倍
(640×640px)
JPEG37KB115KB
3倍
(960×960px)
JPEG94KB188KB
4倍
(1280×1280px)
JPEG37KB225KB
5倍
(1600×1600px)
JPEG168KB332KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらい簡単な図だと、画像にするよりSVGの方が容量が軽くなるのですね。
結構オドロキです。
あと、なぜかJPEGの4倍画像(1280×1280px)の容量が小さくなります。う〜ん。なんでだろう…。こっちもオドロキです。



◆ 会社案内の地図の場合(パス数:186)


実際は、会社案内の図などはGoogleMapsを使う事が多いとは思うのですが、とりあえず試しにやってみました。

図−3


SVGJPEG比較図
サイズ保存形式地図
原寸
(320×320px)
SVG98KB
原寸
(320×320px)
JPEG33KB
2倍
(640×640px)
JPEG82KB
3倍
(960×960px)
JPEG143KB
4倍
(1280×1280px)
JPEG217KB
5倍
(1600×1600px)
JPEG291KB

※ グレー背景はSVGデータの以上の容量になったものです。

こちらは、2倍(640×640px)サイズまでは画像が軽かったです。
思ったより、SVGが軽く出来上がっていました。


◆ Webサイトにありそうな!?簡単な図の場合(パス数:529)


次は、以前に作成した図(といっても、素材を使ってチャチャッとですが)を比較してみたいと思います。Webにありそうな感じ…。微妙ですかね(汗)
この図は、320×220pxで作成しています。

図−4


SVG、画像比較図
サイズ保存形式図−4
原寸
(320×220px)
SVG98KB
原寸
(320×220px)
JPEG29KB
2倍
(640×440px)
JPEG61KB
3倍
(960×660px)
JPEG106KB
4倍
(1280×880px)
JPEG156KB
5倍
(1600×1100px)
JPEG213KB

※ グレー背景はSVGデータの以上の容量になったものです。

これくらいの図だと3倍(960×660px)くらいまでは画像の方が軽くなるのですね。ただ、今回は文字を少なめなので、フォントを埋め込みにするともっと容量の差がでるかもしれません。



と、ここまで3つの簡単な図で比較してみましたが、
ここで見る限りでは、Webで使う簡単な図は、同じサイズであれば画像の方が軽くなるようです。2〜3倍大きくても画像の方が軽いようです。
ただ、レスポンシブデザインのようにワンソースで高解像度のモバイルデバイスもターゲットにする場合、画像ですと高解像度デバイス用に3倍程度大きい画像も用意しなくてはならなくなるので、合計するとSVGファイルと同じくらいの容量になりそうです。

あと、SVGのファイルサイズはパスの数とフォントの有無で大分変わりそうですので、この辺りは次回、検証してみたいと思います。

それでは、また次回です。

WEBデザイナーに必要な3つの基礎と持っていると役立つ5つの能力

こんにちは。
アシアルWEBデザイナーの鴨田です。

最近はディレクターとしても頑張っていたりするのですが、
やはり根本はデザイナーなので、デザイナーが持ってると、
役に立つんじゃないかと個人的に思う能力について、語ってみようかと思います。

まずは基礎編として、
WEBデザイナーを目指す人が身につけておくべき必須能力についてです。


1.Photoshop

何を差し置いても、これがないと始まりませんね。
とりあえず、教則本を読むって言うのは、
使い方を覚えるのにはいいんですが、多分操作だけ覚えてもつまらないので、
個人的には、自分で写真を撮って、それを加工しまくる、
というのがいいんじゃないかと思ったりします。

まあ、Photoshopは元々フォトレタッチソフトなので、
その特性を生かすことで出来るデザインも出てくると思います。


大学生くらいの時にこういうフィルターをつくって、
なんちゃってアートっぽく見せたりしてました。


2.Illustrator

次はこれです。Photoshopと対をなすソフト。
はじめはベジエ曲線の扱いに戸惑うと思いますが、
そこはとりあえずいろんなものをトレースして、
なんとなく感覚を掴むといいと思います。

その後、ロゴを作ってみたり、自分の名刺を作ったり、
フライヤーを作ったりしてみると、
一通りの機能が使えるようになると思います。


ミュシャのコピーをする教則本があって、
自分はこれでIllstratorで何でも出来る実感と、
我慢強くコツコツやることを身につけました。


3.HTML+CSSコーディング

今は分業しているところもあるので、
必ずしも必要かと言われると、そうでもないのかも知れませんが、
これからHTML5+CSS3とかのことを考えると、
コーディングを知っていないとデザインもできないと思うので、
やっぱり必要不可欠なんじゃないかと思います。

これはもうとりあえずタグ打ちでガツガツ書いていくことが、
何よりも早く覚えられるんじゃないかと思います。
zen codingとかのプラグインを導入すると、
さらに効率が上がります。


さあ、ここからはすでにWEBデザイナーとして活躍してる人が、
次のステップに向かうのにあったら便利じゃないかと思う能力についてです。


4.イラストが描ける

WEBデザイナーというと、あまり業界に詳しくない人だと、
何かイラストとかも描けそうな気がするのですが、
きっとそうでない人のほうが多いのではないかと思います。
(もちろんイラストが書けるWEBデザイナーもいます)

とはいえ、仕事柄イラストが描けると、
わざわざイラストを外注しなくてもよくなるし、
素材が欲しい時に自分で描いてしまえば、
テイストはぴったりだし、探す時間も省けて、いいことだらけです。

かくいう自分は描けない人なので、
度々イラストを自分で描けるようになりたいと思ってしまいます。


自分でどうにかなるのはこんなレベルですね。


5.3DCGを使える

昨今、凝ったアイコンやメインビジュアル、
テクスチャなんかを作ることが多かったりするのですが、
そんなときに3DCGソフトを使えたら、
ちょっと一目引くモノが作れる気がします。

自分はかつて少しだけ3DCGをかじっていたので、
作ろうと思えば作れるのですが、
いかんせん会社にソフトがないので、
なかなか業務でそれを発揮することが出来ないのですが、
ここぞというときには、フリーのソフトででも、
何か作ってみたいとは思います。


すごそうに見えるけど、3ヶ月くらいでこのくらいのことが出来るようになります。


3DCGでロゴの元を作って、Illstraotrでベクター化というのもあります。
左はピクセルデータ、真ん中がベクターデーター、右はアウトライン。


6.映像編集が出来る

直接、WEBデザインに関係するようなことはありませんが、
ダイナミックなデザインみたいなものを知っていると、
スタティックなデザインに対して、動きを感じさせられるようになったり、
ストーリー性をもたせるのに、一役買ってくれることがある気がします。

と、これもまた昔少しだけ映像をかじっていたので、
なんとなくですが、そんな風に思います。
一ついえるのは、WEBは一人でも大抵のことが出来ますが、
映像は一人で出来ることはそこまで多くはないので、
チームワークみたいなものはとても身につくと思います。


7.コードが書ける

デザイン専業の人にはあまり役立たないかも知れませんが、
コーダーも兼任の人だと、やはりちょっとしたJavascriptとかが、
書けるか書けないかで大きく仕事のやり方も変わってくるのではないかと思います。

最近はjQueryなども流行ってますし、
プラグインやライブラリもたくさんあるので、
少し勉強すれば、それなりにインタラクティブなものができて、
そういうことまで考えたデザインが出来るようになると思います。


8.RIAを作れる

HTML5Flashを駆逐するかというと、
やっぱりまだまだそうはいかないと思いますし、
Silverlightなんかも、状況次第ではない話ではありませんし、
とにかく何か一つできると強いと思います。

でも、一からチクチク作るのがどうしてもできなくて、
なんとなく敬遠してしまってる人もいると思います。
Flash限定ではありますが、Swishとかから入ると、
易しい割に、意外といろんなことが出来るので、
Swishでも出来ることは、Swishを使った方が効率よく、
結構いいものが出来たりもします。


とまあ、こんなところでしょうか。
WEBデザイナーはなんでもできてなんぼ、みたいなところもあるので、
色々出来るとつぶしが利いていいのではないかと思いますが、
デザイン一本でやっていけるに越したことはないので、
どれか一つを極めるのが最良だと思います。

それはすでにWEBデザイナーじゃない気がしますが、
その時は堂々とコーダーですとか、エンジニアですとか、Flasherですとか、
名乗ってしまえばいいのではないかと思います。