hiromasa.zone : o)

SVG もういっちょう

日記 - ひろまさ @ 18:29

SVG もういっちょういきます。

Opeara9 でもいけてますか？ 🙂 > Sa・Ga さん （コメントありがとうございました）

昨日の chameleon さんからコメントいただきましたとおり、Scalable Vector Graphics です。

ベクターグラフィックを XML で標準的に表現したもので、Web でも使うことが出来ます。　いまのところ、Firefox / Opera 系でサポートされている模様。 IE でも adobe のプラグインいれるとみれるみたいですね。

DOM で JavaScript からダイナミックHTML みたいに属性値をいじると、アニメーションできたりインタラクティブに操作をしたりできます。　上はタイマーでアニメーションさせている様子です。　（ただ、あんまり描画パフォーマンスはよくないかも。　いや、気のせいかも 🙂

SVG をだせる、Inkscapeの出力ファイルや各種ドキュメントを参考にしていろいろやってみているのですが、む、むずい。。

Scalable Vector Graphics (SVG) 1.1 Specification

SVG学習辞典

SVG入門（SVGについて詳しく解説します

コネクタはないのかな・・・。

XML だすだけでベクターグラフィックが描けるのでスクリプト言語と相性が良さそうです。　もうちょっとがんばってみます。。

だましだましやっていたので、かなり恥ずかしいものですが上のソースおいておきます。　興味がある方はあそんでみてください。 🙂

1.  <?xml version="1.0" encoding="UTF-8"?>
2.  <!DOCTYPE
3.   svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
4.   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
5.  <svg
6.   xmlns="http://www.w3.org/2000/svg"
7.   xmlns:xlink="http://www.w3.org/1999/xlink"
8.   onload="animation(evt)">
9.  
10.   <!-- アニメ用の JavaScript -->
11.   <script language="javascript1.2">
12.   <![CDATA[
13.  
14.   var svgdoc = null;
15.   var rotate1 = 0;
16.   var rotate2 = 0;
17.   var rotate3 = 0;
18.  
19.   /* onLoad のイベントハンドルしてドキュメント取得/タイマ開始 */
20.   function animation(evt) {
21.  
22.   target = evt.target
23.   svgdoc = target.ownerDocument;
24.  
25.   next_frame();
26.   setInterval('next_frame()', 20);
27.  
28.   }
29.  
30.   /* 属性取って変更するとアニメする */
31.   function next_frame() {
32.  
33.   var rect1 = svgdoc.getElementById('rect1');
34.   var rect2 = svgdoc.getElementById('rect2');
35.   var rect3 = svgdoc.getElementById('rect3');
36.  
37.   ro1 = "rotate(" + rotate1 + ",200,150)";
38.   ro2 = "rotate(" + rotate2 + ",200,250)";
39.   ro3 = "rotate(" + rotate3 + ",250,250)";
40.  
41.   rect1.setAttribute("transform", ro1);
42.   rect2.setAttribute("transform", ro2);
43.   rect3.setAttribute("transform", ro3);
44.  
45.   rotate1++;
46.   rotate2--;
47.   rotate3++;
48.  
49.   }
50.   ]]>
51.   </script>
52.  
53.   <!-- 図形の定義 -->
54.   <g fill-opacity="0.7" stroke="black" stroke-width="4px">
55.   <rect id="rect1" transform="" x="150" y="100" width="150" height="150" fill="red" />
56.   <rect id="rect2" transform="" x="100" y="200" width="150" height="150" fill="blue" />
57.   <rect id="rect3" transform="" x="200" y="200" width="150" height="150" fill="green" />
58.   </g>
59.  
60.  </svg>

追記。

正直いまは反省している･･･。

↑これは Opera だとだめなようです…。

このブログで関連すると思われる他の投稿

• 100という数字に意味はないが、10進数ではキリがよい
• 1.5.1 プレリリースおめでとうございます
• WordPress のエントリでプログラムコードをハイライトする! – その２ –
• Firefox 1.0.2 (ja-JP) がでた？
• 試験中です

5 Comments

Comment

1. From: Sa・Ga - 2006/12/3 Sunday (Comment)

   　Opera 9でもいけてるようです。動いているようです。

   # 　当然ながら携帯電話はダメですね。
   # 　あと、IE7でもダメっぽい・・・。

   　コメントが遅くなってしまい申し訳ありませんでした。夕方から新宿のヨドバシキャメラに出かけていたものでして。
   　やっぱりWiiもPS3も売り切れでした。

   　私の乏しい想像力では使い道を思い浮かべることができませんが、絵描き歌とかかけるかな？（音はどっから持ってくるんだ）

2. From: ひろまさ - 2006/12/3 Sunday (Comment)

   Sa・Ga さん、ありがとうございます。 😀

   動的生成の使い方だと、グラフとかの描画ですかね～。　AJAX とからめても面白そうです。　インタラクティブ絵描き歌いいですね。

   単純に動きと描画だけなら、Flash に一日の長か…という感想を今のところ持っています。　もうちょっといじってみよう…。

3. From: Sa・Ga - 2006/12/4 Monday (Comment)

   ↑これは Opera だとだめなようです…。

   　おろ？　うちのOpera 9では、なにやら左上方向に向かってアニメーションしているように見えます。

   動的生成の使い方だと、グラフとかの描画ですかね～。

   　はっ！　そうだその手があったんだ！
   　さらに応用して、電車のダイヤグラムとか書けそうですね（笑）。俺はやらないけど。

   　Flashと違ってカネがかからない（と思う）点はいいですね。
   　ご指摘のようにスクリプト言語との親和性も良さそうですが、IEで動かないというのはちょっと。

4. From: ぼの - 2006/12/4 Monday (Comment)

   わーん、ワープくん（仮名）が動いてるー！o(*’-‘*)o

   Flash より軽いのでしょうか。絵にもよるのかな？

5. From: ひろまさ - 2006/12/5 Tuesday (Comment)

   おお、Opera 9 だと大丈夫でしたか。 Opera 8 だったのかな…。 ありがとうございます。

   電車のダイアグラムすごく良いですね!

   いろいろやってみたのですが、今のところ SVGの描画パフォーマンスは各ブラウザの実装上あまりよくなさそうなので（遅い…）、Flash の代替えよりも Acrobat の代替えとして考えるといろいろ面白いこと出来そうです。　XML だすだけで帳票なんかつくれますね。　ベクターなので印刷にも耐えられます。 WP 的には管理画面でつかえるかな～といった印象です。

   ちなみに、ちゃんと確認していませんが Adobe Acrobat がはいっていると IE でもみれる…、ような気がします。（もう一台のPCでは一部みれました）

   > わーん、ワープくん（仮名）が動いてるー！o(*’-‘*)o

   えへ、気がついてくれて良かったです。 😉