SVGファイル形式について知っておきたいこと

Scalable Vector Graphics（SVG）は、アニメーションやインタラクティブな操作に対応する2D画像形式です。SVGファイルの動作は、人間とコンピューターの両方が読み取れる記述ルールを持つXMLテキストファイルで定義されます。画像をさまざまなサイズに拡大・縮小しても、画質は変わりません。現在、主要なブラウザーはすべてSVG形式に対応しています。

ウェブサイト用の画像を作成するときは、ベクター画像とラスター画像のどちらを使うかを決める必要があります。ラスター画像はピクセルで構成され、解像度があらかじめ決まっています。そのため、ズームインしたり画像を拡大したりすると、ざらついたり、ピクセルが目立ったりします。

一方、ベクター画像は線、点、図形を使って作成されます。拡大・縮小しても画質が低下しないため、サイズを変更して使う画像に最適です。多くの印刷用グラフィックやウェブサイトでは、後からさまざまなサイズのデザインに対応できるよう、SVG形式が使われています。SVG形式は、ロゴ、タイポグラフィ、アイコン、イラストなどによく使われます。

SVGファイルのメリット

拡大・縮小への対応

SVG画像は、画面の解像度やサイズに左右されずに表示できます。拡大するとぼやけることがあるPNGやJPGとは異なり、SVG画像は高画質を保ちます。これは、画質が解像度に依存しないためです。

ウェブサイトのパフォーマンス

適切に最適化されたSVGファイルは、ほかのファイル形式よりもサイズが小さくなります。ページの読み込み時間が短くなり、ウェブサイトのパフォーマンスが向上します。訪問者がサイト内のページをすばやく移動できるため、使い勝手もよくなります。

編集のしやすさ

SVGファイルは、一般的な画像編集アプリで簡単に編集できます。Adobe Illustrator、Corel、Sketchなどがよく使われます。マークアップを直接変更できるので、テキストエディターも使えます。

アニメーションへの対応

JavaScriptなどの技術を使ってSVGファイルを操作し、よりインタラクティブで目を引く画像にできます。特にアニメーションを加えると、ウェブサイトの魅力が高まります。

スタイルの調整

SVGファイルでは、画像のスタイルを自由に選べます。線の色、サイズ、塗りつぶしの色などのプロパティを簡単に調整できます。また、画像にホバー効果を加える際に、画像スプライトを使う必要もありません。

SVGファイルのデメリット

• 2D画像にのみ対応しているため、カメラで撮影した画像には向いていません。
• WordPressサイトでSVGファイル形式を使うには、WordPressプラグイン（WP SVG）が必要です。セキュリティ上の理由から、WordPressでは明示的に許可しない限りSVG画像を使用できません。

SVGに変換する方法

Filestarを使えば、100種類以上のファイル形式からSVGへ簡単に変換できます。SVGファイル形式に対応するすべてのskillsは、こちらのリンクで確認できます。Filestarのデスクトップアプリなら、わずかな手順でSVGファイルに変換できます。Filestarアプリをダウンロードしたら、次の手順で操作してください。

• コンピューター上で変換したいファイルを右クリックし、Convert with Filestarを選択します
• 検索ボックスに「convert to SVG」と入力します
• RUNをクリックします
• SVG画像がコンピューターに自動で保存されます

または、PDFをSVGに変換する例を紹介した、以下の短い動画をご覧ください。