この投稿は、SVG（Scalable Vector Graphic）に関する一連の記事の最初で、サイト上のベクターグラフィックスの基本について説明しています。
ベクターグラフィックスは印刷で広く使用されています。 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() {
ページで、
rsr属性を持つ
divを挿入します。
<div id="rsr"></div>
デモおわりに
これがSVGのすべての基本です。次の記事では、ベクターグラフィックスのより複雑な使用例について説明します。
ちょっとした有用な読み物：