開発者向けSVG：基本、メリット、デメリットを理解する

公開: 2020-02-27

グラフィックは、Webサイトに独自の表現をもたらすだけでなく、開発者が深遠なアイデアや概念をユーザーに簡単に伝えるのに役立ちます。 これはインターネット上の重要な要素であり、1999年以降、スクリプト可能になりました。これにより、Web上での画像のより複雑な表示が可能になります。

Web開発の重要な側面として、現在のWebグラフィックス要件にレベルアップすることを目指すプログラマーは、少なくとも、開発者向けのSVGの基本概念を理解する必要があります。

クリックしてツイート

さまざまなラスターイメージファイルタイプ（JPG、PNG、およびGIF）の使用に精通している場合があります。 少し思い出してみましょう。 256色（8ビット）をサポートするGIF（Graphic Interchange Format）は、アルファ透明度を含まない、アニメーションと透明度の優れた形式です。 PNG（Portable Network Graphic）形式は、アニメーションが必要ない場合、1600万色（24ビット）以上のサポートとすべてのタイプの透明度を備えており、はるかに優れています。

Web JPGまたはJPEG（Joint Photographic Experts Group）で最も広く使用されている画像形式は、主に圧縮可能であるため、1600万色以上をサポートしています。 グレースケールの場合はピクセルあたり24ビットまたは8ビットですが、アニメーションまたは透明度はサポートされていません。 したがって、JPGは、開発者が静止写真に使用する主要なグラフィック形式です。 ビットマップ（BMP）は通常、Webの画像形式ではないため、ここでは触れませんでした。 BMPは、画像内の各ピクセルの正確なデータを保存します。これにより、ファイルが非常に大きくなり（同じ解像度のJPGの150倍以上のサイズ）、Webサイトのグラフィックスに最適です。

これらの解像度に依存するグラフィックス形式は、主に適切に使用すると優れています。 ただし、これらはすべて共通の欠点を共有しているため、Web用の唯一のベクター画像形式であるSVGが導入されました。

SVGとは何ですか？

Scalar Vector Graphics（SVG）は、パス、線、円、パターン、テキストの色などの2次元グラフィックスを記述するExtensible Markup Language（XML）ベースの画像形式です。より簡単な定義では、画像形式を指します。 2次元をサポートし、その全体の動作と存在はXMLテキストファイルによって制御されます。

開発者は、ネストされた変換、フィルター効果、アニメーション、JavaScriptやCSSなどの他の言語との対話性など、SVGの多数の強力な機能をさらに活用できます。

もう1つの興味深い機能は、そのスケーラビリティです。 解像度を失うことなく、SVG画像を任意の縮尺で撮影できます。 これは、SVGが、各ピクセルをペイントする色を定義することによって画像をレンダリングするラスターイメージ形式のようにピクセルではなく、形状、数値、および座標でイメージをレンダリングするためです。

SVGイメージを作成する方法と、プロジェクトでSVGの使用を検討する必要がある理由のいくつかを見てみましょう。

SVG画像の作成方法

SVG画像は、任意のテキストエディタを使用して作成できますが、プロセスは少し技術的であり、特に複雑な形状を作成する場合は、設計と数学の知識が必要です。 コードの行だけを使用して、キャンバス上に飛行機を描くことを想像してみてください。 もっと簡単な方法もありますが、これを使ってSVGの基本的な概念を理解しましょう。

SVGグラフィック要素を使用して、テキストエディタでSVG画像を作成します。 このプロセスでは、グラフィック要素を<svg>タグと</ svg>タグ内に挿入し、座標、寸法、色などを指定します。たとえば、<rect>要素を使用して、次のような長方形を描画できます。次の例。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

上記のコードは、.svgファイルとして保存し、ブラウザーで開いた場合、ブラウザーの左上隅に300xx300pxの青い長方形を描画します。 ここで、ドキュメントに2つの高さと幅があるのはなぜか疑問に思われるかもしれません。 コード全体を理解して、その理由を見てみましょう。 前述のように、SVGコードはルート要素（<svg>および</ svg>）内に記述して、これらの行の解釈方法をブラウザーに通知する必要があります。

HTMLと同様に、SVGではルート要素に名前空間宣言が必要です。 上記の例では、xmlnsパラメーター「http://www.w3.org/2000/svg」を提供し、W3Cはルート要素内にSVGバージョン1.1を推奨しました。 ルート要素内の寸法はSVGビューポイントと呼ばれ、ルートタグ内に描画されたSVG画像が表示されるウィンドウまたはキャンバスです。 視点は、ブラウザに表示される前に、SVGオブジェクト全体と少なくとも同じ寸法である必要があります。

