HTML5のタグ(25)

HTML5ではSVGとCanvasの2種類の描画方式があるわけだが、さてどちらをどのように使い分けたら良いか？まだ規格が進行中ということもあり、最終的な判断はもっと先になりそうだが、現時点で一般的に言われているのは「アニメーションやゲームのような高速なレンダリングが要求される場合にはCanvas」「インタラクティブが要求されるマップとかインターフェイスの場合はSVG」ということのようだ。いずれにしても複雑なJavaScriptを書かなければいけないので、ゼロから作るのは簡単ではない。ウェブ上にも既に色々なサンプルがアップされているようなので、それらを部分的に書き替えながらいじくってみるのもいいだろう。スティーブジョブスが「Flash Playerは必要ない！」と言った意味が分かる気がしてくるだろう。


ウェブデザイナの苦言

～が悪い

音楽CDが売れなくなるのは動画サイトのせい、本が売れなくなったのはインターネットのせい、といったように何かと「何かのせい」にしたがるが、基本的にはそのような世の流れを読んでいなかった自分のせいだろ！ということを理解すべきだろう。産業の中には発展するものもあれば衰退するものもある。衰退には色々な要因があって、何かのせいにしようとすればいくらでもあるだろう。少子化のせい、リーマンのせい、中国の産業発展のせい、地球温暖化のせい。しかしA級戦犯は自分たちだ。


ウェブデザイナの苦言

HTML5のタグ(24)

SVGによる描画の例（入門HTML5プログラミング 翔泳社より）が以下である。この場合はChromeでは正しく表示されたが、FireFoxでは星形が崩れてしまっている。

<?xml version="1.1" standalone="yes"?>
<svg version="1.1"
viewBox"0.0 0.0 720.0 540.0"
fill="none" stroke="none"
stroke-linecap="square"
stroke-miterline="10"
xmlns="https://www.w3.org/2000/svg"
xmlns:xlink="http;//www.w3.org/1999/xlink">
<path d="M240 148L298 148L316 96L334 148L392 148L345 180L345 180L363 232L316
200L269 232L287 180Z"
fill-rule="nonzero"
fill="#ff9900"
stroke="#ff0000"
stroke-width="2.0"
stroke-linejoin="round"
stroke-linecap="butt">
</path></svg>


ウェブデザイナの苦言