「SVG」とは、「Scalable Vector Graphics」の略称で、画像フォーマットの一種です。
これは、大きさを変更できるベクター画像という意味でもあります。

今回は「SVG」に焦点を当て、その概要や特徴、メリット・デメリット、ファイルの作成ツール・方法などをご紹介します。気になるポイントを一挙確認してしまいましょう。

「SVG」とは？

「SVG」とは、「Scalable Vector Graphics」の略称で、画像フォーマットの一種です。

「SVG」は、1998年、Web技術の標準化を行う非営利団体であるW3Cによって開発されました。
開発当時は、ブラウザ開発元の各社がGIFやPNGなどの競合技術を使用していたため、一般普及には至らずでしたが、今ではほぼ全てのブラウザで対応するまでになりました。

「SVG」で保存したファイルの拡張子は「.svg」または「.svgz」と表現され、無料で利用ことができます。また「SVG」ファイルはXMLに準拠しているため、テキストエディタによる画像編集が可能です。

【SVGの基礎情報】

「SVG」のブラウザの対応状況

以下は2021年11月現在、「SVG」に対応しているブラウザです。
基本的にほぼ全てのブラウザに対応していますが、「SVG」を活用する際は必ず確認しましょう。

【参考｜SVG basic support】

「SVG」の特徴・メリット

ここでは、「SVG」の特徴や使用するメリットを5点解説します。

画質が劣化しない

「SVG」は、ベクター画像のため、画像を編集しても画質が劣化しません。

通常、画像ファイルを圧縮したり、サイズを拡大・縮小すると画質が劣化することが多いです。しかし、「SVG」はそれがありません。それゆえレスポンシブデザインに最適な画像フォーマットと言えるでしょう。

※ベクター画像について
ベクター画像とは、点と線の情報を数値化して表現する画像です。
ファイルを圧縮する際、その都度情報を数値化するため、画像の大きさを変えても画質が劣化しないという特徴があります。

テキストデータを用いて画像表現ができる

「SVG」は、テキストデータを用いて画像表現することができます。

「SVG」画像を作成する際、HTMLやCSSなどのプログラミングスキルが必要になりますが、テキストデータを用いて文字装飾や背景変更などできれば、デザイン性に富んだ自由な画像作成が可能です。

また「SVG」は、縦や横の罫線だけでなく、斜線や曲線も表現できます。
曲線をUIに活かせば、任意の形状のボタンを作成できたり、地図や折れ線グラフ、円グラフなどHTML だけでは不可能な表現が可能です。

アニメーション表現を組み込める

「SVG」は、画像にアニメーション(動作)を取り入れることができます。
「SVG」でアニメーション制作の際、以下のような方法があります。

強みとなる機能はそれぞれ違うため、自分がやりやすい方法でアニメーション制作に取り組みましょう。

フィルター効果をかけられる

「SVG」は、フィルター効果をかける機能があります。

たとえば、モノクロやカラー調整、ぼかし、ドロップシャドウなどの機能があります。また、画像の合成、彩度・輝度の調整、色相の変更なども可能です。

画像の切り抜きも可能

「SVG」は、画像の切り抜きが可能です。
画像を切り抜く表現方法には、主に2種類あります。

強みとなる機能はそれぞれ違うため、画像の表現方法や状況に応じて2つを使い分けましょう。

「SVG」のデメリット

ここでは、「SVG」のデメリットについて解説します。

複雑な画像や画素の多い写真の表現には向いていない

「SVG」は複雑な計算式で画像を描画するベクター画像です。
そのため、写真などの複雑で繊細な配色や輪郭の画像描画には適していません。

複雑さを増すほど表示速度が遅くなる

複雑な色味を持つ画像を「SVG」ファイルで保存すると、JPEGやPNGよりもファイルサイズが大きくなるため、画像表示速度が遅くなります。

プログラミングスキルが必要

「SVG」はテキストデータを扱うプログラミングスキルが必要です。
コードを間違えて入力してしまうと、表示するブラウザごとに画像揺れが起こることもあるため、注意しましょう。

「SVG」ファイルの作成ツール

ここでは「SVG」ファイルの作成ツールについて解説します。
「SVG」ファイルへの変換は、Adobe IllustratorやCorelDRAWなどの画像編集ソフトがおすすめです。

Adobe Illustrator

Adobe Illustratorとは、Adobe Systems社が提供するテキストと画像を組み合わせたレイアウト作成やデザイン、線や図形を組み合わせたイラスト作成に最適なツールです。

イラスト制作はもちろん、ロゴタイプや図面、広告、パッケージなどをデザインする描画ツールソフトとしてあらゆる業界・分野で活用されています。

【Adobe Illustratorの特徴】

【公式サイト｜Adobe Illustrator】

CorelDRAW

CorelDRAWは、コーレル株式会社が開発したベクター画像の編集ソフトウェアです。

主にベジェ曲線や図形、写真等を駆使してポスターや小冊子、企画書などを作成する際に使われます。

【CorelDRAWの特徴】

【公式サイト｜CorelDRAW】

「SVG」でデザイン性あふれるWebサイトにしよう！

このページでは「SVG」の概要や特徴、メリット・デメリット、ファイルの作成ツール・方法などについて解説しました。

「SVG」はベクター画像なので、画像を拡大・縮小しても画質が劣化しません。

そのため、CSSやJavaScriptのアニメーションと相性が良く、画像に動作やぼかしなどのエフェクトを加える事ができます。

また画像完成後にカラー・サイズの変更やファイル容量の圧縮、レスポンシブ対応への調整などができるメリットもあります。

ロゴやアイコンなど単純な画像を生成したい場合や既存の画像をベクター画像に変換したい場合は、「SVG」の活用を検討してみましょう。