SVG ことはじめ

「グラフィクスができる XML --- SVG 」に挑戦する。

今は、Firefox 他ほとんどすべてのブラウザで、SVG に対応している。 昔の Internet Explorer (IE) は SVG 非対応だったのでプラグインがあったが、 2009 年にプラグインの開発は終了した。したがって現在(2013年)ではおすすめしない。

SVG が解釈できる XML をしこしこ書けば OK だ。

私の目標は、JavaScript と組み合わせて、チャーノフの顔グラフを書くことだ。 まだここまで行くのは長過ぎるので、一例を示す。

まずは、SVGのサンプルを見てほしい。

次のようなテキストを HTML ファイルに書けばよい。

<svg width="400" height="350">
    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm">
        <circle cx="6cm" cy="2cm" r="100" fill="red" transform="translate(0,50)" />
        <circle cx="6cm" cy="2cm" r="100" fill="blue" transform="translate(70,150)" />
        <circle cx="6cm" cy="2cm" r="100" fill="green" transform="translate(-70,150)" />
    </g>
</svg>

svg 要素の width と height という属性は必要だ。これらを指定しないと、 幅と高さが限られてしまう（あるブラウザでは width = 200, height = 200 ぐらいになる）。

次は単なる折れ線グラフだ。

まりんきょ学問所 ＞ コンピュータの部屋 ＞ マーク付け言語手習い ＞ SVG ことはじめ