SVGファイルの用途

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

SVGファイルはアニメーションに対応していますか？

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

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

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

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

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

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

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

SVGファイルとPNGファイルの違いは何ですか？

一言でいうと、SVGはベクターファイルで、PNGはラスターファイルです。PNGファイルを大幅に拡大したり、縮小したりすると、ぼやけて画質が粗くなります。SVGはピクセルを使用していないため、解像度が低下することはありません。また、PNGはアニメーションをサポートしていません。

SVGファイル

SVGファイル形式は、2次元のグラフィック、グラフ、イラストをwebサイトで表示する場合によく使用されるツールです。さらに、ベクターファイルであるため、解像度をまったく損なわずに拡大縮小できます。ここでは、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を使用する場合は、以下の手順に従ってください。

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

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

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

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

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

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

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