Skip to main content

Canvas および SVG

更新日: 2011 年 6 月 24 日


デザイナーや開発者は、Canvas を使用して、JavaScript でページにビットマップ グラフィックを描くことができます。Canvas は、ページ内の要素を定義する <canvas> 要素と、その要素内で描画を行う一連の API で構成されます。

SVG は、イメージや図形を描くための XML ベースの形式です。SVG イメージはベクター ベースなので拡大率を変更しても影響を受けません。拡大した場合でもイメージの品質がほぼ維持されます。

チュートリアル

Canvas 特殊効果の作成方法

このチュートリアルでは、HTML5 Canvas を使用して、Web グラフィックに特殊効果を与える方法を説明します。

Web グラフィックを作成するのに Canvas または SVG を選択する方法

HTML5 Canvas と Scalable Vector Graphics (SVG) を使用して、対話型の Web グラフィックを作成することができます。この 2 つの技術のプログラミング方法を比較することで、どちらを選択するか判断する際に役立ちます。

Canvas を使用してスペース ゲームを作成する方法

HTML 5 Canvas 機能を使用してオリジナルのアーケードスタイルのスペース ゲームを開発する方法について学習します。

SVG を Web ページに追加する方法

Web ページで SVG をレンダリングする一般的な方法を紹介します。

SVG でズームやパンを行う方法

SVG を使用して拡大縮小やパンを行う方法を紹介し、拡大縮小やパンが可能な複雑な組織図の例を示します。基本的な HTML と JavaScript の知識が前提となります。また、Windows Internet Explorer 9 のように HTML5 のインライン SVG をレンダリングできるブラウザーも必要です。

ページのトップへ

IE チームのブログ記事

翻訳版
※本記事は、マイクロソフト本社の IE チームのブログから記事を抜粋し、翻訳したものです。

よくある Canvas の問題を解消する
元記事: Debugging Common Canvas Issues

サイトに <canvas> を使用している開発者のために、IE9 を含めた各種のブラウザーでこの要素の正常な動作を保証するための方法を 2 つ紹介します。ブラウザーの検出ではなく機能の検出を用いる方法と、<!DOCTYPE html> を使用する方法です。

同一のマークアップ: <canvas>、<audio>、および <video> の使用
元記事: Same Markup: Using canvas, audio, and video

これまでいくつかのブログで、Internet Explorer 9 における "同一のマークアップ" の実現を繰り返し説明してきました。"同一のマークアップ" を実現するには、IE9 が適切な機能をサポートし、同じ HTML、JavaScript、CSS が "そのまま" 他のブラウザーと同じように動作する必要があります。IE9 は "同一のマークアップ" の実現に向けての貢献の 1 つとして、HTML5 の <canvas> 要素、<audio> 要素、<video> 要素に対する一貫したサポートを提供しています。

SVG の進歩
元記事: More on SVG

SVG は W3C によって管理されるベクター イメージ形式です。3 回目と 4 回目の IE9 Platform Preview のリリースでは、SVG の機能が全面的に提供されるようになりました。主な追加機能には、SVG グラデーション、パターン、クリッピング、およびマスキングがあります。これらの機能は、奥行きとテクスチャを使ってのイメージの作成に使用されることが多く、通常は比較的複雑な SVG ファイルで使用されます。

SVG Open に向けて
元記事: Getting Ready for SVG Open

SVG はそもそもドキュメント形式を基にしています。現在も、最も一般的な用途は静的ドキュメント形式です。複雑な機械製図などの図は、拡大縮小の機能、高品質の印刷、移植性が要求されるという点から考えて SVG が最適です。
HTML5 とともに、SVG は次世代の対話型グラフィック Web に向かおうとしています。これは SVG の新しい使用方法と言えます。コミュニティとしては SVG の仕様をテストする新しい方法を考える必要があります。

SVG in IE9 Roadmap
元記事: SVG in IE9 Roadmap

我々の標準技術と相互運用に対する約束の一部として、我々は W3C's Scalable Vector Graphics (SVG) 1.1 (Second Edition) Specification をまずサポートする Internet Explorer 9 Platform Preview を提供できることをとても嬉しく思っています。第2版の SVG の仕様には、W3C-Recommended first edition SVG 1.1 specification を含みます。

英語版

Internet Explorer ガイド - Canvas および SVG

Debugging Common Canvas Issues
For those of you using canvas on your site, we have two tips to make sure it wor... 詳細情報
IE9 Includes Hardware Accelerated Canvas
One area that developers are especially excited about is the potential of HTML5 ... 詳細情報
Same Markup: Using canvas, audio, and video
On this blog we’ve repeatedly discussed enabling the "Same Markup" for Internet ... 詳細情報
Getting Ready for SVG Open
SVG has its roots in a document format. The most popular use case today is the s... 詳細情報
More on SVG from the IE Engineering Team
SVG is a vector image format managed by the W3C. The release of the third and fo... 詳細情報
SVG in IE9 Roadmap
As part of our commitment to standards and interoperability, we are excited to p... 詳細情報

ページのトップへ

テクニカル記事 (英語)

Internet Explorer ガイド - Canvas および SVG

How to Create Canvas Special Effects
This tutorial explains how to use HTML5 Canvas to create photographic special effects for web graphics.
How to Zoom and Pan with SVG
Introduces how to use SVG to zoom and pan, and includes an example of a complex organizational chart that can be zoomed and panned. Basic HTML and JavaScript knowledge are assumed, as well as access to a browser that can render inline SVG in HTML5, such as Windows Internet Explorer 9.
How to Add SVG to a Webpage
Introduction to common ways to render SVG in your webpage.
How to Choose Between Canvas and SVG to Create Web Graphics
HTML5 Canvas and Scalable Vector Graphics (SVG) can be used to create interactive web graphics. Comparing the programming techniques of these two technologies can help you decide which one to choose.
How to Use Canvas to Create a Space Game
You learn how to use HTML 5 Canvas features to develop an original arcade-style space game.
Internet Explorer 9 Beta Guide for Developers: SVG
The Canvas section of the IE9 Guide for Developers give you a quick look at SVG (Scalable Vector Graphics) support in Internet Explorer 9.
An Introduction to the HTML 5 Canvas Element
For those not familiar with it, the HTML 5 canvas element provides a rectangular area where you can draw anything you want on. It's pretty slick and seems pretty powerful. In essence, instead of solely relying on image creation tools like Photoshop, GIMP or Paint.net for generating graphics, you now have a native element on which to do it.
Description of the canvas element from the W3C HTML5 spec
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
Latest version of the SVG Tiny 1.2 spec from W3C
This specification defines the features and syntax for Scalable Vector Graphics (SVG) Tiny, Version 1.2, a language for describing two-dimensional vector graphics in XML, combined with raster graphics and multimedia.
Latest version of the SVG 1.1 spec from W3C
This specification defines the features and syntax for Scalable Vector Graphics (SVG) Version 1.1, a modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML.

ページのトップへ

サンプル (英語)

Internet Explorer ガイド - Canvas および SVG

IE Beatz Canvas Demo
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.
Canvas Pad: Learn and Play with HTML5 Canvas!
Update the code and press the 'Ctrl+Enter' key to update the Canvas real-time! This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.
Mr. Potato Gun Canvas Demo
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.
Canvas Zoom sample powered by Seadragon Ajax
This sample will require an HTML5-compatible browser, such as Internet Explorer 9 Beta or Internet Explorer 9 Platform Preview.
SVG–oids Canvas Sample
This re-creation of a classic 1979 arcade game shows what can be done with a little bit of SVG, JavaScript, and programming skill.

ページのトップへ

評価してください: