SVGとは？画像の作り方や変換・編集方法、埋め込み方を徹底解説

画像ファイル形式の一つであるSVGは、拡大・縮小が画質を劣化させずに自在にできるため、レスポンシブデザインのWebページとも相性が抜群です。この記事ではSVGの概要と、画像の作り方や変換、編集、埋め込み方法を徹底的に解説します。

SVGとは？

SVG（ Scalable Vector Graphics ）とは、大きさを自由に変えられる画像形式のことです。
PNGやJPEG、GIFなどSVG以外の画像ファイルはピクセル（画素）の集まりとして表現されるため、拡大するとギザギザが目立つなど、画質が劣化してしまいます。

それに対して、SVGの画像ファイルは画像を座標と数式で表現するため、どんなサイズでも画質が劣化せず、美しい表現が可能です。

SVGが注目されるようになったきっかけ

SVGの画像形式は1998年に、HTMLやCSSなどWebで使われる技術の標準化を行う団体W3Cにより仕様が決定されました。

しかし、当初はWebブラウザ最大手だったInternet Explorerが非対応など、SVGを使えるブラウザが少なかったため、なかなか普及しませんでした。

現在ではSVGはChrome、Edge、Safafi、Firefoxなどほとんどのブラウザで使用できるようになり、さまざまなWebサイトで活用されています。

SVGとPNG、JPEG、GIFなどとの違い

SVGと、PNGやJPEG、GIFなどその他の画像形式の違いを解説します。

PNGやJPEG、GIFなどの画像形式は「ラスター形式」と呼ばれ、ピクセルを縦横に大量に並べて画像を表現するものです。

ラスター形式の画像ファイルを拡大した場合、拡大してもピクセル自体は増えないため、画質が劣化してピクセルのギザギザが見えてしまうなど不都合が生じます。

一方、SVGの画像形式は「ベクター形式」と呼ばれ、ピクセルは存在しません。直線や曲線などを座標上の数値演算で表現するため、拡大や縮小をしても画質は一切劣化しないのです。

レスポンシブデザインとの相性が抜群

近年では、閲覧ユーザーの画面サイズに合わせてWebページを表示する「レスポンシブデザイン」が採用されています。

レスポンシブデザインにおいて、スマートフォンの小さな画面とPCの大きな画面で、画像の見え方が違っては困ります。

しかし、SVG形式の画像ファイルなら、スマートフォンでもPCでも同質な画像を表示できます。SVG形式はレスポンシブデザインと、相性が良い画像形式だといえるでしょう。

SVGのメリット

SVG形式の画像ファイルにどのようなメリットがあるかを解説します。

汎用性や拡張性が高い

SVG画像のメリットとしてまず挙げられるのは、汎用性や拡張性が高いことです。

画像の拡大や縮小により画質劣化の可能性があるPNG、JPEG、GIFなどラスター形式の画像ファイルは、スマートフォン用、PC用、サムネイル用など表示するサイズごとに複数のファイルを用意する必要がありました。

それに対してSVG画像なら、どのようなサイズで表示する場合でも1つのファイルで対応が可能です。それにより、使用する画像の数が減るため、結果としてHTTPリクエスト数が削減され、Webページのレスポンス向上が期待できます。

ほかの画像ファイルよりサイズが小さいことが多い

SVG画像ファイルは、PNG、JPEG、GIFなどラスター形式の画像ファイルと比較して、多くの場合サイズが小さくなるのもメリットです。サイズが小さいことでWebサイトの読み込めが早くなるため、使用性やレスポンス向上につながります。

アニメーション表現が可能

SVGファイルを使えば、アニメーション表現も可能です。アニメーションを適切に活用すれば、直感的で理解しやすいUIやUXの構築も可能でしょう。SVGのアニメーションは、CSSやJavaScript、動画作成ソフトなどを使って表現することができます。

高度なフィルター効果が使用できる

SVGは色の調整やぼかし、シャドウその他のフィルター効果も可能です。通常、Adobe Photoshopで扱うような高度なフィルターも、SVG形式であれば数行のCSSで実現できるため、効率的にデザイン性を向上することができるでしょう。ただし、ブラウザによって表記がぶれる可能性があるため、使用する際は検討しましょう。 

▽SVGファイルに任意の濃度で「ガウスぼかし」のフィルターをかけた様子

UIパーツなどを作成できる

SVGでは曲線や直線などを自在に表現できます。この直線や曲線を、上述のアニメーションやフィルターと組み合わせれば、さまざまなUIパーツの作成が可能です。

たとえば、画像の中の特定の領域に、マウスオーバーに反応するホバー効果を付けたり、URLを指定したりすれば、ユーザーにクリックしてもらうためのボタンとしても使用できます。

画像を切り抜く表現が使える

画像を正方形や長方形以外の任意の形に切り抜く際にも、SVGを使うと便利です。HTMLで「svg」タグを直に記述して使用でき、拡大・縮小も自由にできます。

切り抜く方法は2つあり、1つは「クリッピング」と呼ばれるものです。指定した領域を不透明にして完全に取り除きます。もう1つは「マスキング」と呼ばれるもので、切り抜きの境界線にぼかしやグラデーションの効果を与えられます。

テキストデータとして扱える

SVGはテキストデータです。そのため、動的な処理が必要な場合やページロード時間を短縮したい場合には、svgタグを使用してHTMLに直に記述することもできます。また、音声読み上げソフトや検索エンジンはSVG画像に含まれる単語を読み取れるため、ラスター画像を使用するより便利なことも多いでしょう。

