webで使えるベクターデータ「SVG」ってなんぞや？

こんにちは。時が流れるのは早いもので、2020年上半期の最後の1ヶ月を迎えております。じっとりとした季節になりましたが、いかがお過ごしでしょうか。
梅雨の時期は空気がモヤモヤしており、心身ともに体調を崩しやすい月と言われているので、お気をつけくださいませ。
アシスタントデザイナーの田中です。

話はうって変わりますが、「スケーラブル・ベクター・グラフィックス」という画像ファイルをご存知でしょうか。頭文字をとって通称は「SVG」とも呼ばれていますね。

説明させていただきますとSVGは「点と線を演算で表現する画像ファイル」、または「ブラウザで使えるベクターデータ」と認識されています。SVGファイルは2001年に生み出されたものですが、ベクタ形式のファイルのためラスタ形式のpngやjpgよりも拡大・縮小に対応でき、gifのようなアニメーションがcssやjavascriptで作れることから、スマホサイトが普及している昨今、ウェブ関係者の耳に入るようになりました。
今回はSVGファイルを取り上げてみます。

「SVG」の得手不得手

上記の説明だけでは拡大縮小に強くてアニメーションも作れるSVGって無敵なのでは？と思われる方もいますが、他の画像データと同じようにメリットデメリットがあります。
メリット
・拡大縮小に強いため、サイズ毎に画像を作らなくてもいい
・高解像度のディスプレイでも綺麗に見える
・cssやjsでアニメーションが作れる
・簡単な図形であればファイルサイズが小さい

デメリット
・グラデーション表現は可能なものの、写真など複雑な表現が苦手
・各ブラウザ（特にIE）の挙動を確認する必要がある
・複雑な表現になるとページ読み込みが遅くなる
・特殊フォントを使用する場合、ウェブフォントを用意するかアウトライン化が必須

「SVG」はどこで使うのがおすすめか

メリットデメリットを踏まえてどの使うのが適切なんでしょうか。
その一例を挙げてみました。
・ロゴ
・アイコン
・ボタン
・ファビコン
この4つの用途で使われることが多いと感じています。
特にここ数年の傾向としてフラットデザインが好まれており、メインビジュアルでアニメーションが流れる時もフラットなイラストが多く、ロゴもフラットデザインが採用されており、よりSVGとの相性がいい時代だなと思います。

「SVG」ファイルの制作・編集の方法

上記のように便利なsvgですが、ラスタソフトであるPhotoshopでは作成が難しいためベクタソフトを用意する必要です。
ベクタソフトの代表と言えばIllustratorですが、adobeの契約をしていない人にとっては難しい選択。そこでIllustrator以外のソフトを挙げてみました。
・sketch
・adobeXD
・figma
webデザインやUIデザインで使用されるソフトですが、3つともベクタソフトなので簡単な図形の制作や編集はできます。ただし、詳細で複雑な形のアイコンや個性のあるアイコンを制作するのは難しいので、やはりIllustratorに頼ることになるでしょう。

そのIllustratorの代わりを探してるんだよ！って方に試して欲しいのが下記のソフトになります。
Inkscape
フリーのベクタツールとして有名なソフトです。多機能で日本語対応ができており、初めて使う人でもアイコンが作成できます。
Vectr
インストールしなくてもオンライン環境さえあれば、ブラウザ上でも編集可能なベクタソフトです。ブラウザ版は英語表記なので、英語が苦手な人は慣れるまでの期間が必要ですが、インターフェイスがシンプルなので慣れれば使いやすくなります。
また、世の中にはラスタデータからベクタデータに変更してくれるツールもあります。
Googleで「SVG 変換」で検索してみるとたくさん出てくるので、試してみてください。Googleで「SVG 変換」で検索してみるとたくさん出てくるので、試してみてください。ちなみに色数が多い画像を変換するとめちゃくちゃオブジェクトが作られて編集や素材を使用する時に不便になるので変換ツールを最初に試すときは色数が少ない画像を変換してツールの癖を見てみるのがおすすめです。