ウェブ広告 Webデザイン スマートフォン デザイン

新米エンジニア小木の議事録　vol.2 (svgについて)

どうもお久しぶりです。アクトゼロのエンジニアの小木です。
先日床に置いてあるメガネを踏んでしまいフレームが曲がってしまいました。幸いメガネを２個持っていたのでよかったのですが、1日だけいつもと違うめがねをメガネ着けていたにもかかわらず、誰にも気づかれませんでした。そんな小木さんです。

メガネの話はこれくらいにしておき今回の「新米エンジニア小木の議事録」ではボケない！早い！軽い！の三拍子！svgについて話していきたいと思います。

svg

svgとは

”Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、svg）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。 アニメーションやユーザインタラクションもサポートしている。 svgの仕様はW3Cによって開発され、オープン標準として勧告されている。”※wikipediaから引用

jpg、png、gifはビットマップ形式と言われ画像を画素の集合として扱います。ビットマップは画像を拡大していく過程で一つ一つのピクセル自体の大きさも大きくなりその拡大されたピクセルだけでは画像がボヤけているように見えるのです。
名称未設定-1_03
一方svgはというとベクタ形式と言われ画像を点、線の集合として扱います。ピクセルではなく、点や線の座標位置を演算し表した画像なのです。拡大、縮小も演算が行われて表示がされるので画像が崩れず表示することができます。
名称未設定-1

なぜsvg？

ウェブサイトなどで使われているのは主にpngやjpg、gifなどの画像使われていると思います。しかし高画質の画像であっても拡大し続けていくと画像がボヤけてきてしまうと思います。ですがsvgではボヤけることがありません。

svgのメリット

その１

しつこくなりますが、まずは何と言っても画像がボケないことでしょう。高解像度のディスプレイやスマートフォンでも画像がボケないのは企業のロゴなどを扱う時には非常に重要なことでしょう。またretinaディスプレイに対応するために画像を何枚か用意し対応することがあると思いますが、それを一枚の画像で行うことができるのはWebページの表示なども早くなり大きな利点です。

その2

svgはCSSやJavaScriptを使って要素を動かしたり特殊な効果をかけたりすることができます。画像をボカす、色相を変える、白黒にする、ドロップシャドウをかけるといったことが、後から変更できるといったことはsvgの利点といって良いでしょう。

その3

svgはファイルのサイズが軽いことです。ファイル一つ一つが軽ければウェブページの表示速度も速くなりUXも向上することでしょう。

その4

svgのプラグインの利用です。一つの例としてsvgを用いた「chartist.js」というプラグインがあります。これはsvgでグラフを簡単に描画できるライブラリとなります。レスポンシブにも対応していて円グラフ、折れ線グラフなども実装できます。他にもグラフを実装するプラグインはありますが、用途によっては、svgでファイルが軽い「chartist.js」を使用したほうが良い効果が得られることでしょう。
https://gionkunz.github.io/chartist-js/

svgのデメリット

svgを使って写真など表現することは難しいです。写真などはjpgやpngなどを利用した方が効果的でしょう。

svg画像の作り方、使い方

  1. illustrator や photoshop などのソフトを利用し.svgで画像を保存する。
  2. svg画像があるフリーの素材をダウンロードする。
    http://icooon-mono.com/　は良質なsvg画像をダウンロードでき、
    またそれらをCSS、JavaScriptを使用して色を変えたり、大きさを変更したりすることができます。
    photoshopやillustratorなどをお持ちでない場合はそちらのほうが利用しやすそうですね。
  3. 自分でsvgを書くこともできます。ぜひ「svg サンプル」で検索してみてください

実際にsvg画像を作ってみた

ここではまだsvgの画像を作ったことがない方のためにチュートリアルを行います！
（今回画像作成にはphotoshopを使用しています。Adobe Photoshop バージョン : 2017.1.1 20170425.r.252 2017/04/25:23:00:00 CL 1113967 x64）

自分の使用しているphotoshopでsvg画像を作ってみることにしました。

①

まず作りたい画像の大きさを選んで新規作成します。
01

②

文字やデザインを作ります。（メガネを作りたかったのですが、挫折しました。）
02

③

作ったレイヤーを新しいファイルの中にいれ、そのファイルの名前を変更します。このときに名前を○○○.svgという形で入力してください。
03

④

ここで画像を生成するのですが、メニューバーから[ファイル]→[アセット]→[生成]にチェックをつけます。[アセット]にチェックがついているレイヤーやファイルに拡張子がついていると自動的に画像を生成してくれます。そして生成されたアセットファイルのなかに、今まで作業した○○○.svgが保存させているかと思います。
04

おわり

今回のsvg特集はいかがでしたでしょうか。ウェブ制作をしていて画像がボヤけていることは映画を見に行ったのにメガネを忘れてしまうことくらい残念なことですよね。これからはsvgを使ってボヤけフリーで行きましょう！
ピントがバッチリ合っている小木さんでした。

関連サービス
LPO(ランディングページ最適化)

関連記事