IllustratorTweetはじめまして、高橋まです。以前は紙のデザインの仕事をしていましたが、アシアルの一員となり日々webの勉強をしています。このブログでは、web初心者の私が感動したものを紹介していけたらいいなと思っています。今回はSVGファイルについて書きたいと思います。今までは、webの画像といえばpng!と思っていたのですが、ベクター形式を残したまま、ファイルの軽いフォーマットがあるよ!と同じチームのエンジニアさんがアドバイスをくれました。以前、アシアルデザイナー和田さんも紹介していた「SVG」です。和田さんの記事と合わせて、読んでもらえたら嬉しいです。Consortium)によって開発、メンテナンスされているフォーマット。拡大縮小しても画質が劣化しません。高解像度ディスプレイにも対応します。なんとpngファイルよりも軽量になります。2001年9月より勧告された技術ですが、サポートしているアプリケーションが少なくあまり知名度もなかったようです。最近はHTML5やCSS3の普及により、モダンブラウザでは問題なく対応されているようです。アニメーションとも好相性!最近良く見かけるアイコンが動くCSS3アニメーションもSVGの技術だったのですね。Snap.svgIllustratorからの保存方法まずは、Illustratorでsvgに保存したいオブジェクトを作ります。別名保存からSVG(svg)を選択し、保存をクリックします。オプションは初期設定のまま、OKをクリック。SVGファイル保存出来ました!!保存したSVGファイルをIllustratorで開いてみました。線の太さやレイヤー情報も残っていて、編集可能です。複雑なオブジェクトや写真などの色が多いものは、容量も大きくなり使いづらいようです。以下のような、単純な構成で色数の少ないものがチャンスです。・アイコン・ロゴ・オリジナルフォントSVGのことを調べていると、本当に色々な可能性を感じました。SVGを使ったアニメーションには、インタラクティブな感動があるので今度、挑戦していきたいなと思います。byスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。