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

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

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

SVGとはなんぞや

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

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

Illustratorからの保存方法

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

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

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

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

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

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

SVGファイルの使いどころ

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

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

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