SVGファイル形式は、2次元のグラフィック、グラフ、イラストをwebサイトで表示する場合によく使用されるツールです。さらに、ベクターファイルであるため、解像度をまったく損なわずに、拡大縮小できます。ここでは、SVG画像の主な機能、メリットとデメリット、SVG形式の進化について説明します。
Scalable Vector Graphics(SVG)は、webに適したベクターファイル形式です。JPEGなどのピクセルベースのラスターファイルに対し、ベクターファイルは、グリッド上の点と線にもとづいて数式を使用して画像を保存します。つまり、SVGなどのベクターファイルは、品質を損なわずにサイズを大幅に変更できるため、ロゴや複雑なオンライングラフィックに最適です。
SVGがwebデザイナーに人気が高い理由は、そのサイズ変更機能だけではありません。SVGは、XMLコードで記述されています。つまり、あらゆるテキスト情報を、図形ではなく、そのままのテキストとして保存します。これにより、Googleなどの検索エンジンがSVGグラフィックのキーワードを読み取ることができるため、webサイトの検索ランキングを上げるために役立ちます。
SVGファイルは、その.svg拡張子で、簡単に見つけることができます。
SVGファイルの歴史は、1990年代後半までさかのぼります。この時期にWorld Wide Web Consortium(W3C)は、開発者からの、新しい形式のベクターグラフィック形式に関する提案を募集しました。競合する6件の提案が提出され、最終的なW3CのSVG形式の形成に役立ちました。
SVGは、一般的なファイル形式となるまでに時間がかかりました。2017年までは、あまりサポートされておらず、その後、最新のwebブラウザーでSVGを使用するメリットが知られ始めました。SVGファイルは、大部分のブラウザーとベクターファイル用描画アプリで簡単に処理できるため、現在は2D webサイト画像として広く使用されています。
Scalable Vector Graphicsは、この数年間で飛躍的な進歩を遂げました。実際のSVGの用途は、次のとおりです。
デザイナーは、よくSVGを使って、ボタンなどのwebサイトアイコンや、会社のロゴを表示します。このファイル形式では、品質を損なわずに拡大縮小できるため、複数の場所と様々なサイズで表示する必要のあるグラフィックに最適です。
SVGファイル内ではXMLが使われているため、Googleのような検索エンジンが、テキストを多く含むチャートやグラフを読み取ることができ、検索エンジンの最適化に役立ちます。GoogleはSVG内のキーワードを検出できるため、そのwebページの検索結果ランキングが上がる可能性があります。また、さらに人々の興味を引くwebページにするために、SVGはアニメーションもサポートしています。
SVGファイル形式で画像を保存する前に、SVGのメリットとデメリットを調べておきましょう。
ChromeからEdge、Safari、Firefoxに至るまで、最近では、MacまたはWindowsのすべての主要ブラウザーでSVGファイルを開くことができます。ブラウザーを起動し、ファイル/開くをクリックして、表示するファイルを選択するだけです。これで、ブラウザーに画像が表示されます。
コンピューターで組み込みプログラムを使ってSVG画像を開くのも簡単です。ファイル名をダブルクリックすると、開くことのできるプログラムの一覧が表示されます。または、このファイルに対応しているプログラムで自動的に開きます。
Adobe Photoshopを使用する場合は、以下の手順に従ってください。
役に立つメモ:Photoshopはラスターグラフィックエディターであるため、SVGファイルを作成し、編集する場合は、ベクターグラフィックエディターであるAdobe Illustratorの方がよく使われます。
SVGファイル形式は静止画像専用ではありません。動きのある要素をwebグラフィックに取り入れるために役立つ様々なオンラインツールが見つかるでしょう。SVGアニメーションには、インフォグラフィックで様々なスライドを順に表示するスライドショー機能など、比較的単純な要素を含めることができます。時計の文字盤上で進む針など、動くイラストも表示できます。
SVGファイルを見分ける最も簡単な方法は、拡張子を調べることです。SVGは.svgファイルとして表示されます。また、SVGなどのベクター画像は、コンピューターの画面で200%以上拡大すると見分けることができます。ベクター画像では、鮮明な線と均質な色が保持されます。画質が荒くなることも、ぼやけることもありません。
SVG画像は主にweb上で使用されていますが、オンライン環境以外でも使用されます。例えば、元のサイズが変更された場合にゆがむことはないため、SVGファイルは、Tシャツなどの衣類へのプリント用テンプレートとして便利です。多くのピクセルで構成されているJPEGファイルでは、これほど鮮明にプリントされません。
SVGファイルのサイズは、それに含まれる画像データによって異なりますが、通常は、他のほとんどのファイル形式より小さくなります。多くのパスとアンカーポイントを使用する複雑なグラフィックは、より単純ですっきりしたデザインよりも多くのストレージスペースを使用します。ファイル内に含める複雑な指示の数を最小限に抑えましょう。
一言でいうと、SVGはベクターファイルで、PNGはラスターファイルです。PNGファイルを大幅に拡大したり、縮小したりすると、ぼやけて画質が粗くなります。SVGはピクセルを使用していないため、解像度が低下することはありません。また、PNGはアニメーションをサポートしていません。