SVGファイルとは何ですか（そしてそれをどのように使用しますか）？

公開: 2020-08-18

スケーラブルベクターグラフィック（SVG）は、ユニークなタイプの画像形式です。 他の種類とは異なり、SVGは表示される画像を構成するために一意のピクセルに依存しません。 代わりに、「ベクトル」データを使用します。

SVGを使用すると、任意の解像度にスケールアップできる画像が得られます。これは、他の多くのユースケースの中でもWebデザインに役立ちます。 この記事では、「SVGファイルとは何ですか？」という質問をします。 次に、フォーマットの使用方法を説明します。

それを手に入れよう！

私たちのYoutubeチャンネルを購読する

SVGファイルとは何ですか？

SVGは、ベクトルを使用して構築されたグラフィックです。 初心者の場合、ベクトルは特定の大きさと方向を持つ要素です。 理論的には、ベクトルのコレクションを使用して、必要なほぼすべてのタイプのグラフィックを生成できます。 たとえば、黒い境界線と影のある青い長方形のこの画像を撮ります。

PNG形式の青い正方形。

これは、イラストや描画に使用されるPortable Network Graphic（PNG）と呼ばれる別の種類の画像ファイルです。 ベクターグラフィックを使用して同様のものを複製する場合は、XMLコード（サイトマップで使用されているものと同じ）を使用して生成する必要があります。次のコードで同じ結果が得られる可能性があります。 

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" version="1.1"
baseProfile="full" > <rect x="0" y="0" width="60" height="60" style="stroke: blue;"/>
<rect id="myRect" x="25" y="25" rx="0.6" ry="0.6" width="150" height="150" fill="blue"
stroke="black" stroke-width="8"/>
</svg>

理論的には、このコードをHTMLファイルにドロップすると、PNGと同様の長方形のセットが表示されます。つまり、使用するブラウザーがSVGファイルをサポートしている限りです。 どちらの画像も同じように見えますが、SVGファイルには、他の形式にはない多くの利点があります。 たとえば、SVGは、スケールアップまたはスケールダウンしても画質を維持できます。

PNG長方形を拡大し続けると、ある時点で品質が低下し始めることに気付くでしょう。 より複雑なピクセルベースのグラフィックスでは、劣化がはるかに速く明らかになります。 ただし、SVGは実質的にどの解像度でも見栄えがします。

なぜSVGファイルを使用するのですか？

多くのWebサイトでは、PNGやJPEGなどの形式をほぼ同じ意味で使用しています。 ただし、SVGはそれほど用途が広いわけではありません。 ベクトルを使用して複雑な写真を再作成しようとすると、通常、大量の使用できないSVGファイルが作成されます。

ただし、SVG形式は、他の一連のシナリオ全体にとって素晴らしいオプションです。

  • ロゴデザイン。 おそらくウェブサイトやソーシャルメディア全体でロゴを再利用するので、SVGを使用すると潜在的なスケーラビリティの問題が解決されます。
  • ダイアグラム。 SVGは、図やプレーンラインに依存するその他の種類のイラストに最適です。
  • アニメーション要素。 CSSを使用してSVGをアニメーション化できます。これにより、SVGは、特にマイクロインタラクションのWebサイトデザインで役立つコンポーネントになります。
  • チャートとグラフ。 SVGを使用して、アニメーションをサポートするスケーラブルなグラフやチャートを作成できます。

SVGはXML形式を使用するため、検索とインデックス作成の両方が可能になります。 スクリーンリーダーは、正しいユーザー補助タグを使用している限り、SVGファイルを解釈できます。

最後に、SVGファイルは、他の形式の同等の高解像度ファイルよりもはるかに小さい傾向があります。 紙の上では、これは、ページサイズの一部を削減し、読み込み時間を短縮できる可能性があることを意味します。 ただし、ほとんどの画像をSVGに変換する予定がない限り、パフォーマンスの向上はおそらく最小限に抑えられます。

SVGファイルを作成する方法（2つの方法）

SVGファイルに関しては2つのアプローチがあります。 それらを最初から作成することも、既存の画像を取得して変換することもできます。 手動による方法から始めましょう。

1.SVGファイルを手動で作成する