SVGのデメリット

以上のように多くのメリットがあるSVG形式ですが、高画質のデジタル画像には向いていません。

たとえば、風景のような高画質な画像を数値として扱うと、膨大な演算が必要となってしまうからです。高画質のデジタル画像はJPEGファイルの方が適しています。

SVGファイルの作り方

それでは、SVGファイルの作り方を解説します。イラストレーターなどの画像編集ソフトを使うのが最も一般的ですが、フリーソフトを使うことも可能です。

イラレなどの画像編集ソフトを使用する方法

SVGファイルはAdobe IllustratorやAdobe Photoshopなどの画像編集ソフトで作成できます。作り方は以下のとおりです。

1．画像を作成する

まずIllustratorやPhotoshopを使って画像を作成します。SVGは拡大・縮小が自由なため、作成画像は作業しやすい大きさの正方形にするのがおすすめです。また、フォントが含まれている場合には、フォントをシェイプレイヤーに変換する必要があります。

2．SVG形式で保存する

画像が作成できたら、「別名で保存」ダイアログボックス内のプルダウンメニュー「ファイルの種類」で「SVG」を選んで保存しましょう。以上で、SVGファイルの作成は完了です。

フリーソフトを使用する方法

IllustratorやPhotoshopを持っていなくても、無料で入手できるフリーソフトを使えばSVGファイルが作成できます。作り方は、まず画像を作成し、次にSVGで保存と、IllustratorやPhotoshopの場合と同じです。SVGが作成できるフリーソフトには以下があります。

• Inkscape
  Illustratorに匹敵するほど多くの機能が備わっています。（ただし有料版でないと利用できない機能もあります）
• Vectr
  インターフェイスがシンプルで、ビギナーにもベテランユーザーにも使いやすいでしょう。
• RollApp
  Inkscapeのブラウザベースのバージョンで、Web上でSVGが作成できます。

SVGファイルの変換方法

SVGファイルとPNGやJPEGなどのファイルの変換も可能です。フリーソフトを使用するなら、PNG／JPEGからSVGへの変換は「P2VJ」、SVGからPNGへの変換は「SVG Converter」などがあります。

また、オンラインで変換を行うツールも無料で利用可能です。検索すると多くのサービスが出てきますが、そのうち「Image Vectorizer」は、PNGやJPEG、BMPファイルをアップロードすると画像のなかの輪郭を自動的に抽出し、SVGファイルとして出力してくれます。

SVGファイルを開く方法

SVGファイルを開く方法を解説します。

SVGファイルを開くだけなら、普段使用しているブラウザGoogle ChromeやMicrosoft Edge、Internet Explorerなどが利用可能です。SVGファイルをブラウザへドラッグ＆ドロップすれば、ファイルが開かれて画像が表示されます。

ただし、SVGファイルを編集するには、前述したSVGファイルの作成方法と同様に、以下のような専用のアプリケーションが必要です。

Adobe Illustratorを使う方法

Adobe Illustratorを使用するのが、SVGファイルを開いて編集するための方法として最も一般的です。高機能なIllustratorを使えば、SVGファイルのさまざまな編集ができます。

Inkscapeを使う方法

一部無料で使用できるInkscapeを使うのも、SVGファイルの編集方法としておすすめです。InkscapeはWindows10以降のPCなら、検索窓から「Inkscape」で検索すれば、マイクロソフトストアから手軽に入手できます。

その他のフリーソフトを使う方法

Vectrなどのフリーソフトを使用してもSVGファイルの編集が可能です。RollAppを使用すれば、SVGファイルをブラウザ上で編集できます。

HTMLでSVG画像を埋め込む方法

HTMLでSVG画像を埋め込む方法を解説します。

imgタグを使用する

imgタグを使用するのが、HTMLでSVG画像を埋め込むための最も簡単な方法です。PNGやJPEGの画像を埋め込むのとまったく同様です。

CSSのbackground-imageプロパティを使用する

CSSのbackground-imageプロパティを使用して、SVGを背景画像として埋め込む方法もあります。imgタグを使用するのと似たような方法です。

svgタグを使用してインラインで埋め込む

SVGファイルはテキストデータのため、svgタグを使用すれば、HTMLのインラインに直接記述することも可能です。

objectタグを使用する

HTMLのobjectタグを使用しても、SVG画像を埋め込むことができます。

SVG画像を表示させるだけの場合は、imgタグかCSSによる方法がシンプルでおすすめです。動的な処理が必要な場合や、ページロードの時間を短縮したい場合には、objectタグを利用するのがよいでしょう。

まとめ

SVG形式の画像ファイルはピクセルを使用せず、座標と数式で画像を表現するため、拡大・縮小しても画質が劣化しません。レスポンシブデザインとの相性が良いことから、近年では幅広く活用されています。

汎用性や拡張性が高いこと、ほかの画像ファイルよりサイズが小さいことが多いこと、アニメーション表現やフィルター効果が可能なことなど多くのメリットがありますが、高画質のデジタル画像には不向きです。SVG画像を使用して、高品質なWebページを作成しましょう。

SEデザインでは、さまざまなコンテンツマーケティングの支援を行っております。貴社に最適な施策やプランをご提案させていただきますので、ぜひお気軽にお問い合わせください。