SVG形式画像の作り方

SVGとは「Scalable Vector Graphics」の略で、ベクター画像を表示する技術のことを言います。「.gif」「.jpg」「.png」といった画像形式はビットマップ形式なので、画像を拡大縮小すると画質が劣化してしまいますが、SVG形式はベクター形式であるため、画像を拡大縮小しても画質が劣化することはありません。

SVGの作り方

SVG形式の画像を作成、表示する方法をいくつか見ていきます。

img要素を使う

img要素を使用してSVGを表示させるには、まずIllustratorで画像を作成してから「別名で保存」を選択し、ファイル形式を「SVG」にして保存します。そして、imgタグを記述すれば表示することができます。

<img src="sample.svg" alt="" />

SVGコードを使う

SVGのコードを直接HTML内に記述して表示させることもできます。先程と同様にIllustratorで画像を作成したら、保存する際のダイアログに「SVGコード」というボタンがあるので、そのボタンをクリックします。すると、コードが表示されるので、「<svg>～</svg>」のSVGコードをコピーしてHTML内に貼り付けます。

それぞれの画像形式にも良し悪しがあり、すべての画像をSVGにすれば良いという訳ではありませんが、とりあえずは、アイコンやロゴといった画像にはSVGを試してみるのも良いかもしれません。
高解像度ディスプレイに対応するために、2倍のサイズのJEPGやPNG画像を用意して実際のサイズに縮小して表示するといった方法もありますが、SVGであればそのようなことをする必要もありません。