Webで、図形描画を行いたい。

質問

例えば、Excelのオートシェイプで、四角と三角をコネクタでつないで、簡単な図を作ったりできますが、こういった図形描画をWeb上で行いたいのです。

自由に操作できる必要は無いので、表示する事が出来ればいいのですが、そういったツールは無いでしょうか。
表示内容としては、以下のような物を希望しています。
ttp://ondras.zarovi.cz/sql/demo/?keyword=default

表示内容としては、職場のネットワーク構成を図にするような感じを想像していただければ、大体解っていただけると思います。

出来れば実例まであるとありがたいです。

回答No.2

中村 拓男（@tknakamuri） · ベストアンサー

候補としては SVG、VML と Canvas ですが、IE と他のブラウザの両方で
使えるのは Canvas だけです。

SVG、VML がベクトルグラフィックスで有ることに対して
Canvasはペイント系のグラフィックスAPIです。

IE は Canvas をサポートしていませんが、Google の
excanvas を使えば VMLでエミュレートできるので、
ブラウザ側にプラグインを導入することなく、全ての
ブラウザで同一のコードで使えます。

お礼

ありがとうございました。
結果として、両方とも使ってみて、サンプルソースを見て決めることになりました。

回答No.1

dscripty

SVG(Scalable Vector Graphics) なら、ウェブページとの相性もいいし、HTML5 の標準に入ったから、これからは、どんどんつわれるかも！

http://ja.wikipedia.org/wiki/Scalable_Vector_Graphics
http://www.w3.org/Graphics/SVG/

HTML では object タグをつかうと svg ファイルを埋め込めるよ。
ちなみに、IE は ver9 以上ね。

かっこいい図は、ウェブデザイナさんに Illustrator で作ってもらって、SVG にエクスポート。
そうでないひとは、Inkscape で！
http://inkscape.org/index.php?lang=ja

あと JavaScript で動くウェブツールもあるから、ちょっと作ってみたいときに便利。
http://code.google.com/p/svg-edit/

Demos のリンクの先の SVG エディタで画像をつくってみた！

Firefox とかの data: スキーマが使えるウェブブラウザなら、下の文字列をロケーションバーに入力すると画像が表示されるよ。
※ 回答文字数超えちゃったから、データはテキストエディタでかなり圧縮

