JavaScriptでSVGグラフィックを作成する方法をわかりやすく解説

SVGとJavaScriptの基本

最新のすべてのモダンブラウザはSVG（Scalable Vector Graphics）に対応しており、JavaScriptを使えば簡単にSVGグラフィックを作成できます。Google ChromeやFirefoxをはじめ、主要なブラウザはいずれもSVGをサポートしているため、特別なプラグインを導入する必要はありません。

JavaScriptでSVGを作成する流れ

JavaScriptによるSVG作成では、まず空のSVGドキュメントオブジェクトモデル（DOM）を用意します。その後、属性を設定することで、円や長方形といったさまざまな図形を自由に描画できます。

サンプルコード：黄色い円を描画する

var mySvg = "https://www.w3.org/2000/svg";
var myDoc = evt.target.ownerDocument;

var myShape = svgDocument.createElementNS(mySvg, "circle");

myShape.setAttributeNS(null, "cx", 40);
myShape.setAttributeNS(null, "cy", 40);
myShape.setAttributeNS(null, "r", 30);

myShape.setAttributeNS(null, "fill", "yellow");

コードのポイント解説

このコードでは、まずSVGの名前空間である「https://www.w3.org/2000/svg」を変数mySvgに格納しています。続いてcreateElementNSメソッドを使ってcircle（円）要素を生成します。

その後、setAttributeNSメソッドで各属性を設定していきます。「cx」と「cy」は円の中心座標、「r」は半径、「fill」は塗りつぶし色を表します。この例では、座標(40, 40)を中心とした半径30ピクセルの黄色い円が描画されることになります。

同様の手順でrect（長方形）やline（線）など他のSVG要素も作成できるため、属性値を変えながらさまざまな図形の描画に挑戦してみてください。