ベクターグラフィックスは印刷で広く使用されています。 WebサイトにはSVGがあります。w3.orgの公式仕様によれば、SVGは2次元グラフィックスをXMLで記述するための言語です。 SVGには、形状、画像、テキストの3種類のオブジェクトが含まれています。 SVGは1999年以来存在しており、2011年8月16日からW3C勧告に含まれています。 SVGはWeb開発者によって大きく過小評価されていますが、いくつかの重要な利点があります。
すべての例のデモンストレーション / ソースのダウンロード / 公式ドキュメント
SVGの利点
- スケーリング:ラスターグラフィックスとは異なり、SVGはスケーリング時に品質を失わないため、網膜下での開発に使用すると便利です。
- HTTPリクエストの削減:SVGを使用すると、サーバーへの呼び出しの回数が減り、それに応じてサイトの読み込み速度が向上します。
- スタイリングとスクリプト:CSSを使用して、背景、透明度、境界線など、サイトのグラフィック設定を変更できます。
- アニメーションと編集:javascriptを使用して、SVGをアニメーション化し、テキストまたはグラフィックエディター( InkScapeまたはAdobe Illustrator )で編集することもできます。
- 小さいサイズ:SVGオブジェクトはビットマップよりもはるかに軽いです。
基本的なSVG形状
公式仕様によると、SVGを使用して単純なオブジェクトを描画できます。svgタグを使用して、長方形、円、線、楕円、ポリライン、またはポリゴンを作成できます。
開始点(x1およびx2)と終了点(y1およびy2)の2つのパラメーターのみを持つlineタグを使用した単純な行:
<svg> <line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
ストロークまたはストローク幅の属性またはスタイルを追加して、色と幅を設定することもできます。
style="stroke-width:1; stroke:rgb(0,0,0);"
デモ
破線
構文は前の構文と似ています。 ポリラインタグが使用され、 points属性はポイントを指定します。
<svg> <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
デモ
長方形
rectタグによって呼び出され、いくつかの属性を追加できます。
<svg> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
デモ
円周
この例では、 r属性を使用してcircleタグによって呼び出され、半径を設定し、 cxおよびcyは中心座標を設定します。
<svg> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
デモ
楕円
ellipseタグによって呼び出され、 circleと同様に機能しますが、 rxとryの 2つの半径を設定できます。
<svg> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
デモ
ポリゴン
多角形タグによって呼び出されると、 多角形の辺の数は異なります。
<svg> <polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/> </svg>
デモ
エディターを使用する
例からわかるように、基本的なSVG図形の描画は非常に簡単ですが、オブジェクトははるかに複雑になる可能性があります。 そのためには、Adobe IllustratorやInkscapeなどのベクターグラフィックエディターを使用する必要があります。SVG形式でファイルを保存し、テキストエディターで編集できます。 埋め込み、iframe、およびオブジェクトを使用してSVGページを埋め込むことができます。
<object data="images/ipod.svg" type="image/svg+xml"></object>
例は、 OpenClipArt.orgの iPodの画像です。
ブラウザのサポート
SVGは、Internet Explorer 8以下を除くほとんどすべての最新ブラウザーでサポートされています。 ただし、 Raphael.js javascriptライブラリを使用して修正することもできます。 ReadySetRaphael.comでSVGファイルをこのライブラリの形式に変換できます。
まず、 Raphael.jsライブラリを目的のページに接続してから、SVGファイルをロードし、生成されたコードをコピーして関数に貼り付ける必要があります。
window.onload=function() { // Raphael }
ページで、 rsr属性を持つdivを挿入します。
<div id="rsr"></div>
デモ
おわりに
これがSVGのすべての基本です。次の記事では、ベクターグラフィックスのより複雑な使用例について説明します。
ちょっとした有用な読み物:
- SVGの概要 -W3スクール
- SVGで独立した解像度 -Smashing Magazine
- なぜSVGを使用しないのですか? -NetTuts
- オリジナルの例 -hongkiat.com