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ファイルの歴史

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ファイルのデメリット

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