スタートページ＞ Javascript＞ SVG＞

SVG イントロダクション

ＳＶＧの概要

• ＳＶＧ（Scalable Vector Graphics）は、ベクター形式の画像ファイルのことです。
• ＳＶＧはW3Cが標準化しており、ほとんどのブラウザが準拠しているので、なんらの環境設定は不要で利用できます。
• そのテータはＸＭＬベースのテキストファイルです。そのため少量のデータ（パラメタ）で表示できます。
• 表示場所は、img要素ではなく、svg要素です。
• そのsvg要素の中にパラメタを指定することにより図形を作成・表示できます。
• HTMLの分野ですが、JavaScriptから作成することもできますし、そのためのライブラリも豊富なので、ここに掲げました。

図形の設定方法

svg要素の中でのインライン記述　参照：「図形のインライン記述」

img要素と同様、横軸は右が大。縦軸は下が大になります。

<svg width="300" height="200">
    <line x1="50" y1="10" x2="200" y2="50" stroke="red" />   // "/>"が必要です。
    <circle cx="150" cy="100" r="50" stroke="blue" fill="yellow" />
</svg>

SVG のパラメタをJavaScriptで定義　参照：「Javascriptでの記述」

<svg id="mySVG" width="290" height="160">
  <line id="myline" x1="50" y1="10" />
</svg>

上と同じ図形を JavaScript で作図することを考えます。
HTML の svg要素は右の青字のようになっているとします。
・直線は、パラメタが一部しかありません。
・円に関しては、記述がありません。

// 現在の svg要素の情報を取り込む
var svg = document.getElementById("mySVG"); // Ａ

// 既に一部が記述されている図形。その情報を取り込む
var line = document.getElementById("myline"); // Ｂ
　　line.setAttribute("x2","200"); // Ｃ
　　line.setAttribute("y2","50");
　　line.setAttribute("stroke","red");

// 新規の図形を作成
var round = document.createElementNS("http://www.w3.org/2000/svg", "circle");  // Ｄ
　　round.setAttributeNS(null,"cx", 150);  // Ｅ
　　round.setAttributeNS(null,"cy", 100);
　　round.setAttributeNS(null,"r", 50);
　　round.setAttributeNS(null,"fill", "yellow");
　　round.setAttributeNS(null,"stroke", "blue");
　　// 新規図形をこれまでの svg 要素の子要素として組み込む
　　svg.appendChild(round); // Ｆ

• Ａ・Ｂ：既存の要素の情報を取り出す定番関数です。imgやcanvasと同じです。
• Ｃ：line 関数がもつ属性の指定です。追加だけでなく変更もできます。
• Ｄ：「"circle" に "http～" で規定された名前空間定義を適用する」ことらしいのですが、
  私は理解していません。決まり文句としてよさそうです。
• Ｅ：第１パラメタは、属性の名前空間ですが、null により上の定義を継承しているらしです。
• Ｆ：「インライン～」にあるように、round は svg 要素の中の子要素の位置づけです。
  それを指定するものです。