【意外と歴史ある!】webデザイナーはおさえたい!SVGの基本知識

webデザインをするにあたって、あなたはどのような画像形式でデータを作成していますか?主流と言われているPSDやai、画像の書き出しはpngやjpgなど、今ではさまざまな形式で デザインデータを作成することができるようになっています。

なかでも近年話題になっているのがSVGと言われる画像形式。アニメーション業界を筆頭に、webデザインの業界にも流れ込んできているトレンドのベクターデータです。この記事を読んで、いずれ主流になる可能性が高いSVGデータの基礎知識を身につけ、いつでも柔軟に対応できるようにしておきましょう!

0-0

目次

  1.  1. SVGってなに?
  2.  2. どうしてSVGを知っておくべきなのか?
  3.  3. SVGのメリット
  4.      高解像度(RETINAディスプレイなど)に対応できる
  5.      さまざまなデザインツールで流用できる
  6.      テキストエディタで開けて編集ができる
  7.      CSS3やJavaScriptと組み合わせることも可能
  8.  4. SVGにはさらなる機能が
  9.      アニメーション
  10.      フィルター効果
  11.  5. SVGで作ってみよう!
  12.      Illustratorでの書き出し
  13.  6. SVGを使う上での注意したいところ
  14.  7. 今後どのようなタイミングでSVGに移行していくべきか
  15.  8. おわりに
  16.  

    SVGってなに?

    Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)を略してSVGと呼ばれています。写真を撮った際、初期の設定で保存されるデータにjpgやpngでの形式がありますが、こちらはビットマップデータと呼ばれる”ピクセルで表現されている画像形式”になります。それに対して、aiやSVGはベクターデータと呼ばれる”拡縮してもキレイなまま表現される画像形式”になります。

    20160823_1
    ビットマップデータ(jpg、png、BMPなど) ベクターデータ(svg、ai、sketchなど)
    繊細な表現に向いている シンプルな表現に向いている
    Illustrator、Photoshop、sketch、Xd Illustrator、Photoshop、sketch、Xd

     

    どうしてSVGを知っておくべきなのか?

    – W3Cがオープン標準として勧告しており、主流の画像形式になる可能性が高いから
    SVGは1998年にひっそりとリリースされた画像形式でした。しかし、ブラウザの対応が追いつかなかったためお蔵入りの状態に。近年、ようやくRETINAディスプレイなどの高解像度の処理が可能になったものが流通してきたため、注目されはじめたのです。

    SVGのメリット

    ■高解像度(RETINAディスプレイなど)に対応できる

    上記で説明したように、SVGはベクターデータなので拡大縮小を繰り返してもデータが劣化することはありません。レスポンシブデザインに対応するときなど、解像度を2倍で書き出すこともカンタンにできます。

    ■さまざまなデザインツールで流用できる

    PhotoshopやIllustrator、sketch、Xdなどの幅広いデザインツールに対応しているため、作業環境が違ってもデータを開くことができます。(ただし、テキストやレイヤーの順序が全く同じように反映されるわけではないので注意が必要です)

    ■テキストエディタで開けて編集ができる

    SVGで作成したベクターデータはテキストエディタで開くことができ、色の変更などの調整をすることが可能です。

    ■CSS3やJavaScriptと組み合わせることも可能

    SVGにアニメーションなどの動きをつけるために、JSやCSSを反映させたいときは「svg要素」をつかいHTML内に直接記述する方法があります。これを「インラインSVG」といいます。画像として処理したい場合はimgタグを使用し、SVGデータを読み込む方法もあります。

    SVGにはさらなる機能が

    上記のメリット以外にも、SVGにはさまざまな特徴があります。ここではよく使える機能をご紹介します。

    ■アニメーション

    SVGと組み合わせて表現できる方法は、CSS(transitionやanimation)aminate要素(smil)svgDOM+javascript の3つです。

    ↓ 「Result」の画面内の右下にある「RERUN」ボタンをプッシュすることでアニメーション「geechs magazine」の文字が浮かび上がります。

    See the Pen SVG by nomal; (@nomal) on CodePen.

    ■フィルター効果

    デザインでは頻出度の高いフィルター効果。修正が頻発するたびに書きだして反映させるのは少々手間がかかります。そんなときは、filter要素を活用して調整すると良いでしょう。

    ・ ぼかし

    2-2

    文字の可読性を高めたり、メリハリをつけるときに使うぼかし効果。画像で処理せずに使えるのはとても便利です。

    ・クリッピング

    2-3

    対応ブラウザがIE9も含まれていることから、CSSと比べ使いやすいのが特徴です。

    ・ドロップシャドウ

    2-4

    アイコンの形にそって装飾したい場合、画像の埋め込みだとフィルターがかからない場合があります。ですが、インラインSVGで再現すれば、その問題を解消することができます。

    次のページ:SVGデータをIllustratorで書き出ししてみよう

     

この記事を書いた人:nomal

nomal

大手印刷会社で求人広告(エディトリアルデザインやコピーライティング)を担当し、2年半働いたあとWebデザイナーに転身。 猫とお寿司には目がありません。イラストを描いてリフレッシュしながら楽しく過ごしてます。 Twitter:@nomal_f

関連する記事

facebook

案件情報や最新記事をお届けします。
ぜひチェックしてみてください。