[html5-developers-jp:868] 「canvas」と「svg」
307 views
Skip to first unread message
3panda
Apr 23, 2010, 8:23:00 AM4/23/10
to html5-developers-jp
こんばんは、大阪の城口と申します。
いつも皆様の書き込みを拝見させていただいております。
さて今回、勇気を持って投降させていただいたのは表題の通り
「canvas」と「svg」についてになります。
HTML5では目玉となっている「canvas」には当然、注目しているのですが
IE9でサポートされる事になった「svg」についても個人的に注目しております。
ですが、これまでマイクロソフトが「svg」への対応をしてこなかったためか
情報が少なく参考になるものがWEB上であまり見かけれませんでした。
このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
個人的には使いどころが違うのではと思っているのですが、
どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
その前に・・・・
以上、よろしくお願いいたします。
■下記、私が見つけたsampleサイトです。
http://raphaeljs.com/
--
このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
いつも皆様の書き込みを拝見させていただいております。
さて今回、勇気を持って投降させていただいたのは表題の通り
「canvas」と「svg」についてになります。
HTML5では目玉となっている「canvas」には当然、注目しているのですが
IE9でサポートされる事になった「svg」についても個人的に注目しております。
ですが、これまでマイクロソフトが「svg」への対応をしてこなかったためか
情報が少なく参考になるものがWEB上であまり見かけれませんでした。
このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
個人的には使いどころが違うのではと思っているのですが、
どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
その前に・・・・
以上、よろしくお願いいたします。
■下記、私が見つけたsampleサイトです。
http://raphaeljs.com/
--
このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
詳細については、http://groups.google.com/group/html5-developers-jp?hl=ja からこのグループにアクセスしてください。
teramako
Apr 23, 2010, 10:00:54 AM4/23/10
to html5-dev...@googlegroups.com
こんにちは
個人的な感覚ですが、SVGは静的、Canvasは動的な印象を持っています。
SVGはあらかじめ用意されたデータを表示、Canvasは新たな画像データを生成み
たいな感じです。
CanvasだとJSONPとかでデータを引っ張ってきて、それを元にグラフ作成とか。
このMLだとWebKitの人が多そうなので恐縮ですが、Mozillaのアドオン配布サイ
トaddons.mozilla.orgなんかでアドオンの統計情報が見られたりします。そのグ
ラフはCanvasで作られています。自分のアドオンだと
https://addons.mozilla.org/ja/statistics/addon/55713
あとは
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
みたいに、FileAPIとCanvasを組み合わせて画像をドラッグ&ドロップしてピクセ
ル変換して...とかはCanvasならではだと思います。
逆にSVGだと良い例が思いつかないですが、XMLなのでシリアライズし易いという
のが特徴ではないでしょうか。加工したデータをサーバ側なりローカル側なりに
保存してまた後で使ったりするのには向いていそうです。
う～ん、あまり思いつかないorz
SVGを効果的に利用したサイトとか僕も知りたいです。
ではでは～。
(2010年04月23日 21:23), 3panda wrote:
> こんばんは、大阪の城口と申します。
> いつも皆様の書き込みを拝見させていただいております。
>
> さて今回、勇気を持って投降させていただいたのは表題の通り
> 「canvas」と「svg」についてになります。
>
> HTML5では目玉となっている「canvas」には当然、注目しているのですが
> IE9でサポートされる事になった「svg」についても個人的に注目しております。
>
> ですが、これまでマイクロソフトが「svg」への対応をしてこなかったためか
> 情報が少なく参考になるものがWEB上であまり見かけれませんでした。
>
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃ
いますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸い
です。
>
>
> 個人的には使いどころが違うのではと思っているのですが、
> どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
> その前に・・・・
>
> 以上、よろしくお願いいたします。
>
>
> ■下記、私が見つけたsampleサイトです。
> http://raphaeljs.com/
>
--
teramako
http://twitter.com/teramako
http://d.hatena.ne.jp/teramako/
個人的な感覚ですが、SVGは静的、Canvasは動的な印象を持っています。
SVGはあらかじめ用意されたデータを表示、Canvasは新たな画像データを生成み
たいな感じです。
CanvasだとJSONPとかでデータを引っ張ってきて、それを元にグラフ作成とか。
このMLだとWebKitの人が多そうなので恐縮ですが、Mozillaのアドオン配布サイ
トaddons.mozilla.orgなんかでアドオンの統計情報が見られたりします。そのグ
ラフはCanvasで作られています。自分のアドオンだと
https://addons.mozilla.org/ja/statistics/addon/55713
あとは
http://hacks.mozilla.org/2010/02/an-html5-offline-image-editor-and-uploader-application/
みたいに、FileAPIとCanvasを組み合わせて画像をドラッグ&ドロップしてピクセ
ル変換して...とかはCanvasならではだと思います。
逆にSVGだと良い例が思いつかないですが、XMLなのでシリアライズし易いという
のが特徴ではないでしょうか。加工したデータをサーバ側なりローカル側なりに
保存してまた後で使ったりするのには向いていそうです。
う～ん、あまり思いつかないorz
SVGを効果的に利用したサイトとか僕も知りたいです。
ではでは～。
(2010年04月23日 21:23), 3panda wrote:
> こんばんは、大阪の城口と申します。
> いつも皆様の書き込みを拝見させていただいております。
>
> さて今回、勇気を持って投降させていただいたのは表題の通り
> 「canvas」と「svg」についてになります。
>
> HTML5では目玉となっている「canvas」には当然、注目しているのですが
> IE9でサポートされる事になった「svg」についても個人的に注目しております。
>
> ですが、これまでマイクロソフトが「svg」への対応をしてこなかったためか
> 情報が少なく参考になるものがWEB上であまり見かけれませんでした。
>
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃ
いますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸い
です。
>
>
> 個人的には使いどころが違うのではと思っているのですが、
> どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
> その前に・・・・
>
> 以上、よろしくお願いいたします。
>
>
> ■下記、私が見つけたsampleサイトです。
> http://raphaeljs.com/
>
--
http://twitter.com/teramako
http://d.hatena.ne.jp/teramako/
hebikuzure
Apr 23, 2010, 10:20:38 AM4/23/10
to html5-dev...@googlegroups.com
hebikuzure と申します。
SVG と canvas の違いや使い分けについては、先日の「PROJECT UX : Web ブラウザー最新動向」
(http://www.microsoft.com/japan/powerpro/projectux/trend/seminar_20100419.mspx)
での
羽田野さんのセッションで取り上げられていました。
ざっくり言えば、SVG はベクター グラフィック、canvas はビットマップ グラフィックと考えると手っ取
り早い理解になるかと思います。
============================================================
hebikuzure
hebik...@gmail.com
hebik...@hotmail.com
http://hebikuzure.spaces.live.com/
2010年4月23日23:00 teramako <tera...@gmail.com>:
SVG と canvas の違いや使い分けについては、先日の「PROJECT UX : Web ブラウザー最新動向」
(http://www.microsoft.com/japan/powerpro/projectux/trend/seminar_20100419.mspx)
での
羽田野さんのセッションで取り上げられていました。
ざっくり言えば、SVG はベクター グラフィック、canvas はビットマップ グラフィックと考えると手っ取
り早い理解になるかと思います。
============================================================
hebikuzure
hebik...@gmail.com
hebik...@hotmail.com
http://hebikuzure.spaces.live.com/
2010年4月23日23:00 teramako <tera...@gmail.com>:
Futomi Hatano
Apr 23, 2010, 10:36:05 AM4/23/10
to html5-dev...@googlegroups.com
城口さん
羽田野＠HTML5.JPです。はじめまして。
On Fri, 23 Apr 2010 05:23:00 -0700 (PDT)
3panda <3pa...@gmail.com> wrote:
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
> 個人的には使いどころが違うのではと思っているのですが、
> どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
SVGについては詳しいわけではありませんが、私の考えをまとめると、こんな感じです。
■Canvasの特徴
・ビットマップ
・描いてしまった図を個別に認識できない。
・だから描画そのものは超高速。
・ピクセル操作が可能。
・画像やビデオのデータを読み込むことができる。
■SVGの特徴
・ベクターグラフィック
・描いた図はDOMとしてスクリプトから認識可能。
・つまり描いた後に個々の図形を動かしたり変形するのが容易。
・テキストがHTMLと同様に認識可能
ビットマップなのか、ベクターグラフィックなのかが、もっとも大きな違いと言えます。
使いどころとしては、次の通りですかね。
■Canvasの使いどころ
・ピクセルレベルで描画が必要なとき
SVGでできないことはありませんが、ピクセルごとにノードが作られるこ
とになり、効率が悪い。
Canvasでは、そういう心配はない。
・画面全体が塗り変わるようなアニメーション
■SVGの使いどころ
・描いた図形を個別に動かしたい場合
・ユーザー・インタラクションが必要な場合
図形ごとにJavaScriptから認識が可能なため、マウスクリックと言った
イベントを取りやすい。
ちょっと言葉だけでは分かりにくいので、有名なデモで比較してみますね。
■Canvasのほうが有利なデモ
http://www.html5.jp/blog/contents/HTML5_3Days_Tech_Talk_200910/Mandelbrot_set.html
↑IE以外の最新版ブラウザーでご覧ください。マンデルブロの描画でもです。
http://media.chikuyonok.ru/ambilight/
↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
ビデオの左右の周辺光の部分がCanvasで描画されています。
■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
http://9elements.com/io/projects/html5/canvas/
↑これは、実際にはProsessing.js( http://processingjs.org/ )を経由してCanvasで描画されています。
■SVGのほうが有利なデモ
SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
もしご存じ方がいらっしゃったら、教えてください。
最後に、Canvas と SVG の比較に関する記事をご紹介します。
「めざましTech」の記事です。
http://my.opera.com/MezamashiTech/blog/canvas-svg
私の記事で恐縮ですが、ご参考になれば幸いです。
http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi
羽田野＠HTML5.JPです。はじめまして。
On Fri, 23 Apr 2010 05:23:00 -0700 (PDT)
3panda <3pa...@gmail.com> wrote:
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
> 個人的には使いどころが違うのではと思っているのですが、
> どうしても「canvas」VS「svg」にしたがる人が出てくる気がしますので
■Canvasの特徴
・ビットマップ
・描いてしまった図を個別に認識できない。
・だから描画そのものは超高速。
・ピクセル操作が可能。
・画像やビデオのデータを読み込むことができる。
■SVGの特徴
・ベクターグラフィック
・描いた図はDOMとしてスクリプトから認識可能。
・つまり描いた後に個々の図形を動かしたり変形するのが容易。
・テキストがHTMLと同様に認識可能
ビットマップなのか、ベクターグラフィックなのかが、もっとも大きな違いと言えます。
使いどころとしては、次の通りですかね。
■Canvasの使いどころ
・ピクセルレベルで描画が必要なとき
SVGでできないことはありませんが、ピクセルごとにノードが作られるこ
とになり、効率が悪い。
Canvasでは、そういう心配はない。
・画面全体が塗り変わるようなアニメーション
■SVGの使いどころ
・描いた図形を個別に動かしたい場合
・ユーザー・インタラクションが必要な場合
図形ごとにJavaScriptから認識が可能なため、マウスクリックと言った
イベントを取りやすい。
ちょっと言葉だけでは分かりにくいので、有名なデモで比較してみますね。
■Canvasのほうが有利なデモ
http://www.html5.jp/blog/contents/HTML5_3Days_Tech_Talk_200910/Mandelbrot_set.html
↑IE以外の最新版ブラウザーでご覧ください。マンデルブロの描画でもです。
http://media.chikuyonok.ru/ambilight/
↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
ビデオの左右の周辺光の部分がCanvasで描画されています。
■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
http://9elements.com/io/projects/html5/canvas/
↑これは、実際にはProsessing.js( http://processingjs.org/ )を経由してCanvasで描画されています。
■SVGのほうが有利なデモ
SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
もしご存じ方がいらっしゃったら、教えてください。
最後に、Canvas と SVG の比較に関する記事をご紹介します。
「めざましTech」の記事です。
http://my.opera.com/MezamashiTech/blog/canvas-svg
私の記事で恐縮ですが、ご参考になれば幸いです。
http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
--
Futomi Hatano
http://www.html5.jp/
http://www.futomi.com/
http://twitter.com/futomi
Masakazu Muraoka
Apr 23, 2010, 11:38:29 AM4/23/10
to html5-dev...@googlegroups.com
京都GTUGの村岡です。
--
==================================================
中国マーケティング系ブログを配信しています
http://www.shanghai-watch.com/blog/
IT・システムコンサルティング パートナーズ
バスタイムフィッシュ
村岡 正和
mur...@bathtimefish.com
〒653-0862 神戸市長田区西山町3-3-12-201
TEL/FAX 078-220-4489
MOBILE 090-3628-2579
城口くんこんにちは！
最近お見かけしてないんで元気にしてるかなーと思ってました :-)
いい質問だなーと思ったんですがさっそく見識の深い皆さんが回答していらっしゃるのでボクがこれ以上言えることがないですｗ
しかしSVGのデモの紹介がないようなので、デモサイトだけ紹介しておきますね。
とか素敵なデモだと思います。
羽田野さんのおっしゃるアメリカの地図のデモは知らないですが、これらSVGと既出のCanvasのデモを見比べるだけでもなんとなく違うんだなという雰囲気が感じ取れるんじゃないでしょうか。
ご参考になれば幸いです。
--
==================================================
中国マーケティング系ブログを配信しています
http://www.shanghai-watch.com/blog/
IT・システムコンサルティング パートナーズ
バスタイムフィッシュ
村岡 正和
mur...@bathtimefish.com
〒653-0862 神戸市長田区西山町3-3-12-201
TEL/FAX 078-220-4489
MOBILE 090-3628-2579
Akihiro Oyamada
Apr 23, 2010, 12:55:47 PM4/23/10
to html5-dev...@googlegroups.com
ピクセルグリッドの小山田と申します。
ちょうど日が変わって昨日、ライトニングトークで SVG について語る機会があり、
スライドと demo を作ってみました。
ブログ記事ではありますがよろしければ...。
http://www.yomotsu.net/wp/?p=564
(すみません、ML で共有するには長い内容で)
また、テンポラリな URL ではありますが
http://dl.dropbox.com/u/1236764/temp/svg_demos/index.xhtml
のような demo も作りためていますのでもしよろしければ上記も。
SVG, canvas の使い分けどころとしましては、
SVGは...
ある程度単純な図形描画や、各パーツを別々に扱いたい場合の描画
UI パーツや様々な効果、アニメーション
canvas は...
複雑な計算が必要な描画やピクセル単位の解析
3D やベーム画面などの描画
のように考えていますがどうでしょうか。
よろしくお願いいたします。
ちょうど日が変わって昨日、ライトニングトークで SVG について語る機会があり、
スライドと demo を作ってみました。
ブログ記事ではありますがよろしければ...。
http://www.yomotsu.net/wp/?p=564
(すみません、ML で共有するには長い内容で)
また、テンポラリな URL ではありますが
http://dl.dropbox.com/u/1236764/temp/svg_demos/index.xhtml
のような demo も作りためていますのでもしよろしければ上記も。
SVG, canvas の使い分けどころとしましては、
SVGは...
ある程度単純な図形描画や、各パーツを別々に扱いたい場合の描画
UI パーツや様々な効果、アニメーション
canvas は...
複雑な計算が必要な描画やピクセル単位の解析
3D やベーム画面などの描画
のように考えていますがどうでしょうか。
よろしくお願いいたします。
(2010/04/24 0:38), Masakazu Muraoka wrote:
京都GTUGの村岡です。
城口くんこんにちは！最近お見かけしてないんで元気にしてるかなーと思ってました :-)
いい質問だなーと思ったんですがさっそく見識の深い皆さんが回答していらっしゃるのでボクがこれ以上言えることがないですｗしかしSVGのデモの紹介がないようなので、デモサイトだけ紹介しておきますね。
とか素敵なデモだと思います。
羽田野さんのおっしゃるアメリカの地図のデモは知らないですが、これらSVGと既出のCanvasのデモを見比べるだけでもなんとなく違う んだなという雰囲気が感じ取れるんじゃないでしょうか。
ご参考になれば幸いです。
2010年4月23日23:36 Futomi Hatano <futomi...@gmail.com>:
城 口さん
羽田野＠HTML5.JPで す。はじめまして。
--
/**
* 小山田 晃浩 {
* TEL : 090-9394-7479 ;
* e-mail : ad...@yomotsu.net / yom...@softbank.ne.jp ;
* Web : http://www.yomotsu.net ;
* twitter: http://twitter.com/yomotsu ;
* ==============================================
* 6月5日に開催される CSS Nite LP, Disk 9.2 に出演いたします。
* http://lp9.cssnite.jp/reprise.html
*/
Yasushi Ando
Apr 23, 2010, 1:08:49 PM4/23/10
to html5-dev...@googlegroups.com
こんばんは。あんどうと申します。
DevFestで講演をされたマイクさんはSVGは宣言的に
画面を定義できるのでデザイナには理解しやすいだろうと
おっしゃっていました。
反対にCanvasは図形をどのような手順で描画するかを
考えてcanvasに命令を与えないといけないのでどちらかと
言えばプログラマ向けでしょうね。
参考まで。
2010/4/23 Futomi Hatano <futomi...@gmail.com>:
--
ANDO Yasushi
- and...@gmail.com
- http://d.hatena.ne.jp/technohippy/
- http://twitter.com/technohippy
DevFestで講演をされたマイクさんはSVGは宣言的に
画面を定義できるのでデザイナには理解しやすいだろうと
おっしゃっていました。
反対にCanvasは図形をどのような手順で描画するかを
考えてcanvasに命令を与えないといけないのでどちらかと
言えばプログラマ向けでしょうね。
参考まで。
2010/4/23 Futomi Hatano <futomi...@gmail.com>:
ANDO Yasushi
- and...@gmail.com
- http://d.hatena.ne.jp/technohippy/
- http://twitter.com/technohippy
os0x
Apr 23, 2010, 1:21:35 PM4/23/10
to html5-developers-jp
こんにちは、太田です。
折角なので少し古いですが自前のcanvasのデモをひとつ。
> ■Canvasの使いどころ
> ・ピクセルレベルで描画が必要なとき
のケースで、いわゆるパーティクルをcanvasで試したものです。
IE以外のブラウザなら大体動きますが、CPUとメモリを大食いします…
http://ss-o.net/test/canvas_sand.html
# ChromeだとTask ManagerでGCが発動してメモリが減っていく様子が目に見えて面白いです
On 4月24日, 午前2:08, Yasushi Ando <andy...@gmail.com> wrote:
> こんばんは。あんどうと申します。
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> 2010/4/23 Futomi Hatano <futomi.hat...@gmail.com>:
> >http://www.html5.jp/blog/contents/HTML5_3Days_Tech_Talk_200910/Mandel...
> - andy...@gmail.com
> -http://d.hatena.ne.jp/technohippy/
> -http://twitter.com/technohippy
折角なので少し古いですが自前のcanvasのデモをひとつ。
> ■Canvasの使いどころ
> ・ピクセルレベルで描画が必要なとき
のケースで、いわゆるパーティクルをcanvasで試したものです。
IE以外のブラウザなら大体動きますが、CPUとメモリを大食いします…
http://ss-o.net/test/canvas_sand.html
# ChromeだとTask ManagerでGCが発動してメモリが減っていく様子が目に見えて面白いです
On 4月24日, 午前2:08, Yasushi Ando <andy...@gmail.com> wrote:
> こんばんは。あんどうと申します。
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> -http://d.hatena.ne.jp/technohippy/
> -http://twitter.com/technohippy
>
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
Shinya Muramatsu
Apr 23, 2010, 7:39:27 PM4/23/10
to html5-dev...@googlegroups.com
こんにちは、村松と申します。
他の方が書かれている事の繰り返しになってしまいますが、Canvas と SVG の一番の違いは、
・Canvas ピクセル単位でビットマップに描画
・SVG 各図形がオブジェクトとして扱われるベクターグラフィック
ということだと思います。
例えばホワイトボードがあった時に、Canvas はペンで絵を描いていくイメージで、
SVG は四角や丸に切り抜いた紙をペタペタ貼っていくイメージです。
個々の図形に対して何らかの操作をしたい場合には、SVG の方が適しています。
あとは、「SVG」と「PNG, JPEG」との使い分けというのもあるかと思います。
意外に思うかもしれませんが、SVG というのは XML で記述された画像でもあるわけで、
実際に Safari や Chrome では、<img> タグで SVG ファイルを指定できたりします。
両者の違いは、以下のページを見ると分かりやすいかもしれません。
Image Charts は PNG 形式の画像ですが、Interactive Charts は SVG が使われています。
Google Chart Tools http://code.google.com/intl/ja/apis/charttools/
このように、今までは PNG の画像を表示していたような場面でも、
SVG を使ってよりインタラクティブにしていく、という使い道も考えられると思います。
他の方が書かれている事の繰り返しになってしまいますが、Canvas と SVG の一番の違いは、
・Canvas ピクセル単位でビットマップに描画
・SVG 各図形がオブジェクトとして扱われるベクターグラフィック
ということだと思います。
例えばホワイトボードがあった時に、Canvas はペンで絵を描いていくイメージで、
SVG は四角や丸に切り抜いた紙をペタペタ貼っていくイメージです。
個々の図形に対して何らかの操作をしたい場合には、SVG の方が適しています。
あとは、「SVG」と「PNG, JPEG」との使い分けというのもあるかと思います。
意外に思うかもしれませんが、SVG というのは XML で記述された画像でもあるわけで、
実際に Safari や Chrome では、<img> タグで SVG ファイルを指定できたりします。
両者の違いは、以下のページを見ると分かりやすいかもしれません。
Image Charts は PNG 形式の画像ですが、Interactive Charts は SVG が使われています。
Google Chart Tools http://code.google.com/intl/ja/apis/charttools/
このように、今までは PNG の画像を表示していたような場面でも、
SVG を使ってよりインタラクティブにしていく、という使い道も考えられると思います。
3panda
Apr 23, 2010, 1:14:26 PM4/23/10
to html5-developers-jp
＞みなさん
城口です。
コメントありがとうございます！
さすが「html5-developers-jp」です！！
あれだけ探して集まらなかった情報や有益な意見が
こんなに集まるとは！！！
ちょっと感激しています！！
皆様のご意見を拝見しているうちに自分のなかで
だいぶと明確になってまいりました！！！
頂いたご意見から、僕の中でまとまっていった事を書かせて頂きたいと思います！
※気味で書いているので文章が纏まっていなかったら申し訳ありません。
＞teramakoさん
＞SVGはあらかじめ用意されたデータを表示、Canvasは新たな画像データを生成みたいな感じ
＞hebikuzureさん
＞SVG はベクター グラフィック、canvas はビットマップ グラフィックと考えると手っ取
り早い理解・・・
そう考えると色々と今まで「canvas」で感じていた違和感が
スッキリしました。
＞羽田野さん
詳細にまとめて頂きありがとうございます！
デモもありがとうございます！
＞http://9elements.com/io/projects/html5/canvas/
昨年、「Prosessing.js」についてProsessingを勉強していた流れで調べていた時に
このsampleも何度か見て、「すごいなぁ」っとは思ったのですが、
なんとく違和感を感じていました。
「canvas」の特性上、毎回書き直す（表現がおかしかったらすいません）ので
処理が重くなり、「canvas」だと不向きだなぁと思っていました。
こういったものは「svg」が適していますね。
＞「めざましTech」の記事です。
こちら紹介している二つもそれぞれの特徴が分かりやすい
ですね。
特に「SVG スライドショーの事例」はこれぞ「svg」と言える
デモでした！！
ありがとうございます！！
＞村岡さん
気が付いたら年末以来のご無沙汰ですね！
今年は本格的にHTML5のお仕事も入ってきそうで
勉強中であります！！！
＞http://svg-wow.org/
このサイト良いですね。
SVGのデモがこんなに紹介されているなんて驚きです！
ありがとうございます！
＞http://svg-wow.org/audio/animated-lyrics.svg
このデモもまさに「svg」って感じですね。
最初に投稿の際に、書き忘れていたのですが
最近見つけた、これぞ「canvas」と言えるデモがありました。
改めて紹介させていただきます。
HTML5 Video Destruction
http://craftymind.com/factory/html5video/CanvasVideo.html
このデモは「video」の扱いに気をとられていたのですが（実際すごいんですが）
まさに「canvas」ででしか実現出来ないなっと思います
「canvas」と「svg」の違いは「ベクターデータ」と「ビットマップデータ」の関係と同じで
「Photoshop」と「Illustrator」の関係によくにている思いました。
個別のパーツなんかを扱うのは「Illustrator」が得意。
写真やすでに存在するものに加工するのは「Photoshop」が得意。
もちろん「Photoshop」で個別のパーツを扱う事もレイヤーを駆使して出来なくはないですが
不向きで、逆に「Illustrator」でも写真を配置させる事は出来るが、加工には不向きで
それと同じ関係がまさに「canvas」と「svg」にあって、それぞれの使いどころを明確にしている
なっと理解致しました。
これを踏まえてもう少し「canvas」と「svg」の有効な使いどころを考えて行こうと
思います。
ありがとうございました。
> >http://www.html5.jp/blog/contents/HTML5_3Days_Tech_Talk_200910/Mandel...
城口です。
コメントありがとうございます！
さすが「html5-developers-jp」です！！
あれだけ探して集まらなかった情報や有益な意見が
こんなに集まるとは！！！
ちょっと感激しています！！
皆様のご意見を拝見しているうちに自分のなかで
だいぶと明確になってまいりました！！！
頂いたご意見から、僕の中でまとまっていった事を書かせて頂きたいと思います！
※気味で書いているので文章が纏まっていなかったら申し訳ありません。
＞teramakoさん
＞SVGはあらかじめ用意されたデータを表示、Canvasは新たな画像データを生成みたいな感じ
＞hebikuzureさん
＞SVG はベクター グラフィック、canvas はビットマップ グラフィックと考えると手っ取
り早い理解・・・
そう考えると色々と今まで「canvas」で感じていた違和感が
スッキリしました。
＞羽田野さん
詳細にまとめて頂きありがとうございます！
デモもありがとうございます！
＞http://9elements.com/io/projects/html5/canvas/
昨年、「Prosessing.js」についてProsessingを勉強していた流れで調べていた時に
このsampleも何度か見て、「すごいなぁ」っとは思ったのですが、
なんとく違和感を感じていました。
「canvas」の特性上、毎回書き直す（表現がおかしかったらすいません）ので
処理が重くなり、「canvas」だと不向きだなぁと思っていました。
こういったものは「svg」が適していますね。
＞「めざましTech」の記事です。
こちら紹介している二つもそれぞれの特徴が分かりやすい
ですね。
特に「SVG スライドショーの事例」はこれぞ「svg」と言える
デモでした！！
ありがとうございます！！
＞村岡さん
気が付いたら年末以来のご無沙汰ですね！
今年は本格的にHTML5のお仕事も入ってきそうで
勉強中であります！！！
＞http://svg-wow.org/
このサイト良いですね。
SVGのデモがこんなに紹介されているなんて驚きです！
ありがとうございます！
＞http://svg-wow.org/audio/animated-lyrics.svg
このデモもまさに「svg」って感じですね。
最初に投稿の際に、書き忘れていたのですが
最近見つけた、これぞ「canvas」と言えるデモがありました。
改めて紹介させていただきます。
HTML5 Video Destruction
http://craftymind.com/factory/html5video/CanvasVideo.html
このデモは「video」の扱いに気をとられていたのですが（実際すごいんですが）
まさに「canvas」ででしか実現出来ないなっと思います
「canvas」と「svg」の違いは「ベクターデータ」と「ビットマップデータ」の関係と同じで
「Photoshop」と「Illustrator」の関係によくにている思いました。
個別のパーツなんかを扱うのは「Illustrator」が得意。
写真やすでに存在するものに加工するのは「Photoshop」が得意。
もちろん「Photoshop」で個別のパーツを扱う事もレイヤーを駆使して出来なくはないですが
不向きで、逆に「Illustrator」でも写真を配置させる事は出来るが、加工には不向きで
それと同じ関係がまさに「canvas」と「svg」にあって、それぞれの使いどころを明確にしている
なっと理解致しました。
これを踏まえてもう少し「canvas」と「svg」の有効な使いどころを考えて行こうと
思います。
ありがとうございました。
> こんばんは。あんどうと申します。
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> 2010/4/23 Futomi Hatano <futomi.hat...@gmail.com>:
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> > ↑IE以外の最新版ブラウザーでご覧ください。マンデルブロの描画でもです。
>
> >http://media.chikuyonok.ru/ambilight/
> > ↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
> > ビデオの左右の周辺光の部分がCanvasで描画されています。
>
> > ■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
>
> >http://9elements.com/io/projects/html5/canvas/
> > ↑これは、実際にはProsessing.js(http://processingjs.org/)を経由してCanvasで描画されています。
>
> > ■SVGのほうが有利なデモ
>
> > SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
> > もしご存じ方がいらっしゃったら、教えてください。
>
> > 最後に、Canvas と SVG の比較に関する記事をご紹介します。
>
> > 「めざましTech」の記事です。
> >http://my.opera.com/MezamashiTech/blog/canvas-svg
>
> > 私の記事で恐縮ですが、ご参考になれば幸いです。
> >http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
>
> > --
> > Futomi Hatano
> >http://www.html5.jp/
> >http://www.futomi.com/
> >http://twitter.com/futomi
>
> > --
> > このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> > このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
>
> >http://media.chikuyonok.ru/ambilight/
> > ↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
> > ビデオの左右の周辺光の部分がCanvasで描画されています。
>
> > ■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
>
> >http://9elements.com/io/projects/html5/canvas/
> > ↑これは、実際にはProsessing.js(http://processingjs.org/)を経由してCanvasで描画されています。
>
> > ■SVGのほうが有利なデモ
>
> > SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
> > もしご存じ方がいらっしゃったら、教えてください。
>
> > 最後に、Canvas と SVG の比較に関する記事をご紹介します。
>
> > 「めざましTech」の記事です。
> >http://my.opera.com/MezamashiTech/blog/canvas-svg
>
> > 私の記事で恐縮ですが、ご参考になれば幸いです。
> >http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
>
> > --
> > Futomi Hatano
> >http://www.html5.jp/
> >http://www.futomi.com/
> >http://twitter.com/futomi
>
> > --
> > このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> > このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
>
> --
> ANDO Yasushi
> - andy...@gmail.com
> -http://d.hatena.ne.jp/technohippy/
> -http://twitter.com/technohippy
>
> --
> ANDO Yasushi
> - andy...@gmail.com
> -http://d.hatena.ne.jp/technohippy/
>
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
3panda
Apr 23, 2010, 1:18:24 PM4/23/10
to html5-developers-jp
＞あんどうさん
ありがとうございます！
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
svgはたしかにHTMLコーディングの延長にある感じがするので
デザイナさんや私のようなマークアップエンジニアは理解しやすそうです。
そしてcanvasもまさにその通りで、デザイナさんが扱うにはsvgより敷居が高い
気がしますね。
> >http://www.html5.jp/blog/contents/HTML5_3Days_Tech_Talk_200910/Mandel...
ありがとうございます！
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
svgはたしかにHTMLコーディングの延長にある感じがするので
デザイナさんや私のようなマークアップエンジニアは理解しやすそうです。
そしてcanvasもまさにその通りで、デザイナさんが扱うにはsvgより敷居が高い
気がしますね。
> こんばんは。あんどうと申します。
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> 2010/4/23 Futomi Hatano <futomi.hat...@gmail.com>:
>
> DevFestで講演をされたマイクさんはSVGは宣言的に
> 画面を定義できるのでデザイナには理解しやすいだろうと
> おっしゃっていました。
>
> 反対にCanvasは図形をどのような手順で描画するかを
> 考えてcanvasに命令を与えないといけないのでどちらかと
> 言えばプログラマ向けでしょうね。
>
> 参考まで。
>
> > ↑IE以外の最新版ブラウザーでご覧ください。マンデルブロの描画でもです。
>
> >http://media.chikuyonok.ru/ambilight/
> > ↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
> > ビデオの左右の周辺光の部分がCanvasで描画されています。
>
> > ■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
>
> >http://9elements.com/io/projects/html5/canvas/
> > ↑これは、実際にはProsessing.js(http://processingjs.org/)を経由してCanvasで描画されています。
>
> > ■SVGのほうが有利なデモ
>
> > SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
> > もしご存じ方がいらっしゃったら、教えてください。
>
> > 最後に、Canvas と SVG の比較に関する記事をご紹介します。
>
> > 「めざましTech」の記事です。
> >http://my.opera.com/MezamashiTech/blog/canvas-svg
>
> > 私の記事で恐縮ですが、ご参考になれば幸いです。
> >http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
>
> > --
> > Futomi Hatano
> >http://www.html5.jp/
> >http://www.futomi.com/
> >http://twitter.com/futomi
>
> > --
> > このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> > このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
>
> >http://media.chikuyonok.ru/ambilight/
> > ↑これは、Firefox 3.6, Safari 4, Opera 10.51のどれかでご覧ください。
> > ビデオの左右の周辺光の部分がCanvasで描画されています。
>
> > ■現在はCanvasのほうが有利だったけど、IE9の登場によってSVGでも将来はOKかな？と思えるデモ
>
> >http://9elements.com/io/projects/html5/canvas/
> > ↑これは、実際にはProsessing.js(http://processingjs.org/)を経由してCanvasで描画されています。
>
> > ■SVGのほうが有利なデモ
>
> > SVGで作られたアメリカの地図のデモをどっかで見かけたのですが。。。
> > もしご存じ方がいらっしゃったら、教えてください。
>
> > 最後に、Canvas と SVG の比較に関する記事をご紹介します。
>
> > 「めざましTech」の記事です。
> >http://my.opera.com/MezamashiTech/blog/canvas-svg
>
> > 私の記事で恐縮ですが、ご参考になれば幸いです。
> >http://www.html5.jp/blog/2009/10/06/svg-vs-canvas/
>
> > --
> > Futomi Hatano
> >http://www.html5.jp/
> >http://www.futomi.com/
> >http://twitter.com/futomi
>
> > --
> > このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> > このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> > このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> > 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
>
> --
> ANDO Yasushi
> - andy...@gmail.com
> -http://d.hatena.ne.jp/technohippy/
> -http://twitter.com/technohippy
>
> --
> ANDO Yasushi
> - andy...@gmail.com
> -http://d.hatena.ne.jp/technohippy/
>
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
> --
> このメールは Google グループのグループ「html5-developers-jp」の登録者に送られています。
> このグループに投稿するには、html5-dev...@googlegroups.com にメールを送信してください。
> このグループから退会するには、html5-developer...@googlegroups.com にメールを送信してください。
> 詳細については、http://groups.google.com/group/html5-developers-jp?hl=jaからこのグループにアクセスしてください。
wakasa
Apr 24, 2010, 7:42:27 AM4/24/10
to html5-developers-jp
若狹です。
もうまとめが完了してるところで、話の腰を折る脱線余談だと思って読み流してください。
個人的にAdobe最高！な人なので、ものすごくAdobe寄りの内容です。
よくネット記事などみると、Canvas vs FlashみたいなところいわれてCanvasってすごいんじゃね？というのが流れていますが、あれっ
て本質的にSVG vs Flashとして焚きたててもいいんじゃないかと。
SVGって結構昔からあって、Flashに負けた言語みたいなオーラがあるから話題に出てこないんだと思いますが。
で、Flashの話になりますが元々ベクター系のツールです。
※Flashを右クリックして拡大とかしてギザギザにならないことで理解できるかと。
そして内部でラインを変形させたりしていろんなアニメーションを作っていくという点でも
オブジェクトを認識できるというSVGが同類です。
で、マニアックな話になりますがFlashの話でFlashPlayer8でBitmapCashというものが増えました。
これは描画したものを画像として作ってキャッシュすることで描画を早くしようというものです。
描画したものをキャプチャしたり、ビット単位で色取得したりできるのもこのころです。
で、この部分がCanvas的なアプローチで描画を早くしようとしたところで、ビットマップにするという選択肢になったというところです。
というところからみても、
・ベクターは描画が遅いけど、使い勝手がいい
・ビットマップは描画が早いけど、使い勝手が悪い
というのがFlashの歴史上からも明確です。
上記のをまぜて考えると、ものすごく反対意見がでるとは思いますが、
FlashPlayer ≒ SVG+(Canvas+Video)+Audio+.....
かなと。
※このカッコのところ説明すると感覚論なので割愛・・
なんで、IE9でCanvasをもごもごとしているのは
・よくあるFlashの使い方の代わりになるものとしてSVGなのではないか
・JavaScriptはSVGの方が親和性が高いのではないか
という思想なのではないかと。深読みですが。
そうなるとSVGとCanvasではなく、SVGに注力してきっちり実装すべきという判断なのかなと。
ま、僕の勝手な妄想ですが・・
というわけで、Canvas vs SVGと全然違う話でした。
長文駄文失礼しました。
p.s.
こうMLにこういうメールを投げるだけで、若者から拒絶されるおっさんとして認定されてしまいます・・。
SVG+Adobeの関係とか見ると今のこの状況がニヤニヤしてしまったりしてるところでもうおっさんですが。
そんな人たちにGoLiveとかLiveMotionとか、[http://www.adobe.com/jp/svg/]でピクピクっとさせておきま
す。
もうまとめが完了してるところで、話の腰を折る脱線余談だと思って読み流してください。
個人的にAdobe最高！な人なので、ものすごくAdobe寄りの内容です。
よくネット記事などみると、Canvas vs FlashみたいなところいわれてCanvasってすごいんじゃね？というのが流れていますが、あれっ
て本質的にSVG vs Flashとして焚きたててもいいんじゃないかと。
SVGって結構昔からあって、Flashに負けた言語みたいなオーラがあるから話題に出てこないんだと思いますが。
で、Flashの話になりますが元々ベクター系のツールです。
※Flashを右クリックして拡大とかしてギザギザにならないことで理解できるかと。
そして内部でラインを変形させたりしていろんなアニメーションを作っていくという点でも
オブジェクトを認識できるというSVGが同類です。
で、マニアックな話になりますがFlashの話でFlashPlayer8でBitmapCashというものが増えました。
これは描画したものを画像として作ってキャッシュすることで描画を早くしようというものです。
描画したものをキャプチャしたり、ビット単位で色取得したりできるのもこのころです。
で、この部分がCanvas的なアプローチで描画を早くしようとしたところで、ビットマップにするという選択肢になったというところです。
というところからみても、
・ベクターは描画が遅いけど、使い勝手がいい
・ビットマップは描画が早いけど、使い勝手が悪い
というのがFlashの歴史上からも明確です。
上記のをまぜて考えると、ものすごく反対意見がでるとは思いますが、
FlashPlayer ≒ SVG+(Canvas+Video)+Audio+.....
かなと。
※このカッコのところ説明すると感覚論なので割愛・・
なんで、IE9でCanvasをもごもごとしているのは
・よくあるFlashの使い方の代わりになるものとしてSVGなのではないか
・JavaScriptはSVGの方が親和性が高いのではないか
という思想なのではないかと。深読みですが。
そうなるとSVGとCanvasではなく、SVGに注力してきっちり実装すべきという判断なのかなと。
ま、僕の勝手な妄想ですが・・
というわけで、Canvas vs SVGと全然違う話でした。
長文駄文失礼しました。
p.s.
こうMLにこういうメールを投げるだけで、若者から拒絶されるおっさんとして認定されてしまいます・・。
SVG+Adobeの関係とか見ると今のこの状況がニヤニヤしてしまったりしてるところでもうおっさんですが。
そんな人たちにGoLiveとかLiveMotionとか、[http://www.adobe.com/jp/svg/]でピクピクっとさせておきま
す。
Chihiro Ito
Apr 24, 2010, 2:43:24 PM4/24/10
to html5-developers-jp
こんにちは、伊藤です。
たいへん興味深いスレッドで、楽しく拝見しました。
思いっきり乗り遅れてしまいましたが、canvasの大きな特徴で
まだ言及されていないものがもうひとつだけあったりします。
（私の読み落としでしたらごめんなさい）
それは、 canvas を使うと toDataURL メソッドによって静止画像
（主に .png 形式）が生成できるという点です。
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
これのおかげで、 canvas はサーバーに全く頼らずに描画結果の画像を
ユーザーに提供できます。 SVG も広義の画像ファイルではありますが、
サポートしているツールの数などを考えると、 PNG 画像が生成できる
意義は大きいかと思います。
画像の編集は SVG で行って、最終的な画像出力は canvas で行う、
という合わせ技も面白いかもしれません。 SVG を canvas にレンダリング
するライブラリも存在します。
http://code.google.com/p/canvg/
IE9 が canvas に対応しないのは、本当に残念です :(
> ...
>
> もっと読む ≫
たいへん興味深いスレッドで、楽しく拝見しました。
思いっきり乗り遅れてしまいましたが、canvasの大きな特徴で
まだ言及されていないものがもうひとつだけあったりします。
（私の読み落としでしたらごめんなさい）
それは、 canvas を使うと toDataURL メソッドによって静止画像
（主に .png 形式）が生成できるという点です。
http://dev.w3.org/html5/canvas-api/canvas-2d-api.html#todataurl-method
これのおかげで、 canvas はサーバーに全く頼らずに描画結果の画像を
ユーザーに提供できます。 SVG も広義の画像ファイルではありますが、
サポートしているツールの数などを考えると、 PNG 画像が生成できる
意義は大きいかと思います。
画像の編集は SVG で行って、最終的な画像出力は canvas で行う、
という合わせ技も面白いかもしれません。 SVG を canvas にレンダリング
するライブラリも存在します。
http://code.google.com/p/canvg/
IE9 が canvas に対応しないのは、本当に残念です :(
>
> もっと読む ≫
Chihiro Ito
Apr 24, 2010, 3:20:13 PM4/24/10
to html5-developers-jp
すいません、読み返してみると canvas まんせーな投稿になっているので補足 ^^;
個人的には SVG, canvas 双方とも有用な API だと思っています。
SVG に関しては、強力なテキスト描画やフィルター機能、
使い慣れた DOM API によるプログラミングモデル、
アクセシビリティーへの配慮などが魅力です。
双方が普及して、用途に応じて使い分けられるようになってほしいところです。
個人的には SVG, canvas 双方とも有用な API だと思っています。
SVG に関しては、強力なテキスト描画やフィルター機能、
使い慣れた DOM API によるプログラミングモデル、
アクセシビリティーへの配慮などが魅力です。
双方が普及して、用途に応じて使い分けられるようになってほしいところです。
Atsushi Shimono
Apr 25, 2010, 4:11:14 AM4/25/10
to html5-dev...@googlegroups.com
-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA512
shimonoです
On 2010/04/23 21:23, 3panda wrote:
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
SVGはベクターグラフィックスで、エレメントをそのままDOMで扱える、というメリッ
トがあります。ということを利用して、機器のステータス画面とかをウェブ経由でブラ
ウザ上に表示するとかいうのを(だいぶ前から)やっています。
外部アクセスはできないところばかりなので、サンプルを出せないのですが、画像を
DOMとして扱えるというような感覚で、一度やるとやみつき(?)ですね。。
あとは、SVGにはforeignObjectというのがあるので、これ経由でcanvasではできない
ようないろいろな埋め込みによる表現が可能になります。(要するによくあるビデオのデ
モとか、、？)
# canvasでもできる、という話があればご指摘ください。。
いわゆるHTMLドキュメントへのSVGフィルターの適用、というような話はこれの発展形
と思えばわかりやすいのかもしれません。
では
- --
Atsushi Shimono - shi...@bug-ja.org
Mozilla Evangelist
Bugzilla Localization WG member; Bugzilla Users Group in Japan
skype:shimono_univ; http://blog.himor.in/; http://facebook.com/himorin
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (MingW32)
iQIcBAEBCgAGBQJL0/khAAoJEHI5evwJBSZdE4UQAKuofaNkFZ+OkA3w6p/S8SJM
kwuyX6xFwpEZXSqmIM4Jqpsd/ugmE9fSkGvvhqVyqrApD9UXAUnVrgGOqymKiCHW
ZHKu4ILH1FV2e9x6aSjLGh3zC9OFbOnDyxtItmUgtPmnVRGnpMalapHC1SxUPIBP
h1Yc7F1wjryy5asN3wx1Ad6LXAKrurfBAcI4sLOnOTeX28VmjjJ3Da/3pwfTLzlc
9Hl/raRSGGu5xgfBJ3cXbImCUNYVfK5FMvP6I2K7C869uQTUS2LCRLj6wNzTqu1x
npJPDmbgNYV/AtFxMK//Rjy91GQBH8UJwrPlm77/MLM9VjJq8t1ltZ/CsZF83Xvr
dwckRB29EkSEsgTFi7mAx2dH1+vCAm4Z9RW/w6b1N6kGDg2ZFX3K0lipLAgaVOtc
kt9A2i+rQ/XiiH70THCc/uVsXX6TDLW0cMKCwMNwG5/wJWn+CkTLBHSJvl/178tL
EGA/OKNAxSs00gQPH5gPee/uZoK9zknltF/OEeIro6uteu1LSivSB+efCyPCJpR9
x9OVaJwJIK5iXmZ1OLFRktm7DZVzZltT7X+WQxqpyZt6sbrZgjvKVSp9TqXfkC/c
vfvkjs1L4kFa5hKVzKJQSu4w0zs61acHRNzDHs/OPxjtm/g00p2pPB2IBf27F/Bw
G9Qpoap031Fahws+KXoN
=NAcz
-----END PGP SIGNATURE-----
Hash: SHA512
shimonoです
On 2010/04/23 21:23, 3panda wrote:
> このグループの参加者の方で「svg」について知識をお持ちの方がいらっしゃいますでしょうか？
> 後学の為に「canvas」と「svg」それぞれ使いどころ等、教えて頂ければ幸いです。
トがあります。ということを利用して、機器のステータス画面とかをウェブ経由でブラ
ウザ上に表示するとかいうのを(だいぶ前から)やっています。
外部アクセスはできないところばかりなので、サンプルを出せないのですが、画像を
DOMとして扱えるというような感覚で、一度やるとやみつき(?)ですね。。
あとは、SVGにはforeignObjectというのがあるので、これ経由でcanvasではできない
ようないろいろな埋め込みによる表現が可能になります。(要するによくあるビデオのデ
モとか、、？)
# canvasでもできる、という話があればご指摘ください。。
いわゆるHTMLドキュメントへのSVGフィルターの適用、というような話はこれの発展形
と思えばわかりやすいのかもしれません。
では
- --
Atsushi Shimono - shi...@bug-ja.org
Mozilla Evangelist
Bugzilla Localization WG member; Bugzilla Users Group in Japan
skype:shimono_univ; http://blog.himor.in/; http://facebook.com/himorin
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.4.10 (MingW32)
iQIcBAEBCgAGBQJL0/khAAoJEHI5evwJBSZdE4UQAKuofaNkFZ+OkA3w6p/S8SJM
kwuyX6xFwpEZXSqmIM4Jqpsd/ugmE9fSkGvvhqVyqrApD9UXAUnVrgGOqymKiCHW
ZHKu4ILH1FV2e9x6aSjLGh3zC9OFbOnDyxtItmUgtPmnVRGnpMalapHC1SxUPIBP
h1Yc7F1wjryy5asN3wx1Ad6LXAKrurfBAcI4sLOnOTeX28VmjjJ3Da/3pwfTLzlc
9Hl/raRSGGu5xgfBJ3cXbImCUNYVfK5FMvP6I2K7C869uQTUS2LCRLj6wNzTqu1x
npJPDmbgNYV/AtFxMK//Rjy91GQBH8UJwrPlm77/MLM9VjJq8t1ltZ/CsZF83Xvr
dwckRB29EkSEsgTFi7mAx2dH1+vCAm4Z9RW/w6b1N6kGDg2ZFX3K0lipLAgaVOtc
kt9A2i+rQ/XiiH70THCc/uVsXX6TDLW0cMKCwMNwG5/wJWn+CkTLBHSJvl/178tL
EGA/OKNAxSs00gQPH5gPee/uZoK9zknltF/OEeIro6uteu1LSivSB+efCyPCJpR9
x9OVaJwJIK5iXmZ1OLFRktm7DZVzZltT7X+WQxqpyZt6sbrZgjvKVSp9TqXfkC/c
vfvkjs1L4kFa5hKVzKJQSu4w0zs61acHRNzDHs/OPxjtm/g00p2pPB2IBf27F/Bw
G9Qpoap031Fahws+KXoN
=NAcz
-----END PGP SIGNATURE-----
Reply all
Reply to author
Forward
0 new messages