WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： くりりん
カテゴリー： マークアップ >テクニック

Webサイト制作者の方なら一度は耳にしたことがある「SVG」。SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス）の略で、JPEGやPNGのような画像（ビットマップデータ）ではなくイラストレーターで扱うベクターデータの事です。
SVGで描き出した画像は画質が安定しているため、PC・スマートフォンどのデバイスにも対応するレスポンシブデザインに相性バッチリです！
そんなSVGデータの制作方法を解説していきます。

SVGを使う上でのメリット・デメリット

• メリット

先ほど挙げたように、SVGはベクターデータのため、画質が荒れたりする事がなく、綺麗に表示がされます。JPG/PNGデータでは拡大すると画質が荒くガタガタと見えていた部分もSVGにする事で解消されます！また、テキストエディタで編集可能な数式や文字を用いたデータファイルでもあるので、Web上でアニメーションの設定ができます。

• デメリット

色をたくさん使う写真には不向きです。複雑なものはPNGやGIFよりもファイルサイズが大きくなってしまう場合があるので、SVGデータを作成する時は比較的データ容量が軽く済むような、アイコンやロゴ、テキスト画像で使うなど、使い分けをしましょう。

SVGデータの制作手順

まずはIllustratorを開いて、SVGにしたいデータを用意します。今回はテキストをSVGデータに変換していきます。

次に、アウトライン化していきます。SVGで描き出しが出来るのは「パス化されているオブジェクト」のみになります。

【手順】
書式(T)→アウトラインを作成(O)

アウトライン化したことによって、このようにパス化されます。

これで描き出しまでの手順は完了です！
続いて、SVGへの描き出しをしていきます。

【手順】
ファイル(F)→Webおよびデバイス用に保存(W)

次にSVGへの設定です。

1. 描き出し形式にSVGを選択
2. 【カラーテーブル】【画像サイズ】【レイヤー】タブの2つ目、【画像サイズ】に切り替えます
3. 【アートボードサイズでクリップ】にチェックを入れると、カンバスサイズが縮小してくれます

これで、保存をすればSVGデータの完成です！
保存したデータを見てみるとこのように拡張子が.svgになっていますね。

SVGファイルをHTMLで表示する方法

SVGだからといって特別な事はありません！
imgタグへの記述は、JPEG/GIF/PNGと一緒で下記のようにファイルの場所を記述するだけです。

    <img src="logo.svg" width="150" height="35">

いつも通りのimgタグの記述と変わりません。なので、SVGデータさえ作ってしまえば簡単にWebサイトに導入できますね。
これだけで画質の荒さに悩まされる事が減るので、ぜひSVGデータについて、ふれてみてください！