SVGファイルの作成には、通常、以前に行ったようにベクター情報を入力する必要はありません。 これは、概念を示すための単なる例です。 代わりに、他のグラフィックと同じようにSVGを作成します。これは、デザインプログラムを使用して、ファイルをSVGとして保存することによって行います。 多くの最新のグラフィックデザインツールは、箱から出してSVGをサポートします。 いくつかのトップオプションは次のとおりです。

  • Adobe Illustrator、Photoshop、Animate、およびInDesign
  • Microsoft Visio
  • Inkscape
  • GIMP

このリストの最後の2つのオプションは、オープンソースソリューションです。 これにより、プレミアムソフトウェアにお金をかけずに、SVGの作成を試すことができます。 実際、必要なのはそれらだけかもしれません。

グラフィックデザインの経験がない場合は、Webサイト用に独自のロゴやその他の要素を作成するのは難しいでしょう。 この場合、最善の策は、既存の画像を取得してSVGに変換することです。

2.既存の画像をSVGに変換する

画像を他の形式からSVGに変換するために使用できる無料のツールがたくさんあります。 前のセクションで説明したソフトウェアのほとんどを使用すると、画像を開いてSVGファイルとして保存できます。

ソフトウェアをダウンロードしたくない場合は、オンライン変換ツールを使用することもできます。利用できるサービスはたくさんあります。 一例はVectorMagicで、これを使用してあらゆる種類のファイルタイプをSVGに変換できます。

ベクターマジックのホームページ。

ダウンロードする前にSVGファイルのプレビューが表示されるため、この特定のツールが気に入っています。 組み込みのエディターを使用して、ファイルをダウンロードする前に小さな変更や修正を行うこともできます。

SVGファイルの編集。

もちろん、これは1つのオプションにすぎません。 その他のPNGおよびJPGからSVGへのコンバーターサービスには、ConvertioおよびImg2Goが含まれます。 あなたはあなたのニーズに最も適した解決策を見つけるためにいくつかの研究をしたいと思うでしょう。

私たちの経験では、ほとんどのSVGコンバーターは同様の品質の結果を提供します。 最良の結果を得るには、使用するコンバーターは、選択した画像ほど重要ではありません。

経験則として、「単純な」画像、つまり境界線とすっきりとした線が定義された画像にSVG形式を使用することは意味があります。 画像が複雑になるほど、手動で編集したりアニメーション化したりするのが面倒な大量のSVGファイルになってしまう可能性が高くなります。

SVGファイルの使用方法（WordPressの内外）

SVGはそれほど使いにくいものではありません。 SVGファイルをWebサイトに追加するのは、コードを取得してHTMLドキュメント内の画像の移動先に貼り付けるのと同じくらい簡単です。

あなたとあなたのサイトの訪問者がSVGファイルをサポートするブラウザを使用している場合（そして最近ではほとんどの場合）、彼らは要素を見ることができます。 もちろん、SVGのアニメーション化は、CSSを使用する必要があるため、注意が必要です。

ただし、WordPressを使用している場合は、プロセスが変わります。 コンテンツ管理システム（CMS）は、すぐに使用できるSVGをサポートしていません。 SVGサポートを有効にして、ファイルをWebサイトに直接アップロードできるようにする場合は、SafeSVGなどのプラグインを使用することをお勧めします。

SafeSVGプラグイン。

WordPressでSVGサポートを手動で有効にすることも可能ですが、プロセスははるかに複雑です。 この場合、プラグインを使用する方が安全なオプションです。

結論

SVGファイルを使用するようにWebサイトを適応させることは、想像するよりもはるかに簡単です。 本当の課題は、SVGを最初から設計するか、フォーマットに変換する適切な画像を選択することにあります。 幸い、両方を実行するために使用できるツールはたくさんあります。

いくつかの優れたオプションには、Adobe Illustrator、InDesign、およびGIMPが含まれます。 これらのツールを使用して、既存の画像を作成してSVGに変換できます。 WordPressを使用している場合は、Safe SVGプラグインを使用してそれらのSVGをアップロードし、アニメーションを楽しむことができます。

SVGファイルの使用方法について質問がありますか？ 以下のコメントセクションでそれらについて話しましょう！

VectorsMarket /shutterstock.comによる記事画像のサムネイル