2行目はわかりやすいです。 長方形の描画に使用される<rect>要素は、寸法で始まる提案された長方形のパラメーターを具体化します。 ストローク幅は線の太さを表し、2つのRGBカラーモデルは、長方形と線をそれぞれ塗りつぶす色をブラウザに通知します。 とても簡単ですよね？

これで、次のようにxとyの値を宣言することで、ページ内で長方形を移動できます。

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

もちろん、これに必要な余分なスペースに対応するために、視点の寸法を大きくすることを忘れないでください。

SVG画像を作成する最も簡単な方法は、Adobe Illustrator、Inskape、Sketchなどの描画ツールを使用することです。 アイコンや複雑な形状などを探している場合は、ゼロから構築する代わりに、Bonsai.jsやD3.jsなどの一部のJavaScriptライブラリがSVG画像の優れたソースになります。

SVG画像の追加

SVG画像を使用する利点の1つは、画像をデザインに簡単に統合できることです。 imgタグのsrc属性でそれらを参照するだけです。 これは、次のようにWebサイトフォルダーに保存されている.svgファイルを参照する必要があります。

<img src='example.svg'>

または、SVGコードをHTMLドキュメントに挿入し、前述のように<svg></svg>タグでコードを開始および終了することもできます。

次のような背景画像については、CSSでSVG画像を参照することもできます。

.main-header {
background-image: url(example.svg);
}

開発者にとってSVGを使用する利点

インターネットの現在のグラフィック要件を考慮すると、後続のWebプロジェクトでのSVGの必要性は強調しすぎることはありません。 強力な解像度と画面サイズを備えた無数の新しいデバイスを除けば、Webサイトは現在、非常に多くの双方向性を備えているため、グラフィックを完全に制御しなければ、プロ級のWebサイトを提供することは困難です。

開発者にとってのメリット

いくつかの利点は次のとおりです。

スケーラビリティと応答性

解像度に依存しない画像形式として、SVGはピクセル化されることなく無期限にスケーリングできます。 これにより、開発者は、デバイスの解像度の強さや画面サイズに関係なく、すべてのユーザーに一流のグラフィック画像を配信できます。 さまざまなパス、形状、テキスト要素を組み合わせて、すべてのサイズでシャープで鮮明な見事なビジュアルを作成できます。

これは、固定サイズのラスターイメージ形式では使用できません。これは、極端に拡大すると、すべてのスペースを埋めるのに十分なデータがないためです。 SVGはポイント間の距離を計算して、パスが常に接続されているようにし、画像がどのスケールでも鮮明に保たれるようにします。

非常に柔軟性があり、アニメーションをサポートします

画像の最終コピーを提供するラスター画像とは異なり、SVG画像は、テキストエディターまたは特別な描画ツールを使用してコードを調整することで完全に編集できます。 SVG要素のクラス名またはIDを使用して、CSSを使用してSVG画像のスタイルを設定またはアニメーション化できます。 SVG画像のアニメーションは、Web Animation API、SMIL、またはWebGLでも可能です。

css

最も重要なことは、SVG画像を他の著名なオープンWebプラットフォームテクノロジーやドキュメントと統合できることです。 SVGは、JavaScriptでスクリプト化し、HTMLのようなCSSでスタイルを設定できます。

SEOにやさしく、ファイルサイズが小さい

テキスト形式で存在するSVG画像は、Webサイトのアクセシビリティを向上させます。これは、ページランキングの大きな資産です。 さらに、検索エンジンはSVG要素のテキストにインデックスを付けることができ、ユーザーはSVGファイルのキーワードを使用してWebサイトを見つけることができます。

SVGにはダウンロードするファイルがなく、HTTPリクエストも必要ないため、SVGの読み込みははるかに高速です。 ラスターイメージファイルの解像度を向上させることは、ドット（ピクセル）の数を増やすことを意味します。 これにより画像サイズが大きくなり、ウェブサイトの読み込み時間が長くなります。 これは、SVGを使用する場合とはほど遠いものです。 一連の指示と座標を使用して作成された画像として、SVGファイルサイズは他の画像ファイルタイプと比較して（最適化された場合）非常に小さくなります。 これにより、ユーザーエクスペリエンスを向上させながら、読み込み時間の短縮、ページパフォーマンスの向上、検索エンジンランキングの向上を実現します。 詳細については、SEOコンサルタントロンドンをご覧ください。

SVGには独自のドキュメントオブジェクトモデルがあります

ブラウザ内に独自のDOMがあるという理由だけで、JavaScript、CSS、およびその他のプログラミング言語を使用してSVG要素を操作できます。

