ベクター形式のグラフィックを扱うSVGの基本
SVG（Scalable Vector Graphics）とは、HTMLやXMLなどと同じくマークアップ言語の一種で、ベクター形式と呼ばれるグラフィックを扱うための言語です。 インターネットで一般的に使われる画像形式であるJPEGやPNGなどはビットマップ形式と呼ばれ、画像をピクセルという小さな四角に分割し、「各ピクセルが何色か」という情報を集めることで、画像を構成しています。 それに対し、ベクター形式のグラフィックスでは、画像を線や曲線、円などの図形の集合体として扱います。SVGの内容は「どこからどこへ線を引く」「どこを中心に円を描く」といった情報の集合になります。ベクター形式のデータは、ビットマップ形式のデータに比べ、拡大縮小を行っても画質が悪くならないというメリットがあります。 SVGは最初のバージョンであるSVG 1.0が2001年に正式な仕様となり、現在の最新版は2011年8月に
SVGを使ったコンテンツをいろいろ見て、可能性を探ってみる | girigiribauer.com
今回は、SVGを使ったコンテンツをいろいろ見て、 どういった可能性があるのかを探ってみたいと思います。 様々なコンテンツを見ていくとよく分からなくなりそうなので、 一旦以下のようなカテゴライズをしてみます。 ビジュアル的に凝った表現 SVGの特性を利用したもの パフォーマンス クロスブラウザ、クロスデバイス（fallback） 1. ビジュアル的に凝った表現 モーグリのTweetキャッチ FinalFantasyXIII-2とMicrosoftがコラボして作られたコンテンツ。 技術的には、元々スクウェアエニックスが持っていたモーグリなどのキャラクターの資産を、Mayaという3DモデリングツールからSVGに書き出して動かしているとのことです。 このように、元々ある3Dモデルなどの資産を、ベクターデータに書き出して流用する、といった使い方は有効そうですね。ただ、全面的にSVGを使っているかとい
HTML5 SVGで作るシューティングゲーム (1/6)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御する方法を紹介しました。今回はJavaScriptとSVGを使ってシューティングゲームを作成します。 SVGアニメーション ゲームの作成に入る前に、SVG図形をアニメーションさせる方法を説明します。SVGには図形の位置やサイズをアニメーションさせる<anime>タグが用意されています。<anime>を使うとアニメーションが簡単に実現できます。 SVGアニメーションはアニメーションさせたい図形の子ノードに<anime>タグを記述し、変化させる属性値を指定します。指定できる主な属性名を以下の表に示します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
