SVG 0.1

JavaScript の Document オブジェクトを使って SVG を生成してみました。Document オブジェクトは HTML を書き換える仕組みなので、本来ダイナミックな HTML 生成のために使いますが、SVG 自体 HTML に組み込めるので、同じ仕組みで SVG も生成することができます。

実行結果

ソース

svg01.html

JavaScript のソースファイルを指定します。 
<script type="text/javascript" src="js/svg01.js"></script>
実行結果のところには "result" という id の div 要素を用意するだけです。 
<h2>実行結果</h2>
<div id="result">
</div>

svg01.js

svg 要素を生成し、そこに polygon、rect、ellipse 要素を追加します。 生成した svg 要素を実行結果の div 要素に追加します。

window.onload = function() {
    //svg 要素の生成
    //<svg width="598" height="428" style="border: solid 1px lightgray">
    var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('width', '598');
    svg.setAttribute('height', '428');
    svg.setAttribute('style', 'border: solid 1px lightgray;');

    //polygon、rect、ellipse 要素の生成
    //  <polygon points="92,0 22,96 162,96" 
    //    style="fill:#752424;stroke:#000000;stroke-width:2"/>
    var obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '92,0 22,96 162,96');
    obj.setAttribute('style', 'fill:#752424;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj ); 
    //  <polygon points="21,194 0,273 42,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '21,194 0,273 42,273');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj ); 
    //  <polygon points="162,193 142,273 183,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '162,193 142,273 183,273');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj ); 
    //  <polygon points="93,189 52,259 134,259" 
    //    style="fill:#1f1f1f;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '93,189 52,259 134,259');
    obj.setAttribute('style', 'fill:#1f1f1f;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj ); 
    //  <rect x="22" y="97" width="141" height="142" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
    obj.setAttribute('x', '22');
    obj.setAttribute('y', '97');
    obj.setAttribute('width', '141');
    obj.setAttribute('height', '142');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に rect 要素を追加
    svg.appendChild( obj ); 
    //  <polygon points="93,192 73,273 114,273" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
    obj.setAttribute('points', '93,192 73,273 114,273');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に polygon 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="93" cy="145" rx="41" ry="43" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '93');
    obj.setAttribute('cy', '145');
    obj.setAttribute('rx', '41');
    obj.setAttribute('ry', '43');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="93" cy="145" rx="33" ry="34" 
    //    style="fill:#217dbb;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '93');
    obj.setAttribute('cy', '145');
    obj.setAttribute('rx', '33');
    obj.setAttribute('ry', '34');
    obj.setAttribute('style', 'fill:#217dbb;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="37" cy="220" rx="7" ry="8" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '37');
    obj.setAttribute('cy', '220');
    obj.setAttribute('rx', '7');
    obj.setAttribute('ry', '8');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="64" cy="221" rx="7" ry="7" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '64');
    obj.setAttribute('cy', '221');
    obj.setAttribute('rx', '7');
    obj.setAttribute('ry', '7');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="122" cy="221" rx="6" ry="7" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '122');
    obj.setAttribute('cy', '221');
    obj.setAttribute('rx', '6');
    obj.setAttribute('ry', '7');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 
    //  <ellipse cx="146" cy="220" rx="5" ry="6" 
    //    style="fill:#6e6e6e;stroke:#000000;stroke-width:2"/>
    obj = document.createElementNS('http://www.w3.org/2000/svg', 'ellipse');
    obj.setAttribute('cx', '146');
    obj.setAttribute('cy', '220');
    obj.setAttribute('rx', '5');
    obj.setAttribute('ry', '6');
    obj.setAttribute('style', 'fill:#6e6e6e;stroke:#000000;stroke-width:2');
    //svg 要素に ellipse 要素を追加
    svg.appendChild( obj ); 

    //
    //div 要素に svg 要素を追加
    document.querySelector('#result').appendChild( svg );
}