スポンサーリンク
スポンサーリンク

SVGとは

SVGとはScalable Vector Graphicsの頭文字をとったもので、
ベクトルベースのグラフィックを描画するためのマークアップ言語です。
マークアップ言語といえばHTML/XMLを思い浮かべますが、SVGはXMLの
一種なのでXMLの書式が使えます。

SVGには図形に対応した要素が用意されていて、描画に必要な座標値などを
属性で指定し、SVHはHTMLと同じようにスタイルシートで使えます。
CSSを使いD3.jsで生成されるグラフのスタイルを色々と変更できます。

D3.jsで表示されているグラフはSVGによって生成されています。
D3.js自体にはグラフィックスを描画する機能はなく、HTML上に
配置されたSVG要素を操作することで様々なことを表現しています。

SVGではベクトルベースでグラフィックを作成します。
ベクトルベースというのは座標点を組み合わせて書く方法です。
対照的なものはピクセルベースがあります。
PhotoShopはグラフィックを点(ピクセル)の組合せとして扱う物を示します。

ベクトルベースの場合、少ないデータで図形を描画でき、解像度が変わったり
図形を拡大しても線が綺麗に表示されます。これらがメリットです。

デメリットは、複雑な図形だと座標点が多くなり図形を表示するのに
時間がかかります。

実際にSVGを使い図形を表示します。
以下のサンプルコードを実行すると・・・

サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました