SVGファイル

学習内容

• SVGファイルとは
• SVGファイルの歴史
• SVGファイルの用途
• SVGファイルのメリットとデメリット
• SVGファイルを開く方法
• SVGファイルを作成して編集する方法
• SVGファイル：よくある質問

SVGファイルとは

Scalable Vector Graphics（SVG）は、webに適したベクターファイル形式です。JPEGなどのピクセルベースのラスターファイルに対し、ベクターファイルは、グリッド上の点と線にもとづいて数式を使用して画像を保存します。つまり、SVGなどのベクターファイルは、品質を損なわずにサイズを大幅に変更できるため、ロゴや複雑なオンライングラフィックに最適です。

SVGがwebデザイナーに人気が高い理由は、そのサイズ変更機能だけではありません。SVGは、XMLコードで記述されています。つまり、あらゆるテキスト情報を、図形ではなく、そのままのテキストとして保存します。これにより、Googleなどの検索エンジンがSVGグラフィックのキーワードを読み取ることができるため、webサイトの検索ランキングを上げるために役立ちます。

SVGファイルは拡張子（.svg）で簡単に見分けることができます。

SVGファイルの歴史

1994年に、オランダのソフトウェアエンジニアであるMartijn Koster氏が初めてSVGファイル形式を提案しました。

SVGファイルの歴史は、1990年代後半までさかのぼります。この時期にWorld Wide Web Consortium（W3C）は、開発者からの、新しい形式のベクターグラフィック形式に関する提案を募集しました。競合する6件の提案が提出され、最終的なW3CのSVG形式の形成に役立ちました。

SVGは、一般的なファイル形式となるまでに時間がかかりました。2017年までは、あまりサポートされておらず、その後、最新のwebブラウザーでSVGを使用するメリットが知られ始めました。SVGファイルは、大部分のブラウザーとベクターファイル用描画アプリで簡単に処理できるため、現在は2D webサイト画像として広く使用されています。

SVGファイルのメリットとデメリット

SVGファイル形式で画像を保存する前に、SVGのメリットとデメリットを調べておきましょう。

SVGファイルのメリット

• ピクセルで構成されているラスターファイルとは異なり、SVGなどのベクターグラフィックでは、拡大や縮小をおこなっても、その解像度が常に保持されます。特定のブラウザーで表示したり、別の場所で表示するためにサイズを変更したりしたときに、SVG画質の低下を懸念する必要はありません。
• 基本的なSVGファイルの多くは、ラスター画像より小さいサイズになります。ラスター画像は、数学アルゴリズムを使用するのではなく、数多くのカラーピクセルで構成されているためです。
• SVGファイルでは、テキストがテキスト（デザインではなく）として処理されるため、スクリーンリーダーは、SVG画像に含まれるあらゆる単語をスキャンできます。これは、webページを読むために介助が必要な人々にとって、非常に便利な機能です。検索エンジンも、SVG画像テキストを読み取ったり、そのインデックスを作成したりできます。
• SVGは、JavaScriptなどのスクリプト言語を通じてインタラクティブ性をサポートし、動的で魅力的なグラフィックを実現します。
• SVGはXML言語であり、簡単に操作したり、他のwebテクノロジーと統合したりできます。

SVGファイルのデメリット

• SVGファイルは、ロゴ、イラスト、チャートなどのwebグラフィックに最適です。しかし、ピクセルを使用していないため、高画質のデジタル写真の表示には適していません。精細な写真には、一般的にJPEGファイルの方が適しています。
• SVG画像をサポートできるのは、最新のブラウザーのみです。Internet Explorer 8などの古いブラウザーでSVGファイルを使用するのは困難な場合があります。
• SVG画像に含まれるコードは、このファイル形式に慣れていないと理解しにくい場合があります。

SVGファイルを開く方法

ChromeからEdge、Safari、Firefoxに至るまで、最近では、MacまたはWindowsのすべての主要ブラウザーでSVGファイルを開くことができます。ブラウザーを起動し、ファイル／

開くをクリックして、表示するファイルを選択するだけです。これで、ブラウザーに画像が表示されます。

コンピューターで組み込みプログラムを使ってSVG画像を開くのも簡単です。ファイル名をダブルクリックすると、開くことのできるプログラムの一覧が表示されます。または、このファイルに対応しているプログラムで自動的に開きます。

SVGファイルを作成して編集する方法

Adobe Photoshopを使用する場合は、以下の手順に従ってください。

1. Photoshopで画像を作成し終わったら、ファイル／書き出し／書き出し形式をクリックします。
2. 表示されるボックス内の「ファイルの種類」ドロップダウンメニューをクリックし、「SVG」を選択します。
3. 「すべてを書き出し」を選択し、ファイルを保存します。

役に立つメモ：Photoshopはラスターグラフィックエディターであるため、SVGファイルを作成し、編集する場合は、ベクターグラフィックエディターであるAdobe Illustratorの方がよく使われます。

IllustratorでSVGファイルを作成する方法

Adobe Illustratorを使用する場合は、以下の手順に従ってください。

1. Illustratorでアートワークを作成したら、テキストを選択してアウトラインを作成します。これにより、他のコンピューターでアートワークを表示するときにフォントが置換される問題を回避できます。書式／アウトラインを作成を選択します。
2. ファイル／別名で保存を選択して、ファイルを保存します。表示されるボックス内の「ファイルの種類」ドロップダウンメニューをクリックし、「SVG」を選択します。
3. ファイル／書き出し／書き出し形式を選択し、形式として 「SVG」 を選択して、編集済みのSVGファイルを書き出すこともできます。これにより、精度や互換性などの書き出し設定を調整できます。

IllustratorでSVGファイルを編集する方法

1. ファイルを選択し、IllustratorでSVGを開きます。または、ファイル／配置を使用して、SVGファイルを既存のIllustratorドキュメントに読み込むこともできます。
2. 選択ツール（またはダイレクト選択ツール）を使用して、SVG内の個々のパス、シェイプ、グループを選択します。サイズ変更、形状変更、変形、パスの編集、色や効果の追加が可能です。