SVGファイル

SVGファイル形式は、2次元のグラフィック、グラフ、イラストをwebサイトで表示する場合によく使用されるツールです。さらに、ベクターファイルであるため、解像度をまったく損なわずに、拡大縮小できます。ここでは、SVG画像の主な機能、メリットとデメリット、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ファイルの歴史

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

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

SVGファイルの用途

Scalable Vector Graphicsは、この数年間で飛躍的な進歩を遂げました。実際のSVGの用途は、次のとおりです。

webサイトのアイコンとロゴ

デザイナーは、よくSVGを使って、ボタンなどのwebサイトアイコンや、会社のロゴを表示します。このファイル形式では、品質を損なわずに拡大縮小できるため、複数の場所と様々なサイズで表示する必要のあるグラフィックに最適です。

インフォグラフィックとイラスト

SVGファイル内ではXMLが使われているため、Googleのような検索エンジンが、テキストを多く含むチャートやグラフを読み取ることができ、検索エンジンの最適化に役立ちます。GoogleはSVG内のキーワードを検出できるため、そのwebページの検索結果ランキングが上がる可能性があります。また、さらに人々の興味を引くwebページにするために、SVGはアニメーションもサポートしています。

他のベクターファイルを見る

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

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

SVGファイルのメリット

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

SVGファイルのデメリット

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

SVGファイルを開く方法

ChromeからEdge、Safari、Firefoxに至るまで、最近では、MacまたはWindowsのすべての主要ブラウザーでSVGファイルを開くことができます。ブラウザーを起動し、ファイル／開くをクリックして、表示するファイルを選択するだけです。これで、ブラウザーに画像が表示されます。

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

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

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

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

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

SVGファイル：よくある質問

SVGファイルはアニメーションをサポートしていますか？

SVGファイル形式は静止画像専用ではありません。動きのある要素をwebグラフィックに取り入れるために役立つ様々なオンラインツールが見つかるでしょう。SVGアニメーションには、インフォグラフィックで様々なスライドを順に表示するスライドショー機能など、比較的単純な要素を含めることができます。時計の文字盤上で進む針など、動くイラストも表示できます。

SVGファイルかどうかは、どのように見分けることができますか？

SVGファイルを見分ける最も簡単な方法は、拡張子を調べることです。SVGは.svgファイルとして表示されます。また、SVGなどのベクター画像は、コンピューターの画面で200％以上拡大すると見分けることができます。ベクター画像では、鮮明な線と均質な色が保持されます。画質が荒くなることも、ぼやけることもありません。

SVGファイルはインターネットでのみ使えるのですか？

SVG画像は主にweb上で使用されていますが、オンライン環境以外でも使用されます。例えば、元のサイズが変更された場合にゆがむことはないため、SVGファイルは、Tシャツなどの衣類へのプリント用テンプレートとして便利です。多くのピクセルで構成されているJPEGファイルでは、これほど鮮明にプリントされません。

SVGファイルのサイズはどのくらいですか？

SVGファイルのサイズは、それに含まれる画像データによって異なりますが、通常は、他のほとんどのファイル形式より小さくなります。多くのパスとアンカーポイントを使用する複雑なグラフィックは、より単純ですっきりしたデザインよりも多くのストレージスペースを使用します。ファイル内に含める複雑な指示の数を最小限に抑えましょう。