data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiID8+PCFET0NUWVBFIHN2ZyBbPCFFTlRJVFkgcG9ydCAnPHJlY3QgY2xhc3M9ImMwIiB3aWR0aD0iNCIgaGVpZ2h0PSI0Ii8+Jz48IUVOVElUWSBwb3J0cyAnPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwwKSI+JnBvcnQ7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgsMCkiPiZwb3J0OzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNiwwKSI+JnBvcnQ7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0LDApIj4mcG9ydDs8L2c+Jz48IUVOVElUWSBodWIgJzxyZWN0IGNsYXNzPSJjMCIgeT0iMCIgd2lkdGg9IjUwIiBoZWlnaHQ9IjE3Ii8+PHJlY3QgY2xhc3M9ImMwIiB5PSIzIiB3aWR0aD0iNTAiIGhlaWdodD0iMTEiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjUsNi41KSI+JnBvcnRzOzwvZz4nPjwhRU5USVRZIHBjICc8cGF0aCBjbGFzcz0iYzAiIGQ9Im0yNywyNGwxMywtNmwwLDNsLTEzLDZsMCwtM3oiLz48cGF0aCBjbGFzcz0iYzAiIGQ9Im0xNiwwbDI3LDBsLTMsMThsLTI3LDBsMywtMTh6Ii8+PHBhdGggY2xhc3M9ImMwIiBkPSJtMTMsMThsMjcsMGwtMTIsNmwtMjcsMGwxMiwtNnoiLz48cmVjdCBjbGFzcz0iYzAiIHg9IjAiIHk9IjI0IiB3aWR0aD0iMjciIGhlaWdodD0iMyIvPjxwYXRoIGNsYXNzPSJiayIgZD0ibTE4LDJsMjEsMGwtMiwxNGwtMjEsMGwyLC0xNHoiLz4nPjwhRU5USVRZIHN3aXRjaCAnPHJlY3QgZmlsbD0iIzQ0NCIgc3Ryb2tlPSIjMDAwIiB3aWR0aD0iNjEiIGhlaWdodD0iMTUiIC8+Jz5dPjxzdmcgd2lkdGg9IjY0MCIgaGVpZ2h0PSI0ODAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5saW5le2ZpbGw6bm9uZTtzdHJva2U6IzAwMDt9LmMwe2ZpbGw6I2NjYztzdHJva2U6IzAwMDt9LmJre2ZpbGw6IzAwMDtzdHJva2U6IzAwMDt9Ll8we2ZpbGw6bm9uZTtzdHJva2U6IzAwMDt9dGV4dHt0ZXh0LWFuY2hvcjptaWRkbGU7Zm9udC1mYW1pbHk6dmVyZGFuYTtmb250LXNpemU6MTFweDtzdHJva2Utd2lkdGg6MDtzdHJva2U6IzAwMDtmaWxsOiMwMDA7fTwvc3R5bGU+PHRpdGxlPihjKWRzY3JpcHR5PC90aXRsZT48Zz48bGluZSB4MT0iMTUzIiB5MT0iMTU2IiB4Mj0iMTUzIiB5Mj0iMzkyIi8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUsMjM4KSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg4NSwyOTUpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE2OSwyNjUpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyOSwxNzYpIj4maHViOzwvZz48dGV4dCB5PSIyMDYiIHg9IjE1MyI+SFVCPC90ZXh0PjxsaW5lIHgxPSIxMjciIHkxPSIyNDgiIHgyPSIxNTMiIHkyPSIyNDgiLz48bGluZSB4MT0iMTUzIiB5MT0iMjc0IiB4Mj0iMTgxIiB5Mj0iMjc0Ii8+PGxpbmUgeDE9IjEyNiIgeTE9IjMwNCIgeDI9IjE1MiIgeTI9IjMwNCIvPjxsaW5lIHgxPSIzMTAiIHkxPSI5MSIgeDI9IjMxMCIgeTI9IjM4OCIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MywyMzcpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0MywyOTMpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyNywyNjMpIj4mcGM7PC9nPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI4NywxNzUpIj4maHViOzwvZz48dGV4dCB5PSIyMDUiIHg9IjMxMSI+SFVCPC90ZXh0PjxsaW5lIHgxPSIyODUiIHkxPSIyNDciIHgyPSIzMTEiIHkyPSIyNDciLz48bGluZSB4MT0iMzExIiB5MT0iMjczIiB4Mj0iMzM5IiB5Mj0iMjczIi8+PGxpbmUgeDE9IjI4NCIgeTE9IjMwMyIgeDI9IjMxMCIgeTI9IjMwMyIvPjxsaW5lIHgxPSI0NTkiIHkxPSIxNTUiIHgyPSI0NTkiIHkyPSIzOTEiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOTEsMjM1KSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzOTAsMjkzKSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NzUsMjYzKSI+JnBjOzwvZz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0MzUsMTcyKSI+Jmh1Yjs8L2c+PHRleHQgeT0iMjA1IiB4PSI0NTkiPkhVQjwvdGV4dD48bGluZSB4MT0iNDMzIiB5MT0iMjQ3IiB4Mj0iNDU5IiB5Mj0iMjQ3Ii8+PGxpbmUgeDE9IjQ1OSIgeTE9IjI3MyIgeDI9IjQ4NyIgeTI9IjI3MyIvPjxsaW5lIHgxPSI0MzIiIHkxPSIzMDMiIHgyPSI0NTgiIHkyPSIzMDMiLz48bGluZSB4MT0iMTUzIiB5MT0iMTU2IiB4Mj0iNDU4LjE5ODMiIHkyPSIxNTYiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODAsNzUpIj4mc3dpdGNoOzwvZz48cGF0aCBjbGFzcz0iXzAiIGQ9Im00MzUsNzJjMSwtMTQgMjUsLTE5IDMxLC02YzYsLTEzIDMwLC04IDMwLDdjMTgsLTEgMTksMjQgLTEsMjRjLTUsMTQgLTIxLDE1IC0yNywyLjVjLTUsMTIgLTI3LDEzIC0zMiwtNGMtMTYsLTEgLTE2LC0yMyAtMCwtMjR6Ii8+PGxpbmUgeDE9IjM0MiIgeTE9IjgzIiB4Mj0iNDIzIiB5Mj0iODMiLz48L2c+PC9zdmc+

お礼

おお、具体的な答えをありがとうございます。
実際に自分でも作ってみました。これは注目ですね。