SVGは別個のドキュメントとして存在し、独自の構造を持っていると見なされ、通常のDOM内に配置されます。 この評判は、任意の次元の視点を作成し、さまざまなサイズのキャンバスに画像を描画し、SVGプロパティを更新せずに表示できるviewBox属性にとって非常に重要です。

SVGは未来の画像ファイル形式です

非常に素晴らしい画面解像度を備えたより強力なデバイスが登場しなければ、開発者はさまざまなデバイス用に画像を最適化するという圧倒的な頭痛の種に対処する必要はありません。 しかし、これは、Webサイトからの双方向性の向上に対する渇望の高まりと相まって、これから数年で容易になることはありません。

応答性

どういうわけか、ユーザーの視点の次元に一致するようにさまざまな画像を提供することによってこれらの課題を管理することは、費用効果が高くありません。 また、帯域幅とコストを節約し、ユーザーエクスペリエンスを向上させることでビジネスを持続可能にするために、SVG画像形式への移行に向けた取り組みは必然的に最優先事項になりつつあります。 SVGサポーターのコミュニティが増えています。

2011年8月16日にW3CがSVG1.1（Second Edition）を発表する前は、新しいバージョンのレビューが行われている可能性がありますが、SVG 1.0および1.1（First Edition）は、インターネットでの画像の処理方法をすでに変更していました。 これは、通常のラスター画像形式よりも価値のあるものの約束であり、現在のWebプログラミングの状態では依然として非常に役立ちます。 SVGは、すべての場合に最適な画像形式ではありません。 SVGの後続のバージョンは、SVGのいくつかの欠点に取り組むことが期待されています。 この記事の後半で説明します。

SVG画像形式を使用する場合

もちろん、解像度に依存する画像形式は、写真やその他の詳細な画像に最適です。 SVG画像形式が最適な一般的なケースのリストを次に示します。

  1. ロゴとアイコン
  2. チャート、グラフ、地図、インフォグラフィックなどのインタラクティブな画像
  3. アニメーション
  4. アプリケーションインターフェイス
  5. わかりやすい図とイラスト
  6. ねばねばやシェイプモーフィングなどの特殊効果
  7. 低強度のアートワークとシンプルなグラフィック

開発者にとってのSVGの欠点

SVGはすべてのブラウザでサポートされているわけではありません。古いブラウザはSVGを、古いWindowsXPがフラッシュドライブまたはCanonEOS5DSrに接続しようとしたときに処理するのと同じように処理します。 一言で言えば、SVGは古いブラウザでは機能しません。 IE8以下。 ただし、レガシーブラウザは実際には将来の原因の一部ではないことを考えると、まだ少数の人しか使用していないという事実と相まって、SVGを使用しない主な理由ではありません。

開発者にとっての欠点

SVGはそれほど多くの詳細をサポートしていません。パスとポイントがブレンドされているため、SVGにはピクセルベースのラスター画像形式と同じくらい詳細を表示するフレームワークがありません。 SVGは、カメラでキャプチャされたものでは機能しません。 したがって、非常に多くの詳細を含む写真やその他の形式のグラフィックスは、より高密度の色をサポートしているため、ラスター画像形式を使用して表示するのが最適です。

SVGコードを理解する：開発者はいくつかのWebプログラミング言語の使用方法を知っていると考えられるかもしれませんが、この負担を増やすことは困難であることが証明されています。 SVGコードパターンは実際には難しくなく、Webプログラミング言語とはまったく異なりません。 しかし、人目を引く画像を作成または操作するには、ある程度の努力が必要です。 これは、ビットマップイメージが便利で、埋め込みの労力を必要としない場合に、すべての開発者が多くの時間を費やしたいと思うことではありません。

結論

幅広いユーザーに対応するWebサイト上のグラフィックの動作は、今日のWeb開発の重要な側面です。 また、現在のデザインで通常見られるように、複数の画像サイズをレンダリングするのではなく、SVG画像形式が優れたソリューションです。 これは、ブラウザが一連の指示を使用して画像のレンダリング方法を計算し、あらゆる縮尺で鮮明で鮮明な画像を保証するためです。

ビットマップ画像は写真などの非常に詳細な画像に最適ですが、SVG画像はアイコン、ロゴ、チャート、インフォグラフィックなどの詳細度の低い画像に使用されます。IllustratorやSketchforなどの描画ツールを使用することをお勧めします。アイコンや人気のある形状のSVG画像とオンラインライブラリを作成します。 コーディングは、SVG画像を操作する場合にのみ必要です。

SVGの使用方法と、ここで共有されていないその他のクールなヒントについて教えてください。