ナビゲーションおよびリソースタイミング - ウェブパフォーマンス

ナビゲーションおよびリソースタイミング
===================

**ナビゲーションタイミング**は、ブラウザーによる文書ナビゲーションイベントを測定する指標です。**リソースタイミング**は、アプリケーションのリソースの読み込みに関する詳細なネットワークタイミングの測定値です。どちらも同じ読み取り専用のプロパティを提供しますが、ナビゲーションタイミングはメイン文書の時間を測定するのに対し、リソースタイミングはそのメイン文書内の呼び出されるすべての資産やリソース、およびリソースのリクエストされたリソースの時刻を提供します。

下記の一般的なパフォーマンス項目は非推奨です。パフォーマンス項目 API は、ナビゲーションやリソースの読み込みプロセスに沿った時刻を指定し、測定するために提供されます。非推奨ですが、ブラウザーのすべてで対応しています。

パフォーマンスタイミング
------------

リクエストされたページの読み込みパフォーマンスを測定する JavaScript API であるパフォーマンスタイミング API は非推奨ですが、すべてのブラウザーで対応しています。これはパフォーマンスナビゲーションタイミング API に置き換えられています。

パフォーマンスタイミング API は、ページ読み込みプロセスの各ポイントにつ達したかを記述する読み取り専用の時刻をミリ秒 (ms) 単位で提供していました。下記画像に表示されているように、ナビゲーションプロセスは `navigationStart` (en-US), `unloadEventStart` (en-US), `unloadEventEnd` (en-US), `redirectStart` (en-US), `redirectEnd` (en-US), `fetchStart` (en-US), `domainLookupStart` (en-US), `domainLookupEnd` (en-US), `connectStart` (en-US), `connectEnd` (en-US), `secureConnectionStart` (en-US), `requestStart` (en-US), `responseStart` (en-US), `responseEnd` (en-US), `domLoading` (en-US), `domInteractive` (en-US), `domContentLoadedEventStart` (en-US), `domContentLoadedEventEnd` (en-US), `domComplete` (en-US), `loadEventStart` (en-US), `loadEventEnd` (en-US) から成ります。

![ナビゲーションタイミングイベント指標](/ja/docs/Web/Performance/Navigation_and_resource_timings/screen_shot_2019-05-03_at_1.06.27_pm.png)

上記の指標と少しの計算で、最初のバイトまでの時間、ページ読み込み時間、 DNS 参照、安全な接続かどうかなど、多くの重要な指標を計算することができます。

すべての手順を完了するのにかかる時間を測定するのを支援するために、パフォーマンスタイミング API はナビゲーションの時刻の読み取り専用の測定値を提供します。アプリの時刻を表示し、キャプチャするには、次のように入力します。

```js
let time = window.performance.timing;
```

その結果を使用して、アプリのパフォーマンスを測定することができます。

![コンソールに window.performance.timing と入力すると、 PerformanceNavigationTiming インターフェイスのすべての時刻が表示されます。](/ja/docs/Web/Performance/Navigation_and_resource_timings/navigatortiming.png)

順序は次の通りです。

| パフォーマンスタイミング | 詳細 |
| --- | --- |
| `navigationStart` (en-US) | アンロードのプロンプトが同じ閲覧コンテキスト内の前回の文書で終了したとき。前回の文書がない場合、この値は `PerformanceTiming.fetchStart` と同じになります。 |
| `secureConnectionStart` (en-US) | 安全な接続のハンドシェイクを始めた時刻。そのような接続がリクエストされなかった場合、 `0` を返します。 |
| `redirectStart` (en-US) | 最初の HTTP リダイレクトが始まった時刻。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は `0` です。 |
| `redirectEnd` (en-US) | 最後の HTTP リダイレクトが完全に完了した時刻、つまり HTTP レスポンスの最後のバイトを受信した時刻です。リダイレクトがない場合、またはリダイレクトのオリジンが同じでない場合、返される値は `0` です。 |
| `connectEnd` (en-US) | 接続がネットワークで開かれた時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立終了時刻が指定されます。持続的接続を使用している場合、値は `PerformanceTiming.fetchStart` と同じになります。接続は、安全な接続ハンドシェイク、または SOCKS 認証がすべて終了した時刻で開かれたものとみなされます。 |
| `connectStart` (en-US) | コネクションを開くためのリクエストがネットワークに送信された時刻。トランスポート層がエラーを報告し、接続確立が再度開始される場合は、最後の接続確立開始時刻が指定されます。持続的接続を使用している場合、値は `PerformanceTiming.fetchStart` と同じになります。 |
| `domainLookupEnd` (en-US) | ドメイン検索が完了した時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は `PerformanceTiming.fetchStart` と同じになります。 |
| `domainLookupStart` (en-US) | ドメイン検索を始めた時刻。持続的接続を使用している場合、または情報がキャッシュやローカルリソースに格納されている場合、値は `PerformanceTiming.fetchStart` と同じになります。 |
| `fetchStart` (en-US) |
 ブラウザーが HTTP リクエストを使用して文書を取得する準備ができた時刻。
 この時刻は、アプリケーションキャッシュを調べる*前*です。
  |
| `requestStart` (en-US) | ブラウザーが実際の文書を取得するリクエストをサーバーまたはキャッシュから送信した時刻。リクエストの開始後にトランスポートレイヤーが失敗し、接続が再開された場合、このプロパティには新しいリクエストに対応する時刻が設定されます。 |
| `responseStart` (en-US) | ブラウザーがレスポンスの最初のバイトを、サーバー、キャッシュ、ローカルリソースから受信した時刻。 |
| `responseEnd` (en-US) | ブラウザーがレスポンスの最後のバイトを受信した時刻、または、サーバー、キャッシュ、またはローカルリソースから最初に発生した場合は接続が閉じられた時刻。 |
| `domLoading` (en-US) | パーサーが作業を始めた時刻、つまり `Document.readyState` が `'loading'` に変わり、対応する `readystatechange` イベントが発生した時刻。 |
| `unloadEventStart` (en-US) | ウィンドウ内の前回の文書がアンロードを始めた時点を示す `unload` イベントが発生した時刻。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は `0` です。 |
| `unloadEventEnd` (en-US) | `unload`イベントハンドラーが完了したとき。前回の文書がない場合、または前回の文書やリダイレクト先の文書が同じオリジンでない場合、返される値は `0` です。 |
| `domInteractive` (en-US) | パーサーがメイン文書での作業を完了し、 `Document.readyState` が `'interactive'` に変わり、対応する `readystatechange` イベントが発生した時刻。 |
| `domContentLoadedEventStart` (en-US) | パーサーが `DOMContentLoaded イベントを送信する直前、つまり解釈直後に実行できるスクリプトがすべて実行された直後。` |
| `domContentLoadedEventEnd` (en-US) | 順番があろうとなかろうと、できるだけ早く実行する必要のあるスクリプトがすべて実行された直後。 |
| `domComplete` (en-US) | パーサーがメイン文書での作業を完了した時点、すなわち `Document.readyState` が `'complete'` に変わり、対応する `readystatechange イベントが発生した時点。` |
| `loadEventStart` (en-US) | `load`イベントが現在の文書に対して送信された時刻。このイベントがまだ送信されていない場合、`0`を返します。 |
| `loadEventEnd` (en-US) | `load`　イベントハンドラーが終了した時刻、すなわち load イベントが完全に完了した時刻です。このイベントがまだ送信されていないか、まだ完了していない場合、`0` を返します。 |

### タイミングの計算

これらの値を使用して、関心のある固有のタイミングを測定することができます。

```js
const dns = time.domainLookupEnd - time.domainLookupStart;
const tcp = time.connectEnd - time.connectStart;
const ssl = time.requestStart - time.secureConnectionStart;
```

### 最初のバイトまでの時間

最初のバイトまでの時間 は、 `performanceTiming` APIが利用可能な `navigationStart` （ナビゲーションの開始）から `responseStart` （レスポンスデータの最初のバイトを受信）までの時間です。

```js
const ttfb = time.responseStart - time.navigationStart;
```

### ページ読み込み時間

ページ読み込み時間 は `navigationStart` から現在の文書の load イベントが始まるまでの時間です。これらはパフォーマンスタイミング API でのみ利用可能です。

```js
let pageloadtime = time.loadEventStart - time.navigationStart;
```

### DNS 参照時間

DNS 参照時間は、 `domainLookupStart` と `domainLookupEnd` の間の時間です。これらは `performanceTiming` と `performanceNavigationTiming` API の両方で利用可能です。

```js
const dns = time.domainLookupEnd - time.domainLookupStart;
```

### TCP

TCP のハンドシェイクにかかる時間は、接続を始めてから終わるまでの時間です。

```js
const tcp = time.connectEnd - time.connectStart;
```

### SSL ネゴシエーション

`secureConnectionStart` は利用できない場合は `undefined`、 HTTPS を用いない場合は `0`、利用可能で使用した場合はタイムスタンプになります。言い換えれば、安全な接続を使用した場合、 `secureConnectionStart` は真値になり、 `secureConnectionStart` から `requestStart` までの時間は 0 より大きくなります。

```js
const ssl = time.requestStart - time.secureConnectionStart;
```

パフォーマンス項目 API
-------------

上記の一般的なパフォーマンスタイミングは非推奨ですが、完全に対応しています。`パフォーマンス項目 API` が登場し、ナビゲーションやリソースの読み込みプロセスに沿って時刻を指定したり計測したりすることができるようになりました。マークを作成することもできます。

```js
performance.getEntriesByType("navigation").forEach((navigation) => {
  console.dir(navigation);
});

performance.getEntriesByType("resource").forEach((resource) => {
  console.dir(resource);
});

performance.getEntriesByType("mark").forEach((mark) => {
  console.dir(mark);
});

performance.getEntriesByType("measure").forEach((measure) => {
  console.dir(measure);
});

performance.getEntriesByType("paint").forEach((paint) => {
  console.dir(paint);
});

performance.getEntriesByType("frame").forEach((frame) => {
  console.dir(frame);
});
```

対応しているブラウザーでは、 `performance.getEntriesByType('paint')` を使用して、 `first-paint` と `first-contentful-paint` の測定値を問い合わせることができます。 `performance.getEntriesByType('navigation')` と `performance.getEntriesByType('resource')` を使用して、それぞれナビゲーションとリソースの時刻を問い合わせます。

ナビゲーションタイミング
------------

ユーザーがウェブサイトやアプリケーションをリクエストすると、ブラウザーに表示するために、ユーザーエージェントは DNS 参照、 TCP ハンドシェイク、 SSL 交渉を含む一連の手順を経て、ユーザーエージェントが実際のリクエストを行い、サーバーがリクエストされた資産を返します。その後、ブラウザーは受け取ったコンテンツを解釈し、DOM、CSSOM、アクセシビリティ、レンダリングツリーを構築し、最終的にページをレンダリングします。ユーザーエージェントが文書の解釈をやめると、ユーザーエージェントは文書の準備状態を *interactive* に設定します。解釈する必要のある遅延スクリプトがある場合は、それを実行し、DOMContentLoaded を発行します。これで文書は読み込み後のタスクを処理できるようになり、この時点で文書は完全に読み込まれたとみなされます。

```js
const navigationTimings = performance.getEntriesByType("navigation");
```

`performance.getEntriesByType('navigation')` は、 navigation 型の PerformanceEntry オブジェクトの配列を返します。

![performance.getEntriesByType('navigation'); がこの文書のコンソールに入力されたときの結果。](/ja/docs/Web/Performance/Navigation_and_resource_timings/perfgentrybytypenavigation.png)

このようなタイミングから、多くのことを得ることができます。上の画像では、 *name* プロパティを通して、時刻を計測しているファイルがこの文書化であることがわかります。 この説明の残りの部分では、以下の変数を使用します。

```js
const timing = performance.getEntriesByType("navigation")[0];
```

### プロトコル

次の問い合わせを使用することで、プロトコルをチェックすることができます。

```js
const protocol = timing.nextHopProtocol;
```

リソースをフェッチするために使用したネットワークプロトコルを返します。この場合は `http/2` のために `h2` を返します。

### 圧縮

圧縮率を取得するには、 transferSize を decodedBodySize で割り、それを 100% から引きます。 74% 以上が節約されたことが分かります。

```js
const compressionSavings = 1 - timing.transferSize / timing.decodedBodySize;
```

次のもので計算できます。

```js
const compressionSavings = 1 - timing.encodedBodySize / timing.decodedBodySize;
```

ただし、 `transferSize` にはオーバーヘッドのバイトが含まれます。

比較のためにネットワークタブを見てみると、非圧縮で 87.24KB のサイズのファイルを 22.04KB で転送しています。

![ネットワークタブを介して転送されたバイトとサイズの表示](/ja/docs/Web/Performance/Navigation_and_resource_timings/bytesdownloaded.png)

これらの数値で計算すると、`1 - (22.04 / 87.24) = 0.747` という同じ結果が取得されます。ナビゲーションタイミングは、プログラムで転送のサイズと帯域幅の節約を調べる方法を提供します。

これはこの単一の文書のサイズです。つまり、このリソースだけのサイズであり、すべてのリソースを合わせたサイズではないことに注意してください。しかし、所要時間、読み込むイベント、DOM 関連の時刻は、この単一の資産ではなく、ナビゲーション全体に関係しています。クライアント側のウェブアプリケーションは、転送サイズが 10000 以下、デコードする本体サイズが 30000 以下では、これよりも高速に見えるかもしれませんが、JavaScript や CSS、メディア資産が肥大化していないことを意味しているわけではありません。圧縮率を調べることは重要ですが、 DOMContentLoaded イベントが終わってから DOM が完了するまでの時間や期間も確実に調べてください。メインスレッドで JavaScript を長時間実行すると、ユーザーインターフェイスが応答しなくなる可能性があるからです。

### リクエスト時間

APIは、あなたが望むかもしれないすべての測定を提供するわけではありません。例えば、リクエストにかかった時間は？答えを得るために、ある測定値を使用することができます。

レスポンスタイムを測定するには、レスポンス開始時刻からリクエスト開始時刻を引きます。リクエスト開始時刻は、ユーザーエージェントがサーバー、関連するアプリケーションキャッシュ、またはローカルリソースからリソースのリクエストを始める直前の時刻です。レスポンス開始時刻は、ユーザーエージェントの HTTP パーサーが、関連するアプリケーションキャッシュから、あるいはローカルリソースから、あるいはサーバーから、レスポンスの最初のバイトを受信した直後の時刻です。

```js
const request = timing.responseStart - timing.requestStart;
```

### load イベントの所要時間

現在の文書の load イベントが発生する直前から、現在の文書の load イベントが完全に終了した時刻までのタイムスタンプを引くことで、 load イベントの所要時間を測定することができます。

```js
const load = timing.loadEventEnd - timing.loadEventStart;
```

### DOMContentLoaded イベント

DOMContentLoaded イベントの所要時間は、ユーザーエージェントが DOMContentLoaded イベントを発行する直前の時刻値から、イベントが完全に終了した直後の時刻値を引くことによって測定されます。これを 50ms またはそれ以上に保つことで、確実にレスポンスの良いユーザーインターフェイスを保証することに役立ちます。

```js
const DOMContentLoaded =
  timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart;
```

### 所要時間

所要時間があります。所要時間は PerformanceNavigationTiming.loadEventEnd プロパティと PerformanceEntry.startTime プロパティの差です。

PerformanceNavigationTiming インターフェイスは、`navigate`、`reload`、`back_forward`、`prerender` を返すことで、計測しているナビゲーションの種類に関する情報も提供します。

リソースタイミング
---------

ナビゲーションタイミングはメインページ（一般に、他のすべての資産がリクエストされた HTML ファイル）のパフォーマンスを測定するのに対し、リソースのタイミングは個々のリソース（メインページから呼び出される資産、およびそれらのリソースがリクエストする資産）のタイミングを測定します。測定の多くは似ています。 DNS 参照、 TCP ハンドシェイク、安全な接続の開始はドメインごとに 1 回ずつ行われます。

![リソースの時刻の図](/ja/docs/Web/Performance/Navigation_and_resource_timings/resourcetiming-timestamps.jpg)

主な用途は、それぞれのリソースを見ていくことです。

関連情報
----

* `PerformanceNavigationTiming`
* `PerformanceResourceTiming`,
* `PerformanceMark`
* `PerformanceMeasure`
* `PerformancePaintTiming`


パフォーマンスの基礎 - ウェブパフォーマンス

パフォーマンスの基礎
==========

パフォーマンスとは、効率性を意味します。この文書では、オープンウェブアプリの観点から、パフォーマンスとは何か、ブラウザープラットフォームでどのようにパフォーマンスを向上させるか、テストや改善にどのようなツールやプロセスを使用できるかについて一般的な説明をします。.

パフォーマンスとは
---------

最終的には、ユーザーが知覚したパフォーマンスが唯一のパフォーマンスとなります。ユーザーは、触ったり、動かしたり、話したりして、システムに入力を与えます。その代わり、ユーザーは視覚、触覚、聴覚を通じて出力を知覚します。パフォーマンスとは、ユーザーの入力に応じてシステムが出力するものの品質のことです。

他の条件が同じであれば、ユーザーが知覚するパフォーマンス (以下、UPP) 以外のターゲットに最適化されたコードは、 UPP に最適化されたコードと競合すると負けてしまいます。ユーザーは、例えば、 1 秒間に 1,000 件しかデータベーストランザクションを処理しないが応答性の高いスムーズに動くアプリの方を、 1 秒間に 100,000,000 件のデータベーストランザクションを処理するカクカクした応答性の低いアプリよりも好みます。もちろん、他の指標を最適化することは決して無意味ではありませんが、実際の UPP ターゲットが最優先です。

以下の節では、必須のパフォーマンス指標を指摘し、説明します。

### 応答性

応答性とは、ユーザーの入力に応じてシステムがどれだけ速く出力 (複数の場合もある) を行うかを意味します。例えば、ユーザーが画面をタップすると、ピクセルが特定の方法で変化することを期待します。この操作の場合、応答性の指標は、タップしてからピクセルが変化するまでの経過時間となります。

応答性には、複数の段階のフィードバックが含まれることがあります。アプリケーションの起動は、特に重要なケースの一つで、詳しくは後述します。

応答性が重要なのは、人は無視されるとイライラしたり怒ったりするからです。アプリはユーザーの入力に応答しない間、ユーザーを無視していることになります。

### フレームレート

フレームレートとは、システムがユーザーに表示するピクセルを変化させる速度のことです。例えば、毎秒 10 フレームのゲームよりも、毎秒 60 フレームのゲームの方が好きだというのは、理由を説明できなくても、誰もが知っている概念です。

フレームレートは「サービスの質」の指標としても重要です。コンピューターのディスプレイは、現実を模倣した光子をユーザーの目に届けることで、ユーザーの目を「欺く」ように設計されています。例えば、文字が印刷された紙は、光子をあるパターンでユーザーの目に反射させます。リーダーアプリは、ピクセルを操作することで、同じようなパターンで光子を放出し、ユーザーの目を「騙す」のです。

脳は考えるとき、動きはギクシャクしたバラバラなものではなく、滑らかに連続して更新されるものだと考えます。 (ストロボはそれを逆手に取り、脳の入力を奪って離散的な現実を錯覚させるから面白いのです）。コンピューターのディスプレイでは、フレームレートが高ければ高いほど、より忠実に現実を再現することができます。

**メモ:** 人間は通常、60Hz 以上のフレームレートの違いを知覚することができません。そのため、最近の電子ディスプレイは、60Hz で更新するように設計されています。例えばハチドリには、テレビが途切れ途切れで非現実的に見えることでしょう。

### メモリーの使用

**メモリーの使用量**も重要な指標です。応答性やフレームレートとは異なり、ユーザーはメモリー使用量を直接知覚することはありませんが、メモリー使用量は「ユーザーの状態」に近いものです。理想的なシステムでは、ユーザーの状態を常に 100% 維持することができます。システム内のすべてのアプリケーションは同時に実行され、すべてのアプリケーションは、ユーザーが最後にアプリケーションを操作したにユーザーが設定した状態を維持します (アプリケーションの状態はコンピュータのメモリーに保存されているため、近似値になるのです)。

このことから、重要ではあるが直感的ではない副産物が得られます。設計の優れたシステムは、**空き**メモリー量を最大化しません。メモリーは資源であり、空きメモリーは使われていない資源であるからです。むしろ、設計の優れたシステムは、ユーザーの状態を維持するために可能な限り多くのメモリーを使用し、かつ他の UPP 目標を満たすように最適化されています。

これは、システムがメモリーを**浪費**すべきだという意味ではありません。システムがある特定のユーザーの状態を維持するために必要以上のメモリーを使用すると、システムは他のユーザーの状態を維持するために使用できる資源を浪費していることになります。実際には、すべてのユーザーの状態を維持できるシステムはありません。ユーザーの状態に賢くメモリーを割り当てることは、以下で詳しく説明する重要な問題です。

### 電力使用量

ここで解説する最後の指標は、**電力使用量**です。メモリー使用量と同様に、ユーザーは、端末が他のすべての UPP 目標を維持できる時間という形で、電力使用量を間接的にしか認識しません。 UPP 目標を達成するためには、システムは必要最小限の電力しか使用しないようにする必要があります。

この文書の残りの部分では、これらの指標の観点からパフォーマンスについて説明します。

プラットフォームのパフォーマンスの最適化
--------------------

この節では、 Firefox/Gecko が、すべてのアプリケーションのレベルよりも下位で、一般的にどのようにパフォーマンスに貢献しているかを簡単に説明します。開発者やユーザーの視点から、「プラットフォームは何をしてくれるのか？」という問いに答えます。

### ウェブ技術

ウェブプラットフォームには多くのツールが用意されていますが、中には特定の仕事に適したものもあります。アプリケーションロジックはすべて JavaScript で書かれています。グラフィックの表示には、 (高水準の宣言型言語である) HTML や CSS を使用するか、低レベルの命令型インターフェースである `<canvas>` 要素 (WebGL を含む) を使用します。 HTML/CSS と Canvas の「中間」に位置するのが SVG で、両者の利点を兼ね備えています。

HTML や CSS は、フレームレートやピクセルレベルでのレンダリング制御を犠牲にして、生産性を大幅に向上させます。テキストや画像は自動的に再フローされ、 UI 要素には自動的にシステムのテーマが適用されます。また、このシステムは、様々な解像度のディスプレイや右書きの言語など、開発者が最初に思いつかないような使用方法に「組み込み」で対応します。

`canvas` 要素は、開発者が直接描画できるピクセルバッファーを提供します。これにより、開発者はピクセルレベルでレンダリングを制御し、フレームレートを正確に制御することができますが、複数の解像度や方向、右書きの言語などに対応する必要があります。開発者は、おなじみの 2D 描画 API か、 OpenGL ES 2.0 をほぼ踏襲した「金属に近い」バインディングである WebGL を使用してキャンバスに描画します。

### Gecko のレンダリング

Gecko の JavaScript エンジンは、実行時 (JIT) コンパイルに対応しています。これにより、アプリケーションロジックは、Java 仮想マシンのような他の仮想マシンと同等の性能を発揮し、場合によっては「ネイティブコード」に近い性能を発揮します。

HTML、CSS、Canvas を支える Gecko のグラフィックパイプラインは、いくつかの方法で最適化されています。 Gecko の HTML/CSS レイアウトおよびグラフィックコードは、スクロールなどの一般的なケースでは、無効化や再描画を削減しますが、開発者はこのサポートを「無料」で受けることができます。 Gecko が「自動的に」描画したり、 `canvas` へアプリケーションが「手動で」描画したりするピクセルバッファーは、ディスプレイのフレームバッファーに描画される際のコピーを最小限に抑えます。これは、中間サーフェスがオーバーヘッドになるような場所 (他の多くのオペレーティングシステムにおけるアプリケーションごとの「バックバッファー」など) を避け、コンポジターハードウェアが直接アクセスできるグラフィックバッファー用の特別なメモリーを使用することで実現されています。複雑なシーンのレンダリングには、端末の GPU を使用して最大のパフォーマンスを発揮します。電力消費を抑えるために、シンプルなシーンは専用の合成ハードウェアを使ってレンダリングし、 GPU はアイドルまたはオフにしています。

リッチアプリケーションでは、完全な静的コンテンツは例外です。リッチアプリケーションでは、アニメーションやトランジション効果のある動的コンテンツを使用します。トランジションやアニメーションは、アプリケーションにとって特に重要です。開発者は、 CSS を使用することで、複雑な動作をシンプルで高レベルな構文で宣言することができます。また、 Gecko のグラフィックパイプラインは、一般的なアニメーションを効率的に描画するように高度に最適化されています。良くあるアニメーションは、システムコンポジターにオフロードされ、パフォーマンスと電力効率に優れた方法でレンダリングされます。

アプリの起動時のパフォーマンスは、実行時のパフォーマンスと同じくらい重要です。 Gecko は、 Web 全体を含むさまざまなコンテンツを効率的に読み込むように最適化されています。並列 HTML 解析、再フローと画像デコーディングのインテリジェントなスケジューリング、巧妙なレイアウトアルゴリズムなど、コンテンツを対象とした長年の改良は、Firefox でのウェブアプリケーションの改良にも同様に反映されます。

アプリケーションのパフォーマンス
----------------

この節では、「どうしたらアプリを高速にできるのか」という開発者の問いのためのものです。

### 起動時のパフォーマンス

アプリケーションの起動は、一般的に 3 つのイベントで構成されています。

* 1 つ目は、アプリケーションの**ファーストペイント** (最初のフレームを描くのに十分なアプリケーションリソースが読み込まれた時点) です。
* 2 つ目は、アプリケーションが操作可能になった時点です。例えば、ユーザーがボタンをタップすると、アプリケーションが反応するようになります。
* 最後のイベントは**完全読み込み**です。たとえば、音楽プレイヤーにユーザーのアルバムをすべて表示された時点です。

高速な起動の鍵となるのは、 2 つのことを念頭に置くことです。 UPP がすべてであること、そして上記のユーザーが知覚する各イベントには「クリティカルパス」が存在することです。クリティカルパスとは、まさに、そのイベントを発生させるために実行しなければならないコードのことです。

例えば、アプリケーションの最初のフレームを視覚的に描くためには、いくつかの HTML と、その HTML にスタイル付けする CSS で構成されます。

1. HTML を解釈する必要がある
2. その HTML の DOM を構築する必要がある
3. DOM の一部にある画像などのリソースを読み込み、デコードする必要がある
4. CSS のスタイルをその DOM に適用する必要がある
5. スタイル付けした文書を再フローさせる必要がある

このリストのどこにも、「一般的でないメニューに必要な JS ファイルの読み込み」や「ハイスコアリスト用の画像の取得とデコード」などは含まれていません。これらの作業項目は、最初のフレームを描くためのクリティカルパスには含まれていません。

当たり前のようですが、ユーザーが認識する起動イベントに早く到達するためには、*クリティカルパス上のコードだけ*を実行することが主な「コツ」です。その場面を単純化することで、クリティカルパスを短縮します。

ウェブプラットフォームは非常にダイナミックです。 JavaScript は動的に型付けされる言語であり、ウェブプラットフォームではコード、HTML、CSS、画像などのリソースを動的に読み込むことができます。これらの機能を利用して、起動後しばらくしてから不要なコンテンツを「遅延して」読み込むことで、クリティカルパスから外れた作業を先送りすることができます。

起動を遅らせるもう 1 つの問題は、リクエストに対するレスポンス (データベースのロードなど) を待つことで発生するアイドルタイムです。この問題を避けるために、アプリケーションは起動時にできるだけ早くリクエストを発行する必要があります (これを「フロントローディング」と呼びます)。そうすれば、後でデータが必要になったとき、うまくいけばすでに利用可能で、アプリケーションは待つ必要がありません。

**メモ:** 起動時のパフォーマンスを向上させるための詳しい情報は、起動時のパフォーマンスを最適化する (en-US)をご覧ください。

また、ローカルにキャッシュされた静的なリソースは、高レイテンシー、低帯域幅のモバイルネットワークを介して取得された動的なデータよりもはるかに速く読み込まれることに注意してください。ネットワークへのリクエストは、アプリケーションの早期起動のためのクリティカルパスであってはなりません。ローカルキャッシュ／オフラインアプリケーションは、サービスワーカーによって実現できます。その方法については、 サービスワーカーで PWA をオフライン対応させる を参照してください。

### フレームレート

高フレームレートを実現するためにまず重要なのは、適切な道具を選ぶことです。静止画やスクロール、アニメーションの頻度が少ないコンテンツの実装には、 HTML と CSS を使用します。レンダリングを厳密にコントロールする必要があり、テーマ性を必要としないゲームのように、高度に動的なコンテンツを実装する場合は、キャンバスを使用します。

キャンバスで使用される中身については、フレームレートの目標を達成できるかどうかは開発者次第であり、描画する内容を直接コントロールすることができます。

HTML と CSS のコンテンツでは、適切なプリミティブを使用することが高フレームレートへの道となります。 Firefox は任意のコンテンツをスクロールするために高度に最適化されているため、通常はこの点を気にする必要はありません。しかし、 CSS の放射状グラデーションの代わりに静的なレンダリングを使用するなど、速度のために汎用性や品質を犠牲にすると、スクロールのフレームレートが目標値を超えてしまうことがよくあります。 CSS のメディアクエリーを使えば、こうした妥協を必要とする端末だけに制限することができます。

多くのアプリケーションでは、「ページ」や「パネル」を使ったトランジションやアニメーションが使われています。例えば、ユーザーが「設定」ボタンをタップすると、アプリケーションの設定画面に遷移したり、設定メニューが「ポップアップ」したりします。 Firefox は、以下のようなシーンの遷移やアニメーションに高度に最適化されています。

* 端末の画面サイズ以下のページ/パネルを使用する
* CSS 変換や不透明度のプロパティを使った遷移やアニメーションを使用する

これらのガイドラインに従った遷移やアニメーションは、システムコンポジターにオフロードされ、最大限効率的に動作します。

### メモリーと電力の使用量

メモリーと電力使用量の改善は、スタートアップの高速化と同じような問題です。必要のない作業をしたり、普段使わない UI リソースをダラダラとロードしたりしてはいけません。効率的なデータ構造を使用し、画像などのリソースをしっかりと最適化しましょう。

最近の CPU は、ほとんどアイドル状態の時に低消費電力モードに入ることができます。常にタイマーを作動させたり、不要なアニメーションを実行し続けるアプリケーションは、 CPU が低電力モードに入るのを妨げます。電力効率の良いアプリケーションは、そのようなことをしてはいけません。

アプリケーションがバックグラウンドに送られると、その文書に対して `visibilitychange` イベントが発行されます。このイベントは開発者の味方です。アプリケーションはこのイベントを待ち受けするべきです。

### アプリケーションのパフォーマンスのためのコーディングのコツ

以下の実用的なヒントは、前述のアプリケーションのパフォーマンス要因の 1 つまたは複数を改善するのに役立ちます。

#### CSS アニメーションとトランジションを使用する

一部のライブラリーの `animate()` 関数は、おそらく現在、パフォーマンスが悪い数多くの技術 (例えば `setTimeout()` や `top`/`left` による位置指定) を使用しています。代わりに CSS アニメーションを使用してください。多くの場合、実際には CSS トランジションを使って実現することができます。ブラウザーはこれらの効果を最適化するように設計されており、 GPU を使用してプロセッサーのパフォーマンスへの影響を最小限に抑えながらスムーズに処理することができるため、うまく機能します。もう一つの利点は、標準化された構文を使って、アプリの他のルック＆フィールと一緒に CSS でこれらの効果を定義できることです。

CSS アニメーションでは、 キーフレームを使って効果を細かく制御することができます。また、アニメーション処理中に発生するイベントを監視して、アニメーション処理中の特定のポイントで実行する必要のある他のタスクを処理することもできます。これらのアニメーションは、 `:hover`, `:focus`, `:target` を使ったり、親要素に動的にクラスを追加したり削除したりすることで、簡単に起動することができます。

アニメーションをその場で作成したり、 JavaScript で修正したりしたい場合は、 James Long 氏が CSS-animations.js というシンプルなライブラリーを作成していますので、そちらをご利用ください。

#### CSS 変換を使用する

コンテンツの位置やスケールなどを調整するのに、絶対位置を調整したり、すべての計算を自分で行ったりする代わりに、 CSS の `transform` プロパティを使用しましょう。あるいは、`translate`, `scale`, `rotate` の各変換プロパティを使用することもできます。その理由は、繰り返しになりますが、ハードウェアアクセラレーションです。ブラウザーはこれらの作業を GPU で行い、 CPU に他の処理をさせることができます。

さらに、変換は、他では得られない機能を提供します。 2D 空間の要素を変換するだけでなく、 3 次元に変換したり、斜めにしたり、回転させたりすることができます。 Paul Irish 氏は、パフォーマンスの観点から見た `translate()` の利点を詳しく分析 (2012) しています。しかし、一般的には、 CSS アニメーションを使用する場合と同じメリットがあります。つまり、仕事に適したツールを使用し、最適化はブラウザーに任せることができるのです。また、要素の位置を簡単に拡張できる方法を使用しています。 `top` と `left` の位置指定で変換をシミュレートする場合は、多くの追加コードが必要になります。もうひとつの利点は、 `canvas` 要素で作業するのと同じだということです。

**メモ:** プラットフォームによっては、 CSS アニメーションでハードウェアアクセラレーションを利用したい場合、 `translateZ(0.1)` 変換を割り当てる必要があります。前述のとおり、パフォーマンスが向上します。しかし、使用しすぎるとメモリー消費の問題もあります。テストをして、自分のアプリケーションに最適な方法を見つけてみてはいかがでしょうか。

#### `requestAnimationFrame()` を `setInterval()` の代わりに使用する

`setInterval()` の呼び出しは、現在の状況下で可能かどうかわからない推定フレームレートでコードを実行します。このコードは、ブラウザーが実際に描画していない間、つまりビデオハードウェアが次の表示サイクルに達していない間にも、結果をレンダリングするようブラウザーに指示します。これはプロセッサー時間を浪費し、ユーザーの端末のバッテリー寿命を縮めることにもつながります。

その代わりに、 `window.requestAnimationFrame()` を使うようにしましょう。これは、ブラウザーがアニメーションの次のフレームを作り始める準備ができるまで待機し、ハードウェアが実際に何も描画しない場合は無視します。この API のもう一つの利点は、アプリが画面上に表示されていない間はアニメーションが実行されないことです (バックグラウンドで他のタスクが動作している場合など)。これにより、バッテリーの消費を抑え、ユーザーが夜空に向かってあなたの名前を罵るのを防ぐことができます。

#### イベントを即時にする

アクセシビリティに配慮した古いタイプのウェブ開発者は、キーボード入力にも対応する click イベントが大好きです。モバイル端末では、これらのイベントは遅すぎます。代わりに `touchstart` と `touchend` を使うべきです。これらのイベントには、アプリの操作を鈍くする遅延がないからです。最初にタッチ対応のテストを行えば、アクセシビリティも犠牲にすることはありません。例えば、 Financial Times は、そのために fastclick というライブラリーを使用しており、これを利用することができます。

#### インターフェイスをシンプルに保つ

HTML アプリのパフォーマンスに関する大きな問題のひとつに、たくさんの DOM 要素を移動させるとすべてが遅くなるということがあります。見た目をシンプルにして、ドラッグ＆ドロップでプロキシー要素を移動させるようにすると非常に有効です。

たとえば、長い要素のリスト (ツイートとします) がある場合、それらをすべて移動させてはいけません。代わりに、表示されているものと、現在表示されているツイートのセットの両側にいくつかあるものだけを DOM ツリーに残します。残りは隠すか削除します。データを DOM にアクセスするのではなく、 JavaScript のオブジェクトに保持することで、アプリのパフォーマンスが大幅に向上します。表示は、データそのものではなく、データのプレゼンテーションだと考えてください。だからといって、 HTML をそのままソースとして使ってはいけないというわけではありません。 HTML を一度読み込んでから 10 個の要素をスクロールさせ、表示されていない 100 個の要素を動かすのではなく、結果リストの中の自分の位置に応じて最初と最後の要素の内容を変えればいいのです。ゲームでは、スプライトにも同じことが言えます。その代わりに、画面外にスクロールした要素を新しいものが入ってきたときに再利用します。

一般的なアプリケーションのパフォーマンス分析
----------------------

Firefox や Chrome などのブラウザーには、ページの表示速度が遅いことを診断するためのツールが組み込まれています。特に、 Firefox のネットワークモニターは、ページ上のそれぞれのネットワークリクエストがいつ発生し、どれくらいの規模で、どれくらいの時間がかかっているかを正確に時系列で表示します。

![Firefox のネットワークモニターが、リクエストの取得、複数のファイル、各リソースの読み込みにかかった時間をグラフで表示しているところ。](/ja/docs/Web/Performance/Fundamentals/network-monitor.jpg)

ページに実行に時間がかかる JavaScript コードが含まれている場合、 JavaScript プロファイラーは最も遅いコードの行を特定します。

![Firefox の JavaScript プロファイラーが完成したプロファイル 1 を表示しているところ。](/ja/docs/Web/Performance/Fundamentals/javascript-profiler.png)

Gecko 内蔵のプロファイラーは、プロファイラーの実行中にブラウザーのコードのどの部分がゆっくりと動作しているかについて、さらに詳細な情報を提供する非常に便利なツールです。これは使用方法が少し複雑ですが、多くの有用な詳細情報を提供してくれます。

![Gecko 内蔵プロファイラーウィンドウが多くのネットワーク情報を表示しているところ。](/ja/docs/Web/Performance/Fundamentals/gecko-profiler.png)

**メモ:** Android のブラウザーで Firefox を起動し、リモートデバッグを有効にすることで、これらのツールを使用することができます。

特に、モバイルブラウザーでは、数十から数百のネットワークリクエストに時間がかかります。また、大きな画像や CSS グラデーションの描画にも時間がかかることがあります。大きなファイルのダウンロードは、高速なネットワークであっても時間がかかることがあります。これは、モバイルハードウェアの速度が遅すぎて、利用可能なすべての帯域幅を活用できない場合があるためです。モバイルウェブのパフォーマンスに関する一般的なヒントについては、 Maximiliano Firtman 氏の Mobile Web High Performance の談話をご覧ください。

### テストケースとバグの報告

Firefox や Chrome の開発者ツールで問題が解決しない場合や、ウェブブラウザーが原因と思われる場合は、問題を最大限に分離した縮小版のテストケースを提供してみてください。それが問題の診断に役立つことがよくあります。

HTML ページの静的なコピー (埋め込まれている画像、スタイルシート、スクリプトを含む) を保存、読み込みすることで問題を再現できるかどうかを確認してください。問題が再現できれば、静的ファイルを編集して個人情報を削除し、他の人に送って助けを求めてください (例えば、 Bugzilla レポートを提出するか、サーバーでホスティングして URL を共有してください)。また、上述のツールを使って収集したプロファイリング情報も共有してください。


遅延読み込み - ウェブパフォーマンス

遅延読み込み
======

**遅延読み込み** (Lazy loading) とは、リソースをノンブロッキング（クリティカルでない）ものとして識別し、必要なときだけこれらを読み込む戦略のことです。クリティカルレンダリングパス (en-US)の長さを短縮する方法であり、ページのロード時間の短縮につながります。

遅延読み込みはアプリケーションのさまざまな場面で発生しますが、一般的にはスクロールやナビゲーションなど、何らかのユーザー操作の際に発生します。

概要
--

 ウェブの進化に伴い、ユーザーに送信される資産の数とサイズが大幅に増加するようになりました。
 2011 年から 2019 年の間に、リソース重量の中央値は、デスクトップでは **~100KB** から **~400KB** に、モバイルでは **~50KB** から **~350KB** に増加しました。一方、画像サイズは、デスクトップで **~250KB** から **~900KB** に、モバイルで **~100KB** から **~850KB** に増加しました。

 この問題に対処するために使用できる方法の 1 つが、クリティカルレンダリングパス (en-US)の長さを短くすることで、最初のレンダリングに重要ではないリソースを遅延読み込みすることです。
 実際の例としては、e コマースサイトのトップページにカートページ/セクションへのリンクがあり、カートページのリソース（JavaScript、CSS、画像など）は、そこに移動する**までは**ダウンロードされないというものがあります。

戦略
--

遅延読み込みは、複数のリソースに、複数の戦略で適用することができます。

### 全般

**コード分割**
 JavaScript、CSS、HTML は小さな塊に分割して送信することができます。これにより、値を提供するために必要な最小限のコードを前もって送信することができ、ページの読み込み時間を改善することができます。残りはオンデマンドで読み込むことができます。

* エントリーポイント分割: アプリ内のエントリーポイントごとにコードを区切ります。
* 動的分割: dynamic import() 文を使用しているコードを区切ります。
### JavaScript

**モジュール型のスクリプト**
`type="module"` を持つスクリプトタグは、既定では JavaScript モジュール として扱われ、先送りされます。

### CSS

既定では、CSS は描画ブロック (en-US)リソースとして扱われ、CSSOM が構築されるまでブラウザーは処理済みのコンテンツを描画しません。CSSは薄く、使用可能な限りすばやく配信する必要があり、レンダリングのブロックを解除するために、メディアタイプや クエリーを使用することが推奨されます。

```html
<link href="style.css" rel="stylesheet" media="all" />
<link href="portrait.css" rel="stylesheet" media="(orientation:portrait)" />
<link href="print.css" rel="stylesheet" media="print" />
```

いくらか CSS の最適化をすることで、これを達成することができます。

### フォント

既定では、フォントリクエストはレンダーツリーが構築されるまで遅延されるため、テキスト描画が遅延することがあります。

既定値を上書きしてウェブのフォントリソースを先読みするために、`<link rel="preload">` や CSS font-display プロパティ、フォント読み込み API を使用することが可能です。

link 要素 も参照してください。

### 画像と iframe

ウェブページには、データ使用量やページの読み込み速度に影響する画像がたくさん格納されていることがとてもよくあります。これらの画像のほとんどは画面外にあり（クリティカルではない (en-US)）、それらを表示するためにはスクロールなど、ユーザーの操作を必要とします。

**loading 属性**
`loading` 属性を `<img>` 要素に（または `loading` 属性を `<iframe>` 要素に）設定することで、ユーザーが近くにスクロールするまで、画面に表示されている画像や iframe の読み込みを延期するように、ブラウザーに指示することができます。

```html
<img src="image.jpg" alt="..." loading="lazy" />
<iframe src="video-player.html" title="..." loading="lazy"></iframe>
```

`load` イベントは、積極的に読み込まれたコンテンツがすべて読み込まれたときに発行されます。このとき、視覚ビューポートの範囲内にまだ読み込まれていない遅延読み込みされた画像があることは十分に考えられます（というか、あり得ます）。

指定された画像の読み込みが完了したかどうかは、論理型の `complete` プロパティの値を調べることで判断することができます。

**ポリフィル**
 古いブラウザーや現在非互換性のあるブラウザーに対応するために、このポリフィルを記載してください。
 loading-attribute-polyfill

**交差オブザーバー API**
交差オブザーバーは、監視対象要素がブラウザーのビューポートに入ったとき、または出たときに、ユーザーに知らせることができるようにします。

**イベントハンドラー**
 ブラウザーとの互換性が重要な場合、いくつかのオプションがあります。

* 交差オブザーバーのポリフィル
* スクロール、リサイズ、方向転換イベントハンドラーのフォールバックで、特定の要素がビューポート内にあるかどうかを判断します。
仕様書
---

| Specification |
| --- |
| HTML Standard # lazy-loading-attributes |

関連情報
----

* Render blocking CSS
* Optimizing loading and rendering
* Lazy loading images and video


アニメーションのパフォーマンスとフレームレート - ウェブパフォーマンス

アニメーションのパフォーマンスとフレームレート
=======================

ウェブ上でのアニメーションは、`SVG` (en-US)、`JavaScript`（`<canvas>` や `WebGL` を含む）、CSS の `animation`、`<video>`、アニメーション GIF、さらにアニメーション PNG やその他の種類の画像もあります。CSS プロパティをアニメーションさせることによるパフォーマンスコストは、プロパティによって異なり、高価な CSS プロパティをアニメーションさせると、ブラウザーが滑らかなフレームレートを実現するのに苦労し、ジャンクとなることがあります。

動画やアニメーション GIF などのアニメーションメディアでは、パフォーマンスの主な懸念はファイルサイズです。パフォーマンスに悪影響を与えない程度に速くファイルをダウンロードすることが最大の課題です。CSS、SVG、<canvas>、WebGL、他にも JavaScript アニメーションなど、コードベースのアニメーションは、帯域幅のフットプリントが小さくてもパフォーマンスの問題が発生することがあります。これらのアニメーションは、CPU を消費したり、ジャンクを発生させたりすることがあります。

ユーザーは、すべてのインターフェイスとスムーズにやり取りできること、そしてすべてのユーザーインターフェイスが応答することを期待しています。アニメーションは、サイトをより速く、レスポンスよく感じさせるのに役立ちますが、アニメーションは正しく行われないと、サイトをより遅く、乱雑に感じさせることもあります。レスポンシブユーザーインターフェイスのフレームレートは 60 フレーム/秒 (fps) です。常に 60fps を維持することは不可能ですが、すべてのアニメーションで高いフレームレートと安定したフレームレートを維持することが重要です。

CSS アニメーションでは、いくつかのキーフレームを指定して、それぞれのキーフレームがアニメーションの特定の段階での要素の姿を定義するために、 CSS を使用しています。ブラウザーは、各キーフレームから次のキーフレームへの遷移としてアニメーションを作成します。

JavaScript を使用して要素をアニメーション化するのに比べ、CSS アニメーションは簡単に作成することができます。また、ブラウザーがフレームをレンダリングするタイミングや、必要に応じてフレームを削除することを制御できるので、パフォーマンスも向上します。

しかし、CSS のプロパティを変更した場合のパフォーマンスコストは、プロパティによって異なる場合があります。アニメーションが滑らかに現れるレートは、1 秒間に 60 フレームというのが一般的に受け入れられています。1 秒間に 60 フレームの速度では、ブラウザーはスクリプトの実行、必要に応じてスタイルとレイアウトの再計算、更新される領域の再描画に 16.7 ミリ秒の時間を使用します。遅いスクリプトや 高コストの CSS プロパティのアニメーションは、ブラウザーがスムーズなフレームレートを達成するのに苦労するため、ジャンクとなることがあります。

レンダリングウォーターフォール
---------------

要素が CSS プロパティをアニメーションしているときに、ブラウザーがページに変更を加えるために使用するプロセスは、以下の手順からなるウォーターフォールと記述することができます。

![CSS レンダリングのウォーターフォールのフローチャート。順に、スタイル再計算、レイアウト、ペイントの手順となっている。](/ja/docs/Web/Performance/Animation_performance_and_frame_rate/css-rendering-waterfall.png)

1. **スタイル再計算**: 要素のプロパティが変更された場合、ブラウザーは計算されたスタイルを再計算する必要があります。
2. **レイアウト**: 次に、ブラウザーは計算されたスタイル設定を用いて、要素の位置と形状を決定します。この処理は「レイアウト」と呼ばれていますが、「再フロー」とも呼ばれることがあります。
3. **描画**: 最後に、ブラウザーは要素を画面に再描画する必要があります。ページをレイヤーに分割し、それぞれを個別に描画した後、「コンポジション」と呼ばれる処理で結合することもあります（この手順では示していません）。

この一連の動作は、完了するまで画面が更新されないので、単一のフレームに収まる必要があります。

CSS プロパティのコスト
-------------

レンダリングウォーターフォールの文脈では、一部プロパティは他のプロパティよりもコストが高くなります。

| プロパティの種類 | コスト | 例 |
| --- | --- | --- |
| 要素の *形状* または *位置* に影響を与えるプロパティは、スタイル再計算、レイアウト、再描画を発生させます。 | スタイル再計算あり
レイアウト計算あり
再描画あり | `left``max-width``border-width``margin-left``font-size` |
| 形状や位置に影響しないが、独自のレイヤーで描画されないプロパティは、レイアウト処理が発生しません。 | スタイル再計算あり
レイアウト計算なし
再描画あり | `color` |
| 独自のレイヤーでレンダリングされるプロパティは、更新がコンポジションで処理されるため、再描画が発生することもありません。 | スタイル再計算あり
レイアウト計算なし
再描画なし | `transform``opacity` |

開発者ツール
------

ほとんどのウェブブラウザーには、ページの要素をアニメーションさせるときにブラウザーが行っている作業を把握するためのツールが記載されています。これらのツールを用いて、アプリケーションのアニメーションフレームレートを測定し、パフォーマンスのボトルネックが見つかった場合に、それを診断することができます。

* Chrome パフォーマンスツール
* Firefox パフォーマンスツール


SVG 効果の HTML コンテンツへの適用 - SVG: スケーラブルベクターグラフィック

SVG 効果の HTML コンテンツへの適用
======================

最近のブラウザーは、 SVG を CSS スタイルの中で使用して、 HTML コンテンツに対してグラフィカルな効果を適用することに対応しています。

SVG をスタイルで指定するには、同一文書内または外部のスタイルシートで指定することができます。使用できるプロパティは `mask`, `clip-path`, `filter` の 3 つです。

**メモ:** 外部ファイル内の SVG を参照する場合、参照側の文書と同じオリジンでなければなければなりません。

埋め込み SVG の使用
------------

SVG 効果を CSS スタイルで適用するには、まず最初に 適用する SVG を参照する CSS スタイルを作る必要があります。

```html
<style>
 p {
 mask: url(#my-mask);
 }
</style>
```

上の例では、すべての段落が、 ID に `my-mask` を持つ SVG の `<mask>` によってマスクされます。

### 例: マスキング

たとえば、次に示すような SVG のコードを HTML 文章に埋め込むと、HTML コンテンツに対してグラデーションマスクを提供する CSS スタイルを宣言することができます。

```html
<svg height="0">
  <mask id="mask-1">
    <linearGradient id="gradient-1" y2="1">
      <stop stop-color="white" offset="0" />
      <stop stop-opacity="0" offset="1" />
    </linearGradient>
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white" />
    <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)" />
  </mask>
</svg>
```

```css
.target {
  mask: url(#mask-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

この CSS の中で、`#mask-1` という ID への URL を使用してマスクが指定されていることに注目してください。これがその後ろで設定されている SVG マスクの ID です。それ以外の部分は、グラデーションマスクの詳細について記述しています。

実際に SVG の効果を HTML に適用する場合、次のように単純に上で定義した `target` スタイルをその要素に割り当てるだけです。

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>
```

上の例では、要素に適用されたマスクがレンダリングされるはずです。

### 例: クリッピング

この例では、 SVG を HTML コンテンツを切り抜くために使用する方法を実演します。リンクの反応範囲ごと切り取られていることに注目してください。

```html
<p class="target" style="background:lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>

<button onclick="toggleRadius()">Toggle radius</button>

<svg height="0">
  <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox">
    <circle cx="0.25" cy="0.25" r="0.25" id="circle" />
    <rect x="0.5" y="0.2" width="0.5" height="0.8" />
  </clipPath>
</svg>
```

```css
.target {
  clip-path: url(#clipping-path-1);
}
p {
  width: 300px;
  border: 1px solid #000;
  display: inline-block;
}
```

これは、円と四角形からなる切り取りエリアを作り、`#clipping-path-1` という ID に割り当てています。これにより、スタイルから参照されています。このように `target` スタイルが確立されると、クリップパスはあらゆるエレメントに割り当てることができるようになります。

SVG にリアルタイムで変更を加えることができ、その変更は HTML のレンダリングに即座に反映されることに注目してください。たとえば、次のコードで上で定義したクリップパスの円の大きさを変更することができます。

```js
function toggleRadius() {
  var circle = document.getElementById("circle");
  circle.r.baseVal.value = 0.4 - circle.r.baseVal.value;
}
```

### 例: フィルタリング

この例では HTML コンテンツに対して SVG を使用してフィルターを適用する方法を実演します。いくつかのフィルターを定義し、CSS を使って 3 つの要素それぞれに対して、通常の状態とマウスをホバーした状態の2つの状態にフィルターを適用します。

```html
<p class="target" style="background: lime;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
</p>
<pre class="target">lorem</pre>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing
  <em class="target"
 >elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua.</em
 >
  Ut enim ad minim veniam.
</p>
```

同じようにしてあらゆる SVG フィルタが適用できます。たとえば、ガウスぼかし効果を適用する場合は次のように書きます。

```html
<svg height="0">
  <filter id="f1">
    <feGaussianBlur stdDeviation="3" />
  </filter>
</svg>
```

あるいは色行列を適用するのであれば、次のようにします。

```html
<svg height="0">
  <filter id="f2">
    <feColorMatrix
 values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0 0 0 1 0" />
  </filter>
</svg>
```

さらに、いくつかのフィルタを示します。

```html
<svg height="0">
  <filter id="f3">
    <feConvolveMatrix
 filterRes="100 100"
 style="color-interpolation-filters:sRGB"
 order="3"
 kernelMatrix="0 -1 0 -1 4 -1 0 -1 0"
 preserveAlpha="true" />
  </filter>
  <filter id="f4">
    <feSpecularLighting
 surfaceScale="5"
 specularConstant="1"
 specularExponent="10"
 lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000" />
    </feSpecularLighting>
  </filter>
  <filter id="f5">
    <feColorMatrix
 values="1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 1 0 0 0"
 style="color-interpolation-filters:sRGB" />
  </filter>
</svg>
```

5 つのフィルターは、次の CSS を用いて適用できます。

```css
p.target {
  filter: url(#f3);
}
p.target:hover {
  filter: url(#f5);
}
em.target {
  filter: url(#f1);
}
em.target:hover {
  filter: url(#f4);
}
pre.target {
  filter: url(#f2);
}
pre.target:hover {
  filter: url(#f3);
}
```

### 例: ぼかし文字

文字にぼかしを入れるには、 Webkit ベースのブラウザーでは（接頭辞付きの）blur という CSS フィルターが使えます。 SVG のフィルターを用いても同じ効果が実現できます。

```html
<p class="blur">Time to clean my glasses</p>
<svg height="0">
  <defs>
    <filter id="wherearemyglasses" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
    </filter>
  </defs>
</svg>
```

SVG と CSS のフィルタは、同じクラス内で適用できます。

```css
.blur {
  filter: url(#wherearemyglasses);
}
```

ぼかしは計算が重いので、特にスクロールやアニメーションを行う要素では、控えめに使用するようにしてください。

### 例: テキスト効果

SVG の効果を使用することで、プレーンな HTML のテキストと比較して、よりダイナミックで柔軟な方法でテキストを追加することができます。

SVG 要素と HTML の組み合わせでテキストを作成することで、さまざまなテキスト効果を作ることができます。テキストを回転させることができます。

```html
<svg height="60" width="200">
  <text x="0" y="15" fill="blue" transform="rotate(30 20,50)">
    Example text
  </text>
</svg>
```

外部参照の使用
-------

クリッピング、マスキング、フィルタリングに使用できるSVGは、そのソースが適用されるHTMLの文書と同じオリジンである限り、外部ソースから読み込むことができます。

例えば、CSS が `default.css` という名前のファイルであれば、次のようになります。

```css
.target {
  clip-path: url(resources.svg#c1);
}
```

これで SVG が `resources.svg` という名前のファイルからインポートされ、クリップパスの ID に `c1` が使用されます。

関連情報
----

* SVG
* SVG Effects for HTML Content (ブログ記事)


SVG教本 - SVG: スケーラブルベクターグラフィック

SVG教本
=====

**変倍ベクタ図形** (Scalable Vector Graphics; SVG) は図形をタグ付けする W3C の XML 派生言語です。SVG は，Firefox、Opera、WebKit ブラウザ、Internet Explorer 及び他のブラウザにおいて部分的に実装されています。

本教本は SVG の内部構造の説明を目的としており，また技術的詳細が目白押しです。美しい画像を描きたいだけなら，より有用な資料はInkscape の文書群にて見付かるでしょう。他に，W3C のSVG 入門も，良い SVG 概説を提供しています。

**メモ:** このチュートリアルは執筆の非常に早い段階にあります。もしあなたが可能なら、力を貸し、1 つまたは 2 つのパラグラフを書いて手助けしてください。ページ全体を書いていただければ、なお良いです。

##### ゼロから始める SVG の紹介

* 概要
* 始めましょう
* 配置
* 基本的な図形
* パス
* 塗りつぶしとストローク
* 階調
* 模様
* テキスト
* 基本的なトランスフォーム
* クリッピングとマスキング
* 他の SVG コンテンツ
* フィルタ効果
* SVG フォント
* SVG image 要素
* SVG のツール
* 他のチュートリアル

続く話題はより発展的であり、従って各々自身の教本を習得すべきです。

##### JavaScript による SVG のスクリプティング

未定

##### SVG フィルタのチュートリアル

未定

##### SMIL を用いた SVG のアニメーション

未定

##### SVG によるフォント作成

未定


名前空間の速修講座 - SVG: スケーラブルベクターグラフィック

名前空間の速修講座
=========

### 導入

XML の派生言語として、 SVG は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない Gecko ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。

### 背景

異なった種類の XML ベースのコンテンツが同じ XML ファイルの中で一緒に混ざるのを可能にするのことは W3C の長年の目標です。 例えば、SVG と MathML は直接 XHTML ベースの科学ドキュメントに組み込まれるかもしれません。このようなコンテンツ タイプを混ぜることが可能にすることは、多くの利点がありますが、解決するために非常に大問題を要しました。

当然、それぞれの XML 派生言語は仕様で述べたマークアップタグ名の意味を定義します。 1 つの XML ドキュメントに異なった XML 派生言語のコンテンツを混ぜることによる問題は 別の派生言語が 1 つの派生言語によって定義されたタグと同じ名前のタグを定義するかもしれないということです。 例えば、XHTML と SVG の両方には、`<title>` タグがあります。 事実、ユーザエージェントはどうやって XML コンテンツが(あらかじめ)知っているものであるとき時に、単なる未知の任意のタグ名を含む無意味な XML ファイルでないと言えますか?

一般的な意見とは逆に、この質問の答えは「`DOCTYPE` 宣言から伝えることができる」ではありません。 DTD は混ぜられたコンテンツを念頭におかれて設計されませんでした、そして現在、複雑な混ぜられた DTD を作成する過去の試みが失敗したと考えられます。 XML、およびいくつかの XML 派生言語(SVG を含む)は DOCTYPE 宣言を必要とせず、そして SVG 1.2 は一つも持たないでしょう。`DOCTYPE` 宣言 が (普通) 一種類のコンテンツ タイプのファイルに一致するという事実は単なる偶然の一致です。DTD は内容の識別ではなく、ヴァリデーションためだけのものです。 `DOCTYPE` 宣言を使用することで XML コンテンツをだまし、特定するユーザエージェントは害を引き起こします。

その質問の本当の答えは XML コンテンツがユーザエージェントにどの派生言語にそのタグが属しているかを 明確な「名前空間宣言」をタグに与えるで伝えるというものです。

### 名前空間を宣言する

それでは、名前空間宣言はどのように見える、何所におくのでしょうか? 短い例があります。
```

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- ここに更なるタグ -->
</svg>
```

名前空間宣言は `xmlns` 属性によって提供されます。この属性は `<svg>` タグとその子供タグは名前空間名'http://www.w3.org/2000/svg'を持っている いずれかの XML 派生言語に属すると言っています。もちろん、それは SVG です。名前空間宣言はルート要素で一度のみ提供されることが必要なことに注意してください。その宣言は *標準*の名前空間を定義するので、ユーザエージェントは `<svg>` タグの全ての子孫タグが同じ名前空間に属することが分かります。ユーザエージェントはそのマークアップアップの処理方を知っているか確かめるために名前空間名をチェックします。

名前空間名はただの文字列であることに注意してください。つまり SVG 名前空間名も URI のように見えますが重要ではありません。 URI は一意なので、一般的に使用されて、どこかに「リンク」する意志はありません。 (実際 URI が非常に頻繁に使用されるので、「名前空間 URI」という用語は「名前空間名」の代わりに一般的に使われます。)

#### デフォルト名前空間を再宣言する

もしルートタグの全ての子孫がデフォルト名前空間にあると定義されているなら、他の名前空間のコンテンツを混ぜるにはどうしたら良いのでしょう ? 簡単です。デフォルト名前空間を再定義するだけです。短い例があります
```

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <!-- ここに幾つか XHTML タグ -->
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px">
      <!-- ここに幾つか SVG タグ -->
    </svg>
    <!--ここに幾つか XHTML タグ -->
  </body>
</html>
```

この例でルート `<html>` タグの `xmlns` 属性はデフォルト名前空間が XHTML であるように宣言しています。結果として、ユーザエージェントによってそれとその全ての子供のタグは XHTML に属するものとして解釈されます、`<svg>` タグを除いて。`<svg>` タグは自身の `xmlns` 属性を持ち、デフォルト名前空間を再定義することで、ユーザエージェントに `<svg>` とその子孫(それらが再びデフォルト名前空間を再宣言しない限り)が SVG に属していることを伝えます。

見て、名前空間って全然難しくないでしょう。

#### 名前空間接頭辞を宣言する

XML 派生言語は自身のタグだけではなく、自身の属性も定義します。 標準では、名前空間を全く持たず、ユニークな名前を持っている要素に現れるので、属性がユニークであるとだけ知られています。 しかし、時々多くの異なった要素の上でそれらを再利用することができるように属性を定義して、それらが使用されている要素に関わらず同じ属性であるとなおも考えられることが必要です。 これのとても良い例は XLink 仕様で定義された `href` 属性です。 この属性は外部のリソースにリンクする方法として他の XML 派生言語によって一般的に使用されます。 しかし、あなたはどうやってその属性がどの派生言語、この場合 XLink 、 に属するとユーザエージェントに伝えますか? 以下の例を考えてください。
```

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <script xlink:href="cool-script.js" type="text/ecmascript"/>
</svg>
```

この例はかなり珍しい属性 `xmlns:xlink` を含んでいます。 最初の 'xmlns' 部分から推測できるように、これは別の名前空間宣言です。しかしながら、デフォルト名前空間を設定する代わりに、この名前空間宣言は「名前空間接頭辞」と呼ばれるものに名前空間を設定します。 この場合、私たちは接頭辞 `xlink` (2 つめの部分)を使用することを選びました。その接頭辞が XLink に属する属性についてユーザエージェントに伝えるのに使用されるためです。

名前が示すように、名前空間接頭辞は属性名とタグ名の前に置くのに使用されます。 これは上の例で <script> タグに示されるように属性名より前に名前空間接頭語とコロンを加えることで行われます。 これは特定の属性が名前空間接頭辞(XLink)に割り当てられた名前空間に属すことをユーザエージェントに伝え、他のタグにおいても同じ意味で使用することができる属性です。

名前空間名に関連付けられていな接頭辞の利用による XML エラーに注意してください。上の例で `xmlns:xlink` 属性によって作られた関連付けは `xlink:href` 属性がエラーに引き起こさないために必要不可欠です。この XLink 属性は SVG の `<a>` と `<use>`, `<image>` タグや他のタグでも頻繁に使われるので、常にドキュメントに XLink の宣言を含めることは良い考えです。

余談として、タグ名に名前空間接頭語を使用することができるのを知っていると役に立ちます。これは特定のタグ(しかし今回の子供ではありません!)が接頭辞に割り当てられた名前空間に属することをユーザエージェントに伝えます。 これを知っていることは、あなたが以下の例のようなマークアップに出くわしたときの混乱を節約するでしょう:
```

<html
 xmlns="http://www.w3.org/1999/xhtml"
      xmlns:svg="http://www.w3.org/2000/svg">
  <body>
    <h1>XHTML にインラインで埋め込まれた SVG </h1>
    <svg:svg width="300px" height="200px">
      <svg:circle cx="150" cy="100" r="50" fill="#ff0000"/>
    </svg:svg>
  </body>
</html>
```

`<svg:svg>` タグとその子供の `<svg:circle>` に名前空間接頭辞が使われているので、デフォルト名前空間を再宣言する必要が無いことに注意してください。一般にこの方法で沢山のタグに接頭辞をつけるよりもデフォルト名前空間を再宣言した方が良いです。

### 名前空間付けられた XML でのスクリプティング

名前空間はマークアップだけでなく、スクリプティングにも影響します。もし SVG のような 名前空間付けられた XML 用のスクリプトを書くなら次をお読みください。

DOM Level 1 勧告はオリジナルの original Namespaces in XML 勧告がリリースされる前に作られたので、DOM1 は名前空間を認識しません。これは SVG のような 名前空間付けられた XML で問題を引き起こします。それらの問題を解決するために DOM Level 2 Core は全て DOM Level1 メソッドの適切な名前空間を認識している同等のメソッドを加えました。SVG でスクリプティングをするとき、名前空間を認識しているメソッドを使うことが大切です。下の表は SVG と一緒に使うべきではない DOM 1 メソッドと代わりに使うべき同等な DOM2 の対応するメソッドをリストしています。

| DOM1 (使わないで下さい) | DOM2 (代わりにこれらを使ってください!) |
| --- | --- |
| createAttribute | createAttributeNS |
| createElement | createElementNS |
| getAttributeNode | getAttributeNodeNS |
| getAttribute | getAttributeNS |
| getElementsByTagName | getElementsByTagNameNS (要素にも追加されました) |
| getNamedItem | getNamedItemNS |
| hasAttribute | hasAttributeNS |
| removeAttribute | removeAttributeNS |
| removeNamedItem | removeNamedItemNS |
| setAttribute | setAttributeNS |
| setAttributeNode | setAttributeNodeNS |
| setNamedItem | setNamedItemNS |

全ての DOM2 の名前空間を認識しているメソッドの最初の引数は問題になっている要素か属性の名前空間名(名前空間 URI としても知らています) で無ければなりません。SVG **要素** のためには、これは 'http://www.w3.org/2000/svg' です。しかし、よく注意してください:Namespaces in XML 1.1 仕様は接頭辞無しの属性の名前空間名は値をもっていません。言い替えると、そのタグの名前空間であっても、そのタグの名前空間を使わないということです。 代わりに**無条件の(接頭辞無し)属性の名前空間名として `null` を使わなくてはなりません**。つまり `document.createElementNS()` を使い SVG `rect` *要素*を作るには、こう書かなくてはなりません:
```

document.createElementNS('http://www.w3.org/2000/svg', 'rect');
```

しかし、SVG の `rect` 要素の `x` *属性*の値を取り出すにはこう書かなくてはなりません:
```

rect.getAttributeNS(null, 'x');
```

これは名前空間接頭辞)*付き*の属性(タグと同じ XML 派生言語に属していない属性)はこの限りではないことに注意してください。xlink:href 属性の様な属性はその接頭辞に割り当てられた名前空間名(XLink は `http://www.w3.org/1999/xlink`)が必要です。従って SVG の `<a>` 要素の `xlink:href` 属性の値を手に入れるにはこう書くでしょう:
```

elt.getAttributeNS('http://www.w3.org/1999/xlink', 'href');
```

名前空間を持った属性を設定するときに、後で DOM がより簡単に XML に変換できるように(例えばもしそれをサーバに送り返したいなら)、それらの接頭辞を 2 番目の引数にも含めることが推奨されます(が強制ではありません)。例:
```

elt.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'otherdoc.svg');
```

最後の例として、どうやってスクリプトを使って <image> 要素を動的に作るべきか実演を示します。
```

var SVG_NS = 'http://www.w3.org/2000/svg';
var XLink_NS = 'http://www.w3.org/1999/xlink';
var image = document.createElementNS(SVG_NS, 'image');
image.setAttributeNS(null, 'width', '100');
image.setAttributeNS(null, 'height', '100');
image.setAttributeNS(XLink_NS, 'xlink:href', 'flower.png');
```

### まとめ

常にあなたの XML ファイルの中で使う名前空間が宣言されているか確認してください。もしそうしていないと、Firefox のようなユーザエージェントはコンテンツを理解せずに単に XML マークアップを表示するか、ユーザに XML の中にエラーが有ることを伝えます。全新しい SVG ファイルを作る時、全ての一般的に使う名前空間宣言を含んだテンプレートを使うことは良い考えです。もしまだ持っていなければ、次のコードで作り始めてください
```

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events">
</svg>
```

あなたが特定のドキュメントでそれら全ての名前空間を使用しなくても、名前空間宣言を含んで全く害はありません。 後日、未使用の名前空間の 1 つをコンテンツに結局加えるなら、それはいくつかの煩わしいエラーから救ってくれるかもしれません。

### 完全な例

完全な例は SVG:Namespaces Crash Course:Example を参照してください。


SVG 属性リファレンス - SVG: スケーラブルベクターグラフィック

SVG 属性リファレンス
============

SVG 要素は、要素の扱いや描画の詳細を指定する属性を使って変更できます。以下は、すべての SVG 属性のリストです。各属性のリンク先のドキュメンテーションでは、どの要素が属性をサポートしているか、どのように動作するかを学ぶことができます。

SVG 属性 A to Z
-------------

### A

* `accent-height`
* `accumulate (en-US)`
* `additive (en-US)`
* `alignment-baseline`
* `allowReorder`
* `alphabetic (en-US)`
* `amplitude (en-US)`
* `arabic-form (en-US)`
* `ascent (en-US)`
* `attributeName (en-US)`
* `attributeType (en-US)`
* `autoReverse`
* `azimuth (en-US)`
### B

* `baseFrequency (en-US)`
* `baseline-shift (en-US)`
* `baseProfile (en-US)`
* `bbox (en-US)`
* `begin (en-US)`
* `bias (en-US)`
* `by (en-US)`
### C

* `calcMode (en-US)`
* `cap-height (en-US)`
* `class (en-US)`
* `clip (en-US)`
* `clipPathUnits (en-US)`
* `clip-path (en-US)`
* `clip-rule (en-US)`
* `color`
* `color-interpolation (en-US)`
* `color-interpolation-filters (en-US)`
* `color-profile (en-US)`
* `color-rendering`
* `contentScriptType`
* `contentStyleType`
* `cursor (en-US)`
* `cx`
* `cy`
### D

* `d`
* `decelerate`
* `descent (en-US)`
* `diffuseConstant (en-US)`
* `direction (en-US)`
* `display (en-US)`
* `divisor (en-US)`
* `dominant-baseline (en-US)`
* `dur (en-US)`
* `dx`
* `dy (en-US)`
### E

* `edgeMode (en-US)`
* `elevation (en-US)`
* `enable-background (en-US)`
* `end`
* `exponent (en-US)`
* `externalResourcesRequired`
### F

* `fill`
* `fill-opacity`
* `fill-rule (en-US)`
* `filter (en-US)`
* `filterRes`
* `filterUnits`
* `flood-color (en-US)`
* `flood-opacity (en-US)`
* `font-family (en-US)`
* `font-size (en-US)`
* `font-size-adjust (en-US)`
* `font-stretch (en-US)`
* `font-style (en-US)`
* `font-variant (en-US)`
* `font-weight (en-US)`
* `format`
* `from (en-US)`
* `fr (en-US)`
* `fx (en-US)`
* `fy (en-US)`
### G

* `g1 (en-US)`
* `g2 (en-US)`
* `glyph-name (en-US)`
* `glyph-orientation-horizontal (en-US)`
* `glyph-orientation-vertical (en-US)`
* `glyphRef`
* `gradientTransform (en-US)`
* `gradientUnits (en-US)`
### H

* `hanging (en-US)`
* `height (en-US)`
* `href (en-US)`
* `hreflang`
* `horiz-adv-x (en-US)`
* `horiz-origin-x (en-US)`
### I

* `id`
* `ideographic (en-US)`
* `image-rendering (en-US)`
* `in (en-US)`
* `in2 (en-US)`
* `intercept (en-US)`
### K

* `k (en-US)`
* `k1 (en-US)`
* `k2 (en-US)`
* `k3 (en-US)`
* `k4 (en-US)`
* `kernelMatrix (en-US)`
* `kernelUnitLength (en-US)`
* `kerning (en-US)`
* `keyPoints (en-US)`
* `keySplines (en-US)`
* `keyTimes (en-US)`
### L

* `lang (en-US)`
* `lengthAdjust`
* `letter-spacing (en-US)`
* `lighting-color (en-US)`
* `limitingConeAngle (en-US)`
* `local`
### M

* `marker-end (en-US)`
* `marker-mid`
* `marker-start (en-US)`
* `markerHeight (en-US)`
* `markerUnits (en-US)`
* `markerWidth (en-US)`
* `mask (en-US)`
* `maskContentUnits (en-US)`
* `maskUnits (en-US)`
* `mathematical (en-US)`
* `max (en-US)`
* `media (en-US)`
* `method (en-US)`
* `min (en-US)`
* `mode (en-US)`
### N

* `name (en-US)`
* `numOctaves (en-US)`
### O

* `offset`
* `opacity (en-US)`
* `operator (en-US)`
* `order (en-US)`
* `orient (en-US)`
* `orientation (en-US)`
* `origin (en-US)`
* `overflow (en-US)`
* `overline-position (en-US)`
* `overline-thickness (en-US)`
### P

* `panose-1 (en-US)`
* `paint-order (en-US)`
* `path (en-US)`
* `pathLength (en-US)`
* `patternContentUnits (en-US)`
* `patternTransform (en-US)`
* `patternUnits`
* `ping`
* `pointer-events (en-US)`
* `points`
* `pointsAtX (en-US)`
* `pointsAtY (en-US)`
* `pointsAtZ (en-US)`
* `preserveAlpha (en-US)`
* `preserveAspectRatio (en-US)`
* `primitiveUnits (en-US)`
### R

* `r`
* `radius (en-US)`
* `referrerPolicy`
* `refX (en-US)`
* `refY (en-US)`
* `rel`
* `rendering-intent`
* `repeatCount (en-US)`
* `repeatDur (en-US)`
* `requiredExtensions`
* `requiredFeatures (en-US)`
* `restart (en-US)`
* `result (en-US)`
* `rotate (en-US)`
* `rx (en-US)`
* `ry (en-US)`
### S

* `scale`
* `seed (en-US)`
* `shape-rendering (en-US)`
* `slope (en-US)`
* `spacing (en-US)`
* `specularConstant (en-US)`
* `specularExponent (en-US)`
* `speed`
* `spreadMethod (en-US)`
* `startOffset (en-US)`
* `stdDeviation (en-US)`
* `stemh (en-US)`
* `stemv (en-US)`
* `stitchTiles (en-US)`
* `stop-color`
* `stop-opacity (en-US)`
* `strikethrough-position (en-US)`
* `strikethrough-thickness (en-US)`
* `string (en-US)`
* `stroke`
* `stroke-dasharray`
* `stroke-dashoffset`
* `stroke-linecap`
* `stroke-linejoin`
* `stroke-miterlimit`
* `stroke-opacity (en-US)`
* `stroke-width (en-US)`
* `style (en-US)`
* `surfaceScale (en-US)`
* `systemLanguage (en-US)`
### T

* `tabindex (en-US)`
* `tableValues (en-US)`
* `target (en-US)`
* `targetX (en-US)`
* `targetY (en-US)`
* `text-anchor (en-US)`
* `text-decoration (en-US)`
* `text-rendering (en-US)`
* `textLength (en-US)`
* `to (en-US)`
* `transform`
* `transform-origin (en-US)`
* `type (en-US)`
### U

* `u1 (en-US)`
* `u2 (en-US)`
* `underline-position (en-US)`
* `underline-thickness (en-US)`
* `unicode (en-US)`
* `unicode-bidi (en-US)`
* `unicode-range (en-US)`
* `units-per-em (en-US)`
### V

* `v-alphabetic (en-US)`
* `v-hanging (en-US)`
* `v-ideographic (en-US)`
* `v-mathematical (en-US)`
* `values (en-US)`
* `vector-effect`
* `version (en-US)`
* `vert-adv-y (en-US)`
* `vert-origin-x (en-US)`
* `vert-origin-y (en-US)`
* `viewBox`
* `viewTarget`
* `visibility (en-US)`
### W

* `width (en-US)`
* `widths (en-US)`
* `word-spacing (en-US)`
* `writing-mode`
### X

* `x`
* `x-height (en-US)`
* `x1`
* `x2 (en-US)`
* `xChannelSelector (en-US)`
* `xlink:actuate`
* `xlink:arcrole (en-US)`
* `xlink:href (en-US)`
* `xlink:role`
* `xlink:show (en-US)`
* `xlink:title (en-US)`
* `xlink:type (en-US)`
* `xml:base (en-US)`
* `xml:lang (en-US)`
* `xml:space (en-US)`
### Y

* `y`
* `y1 (en-US)`
* `y2 (en-US)`
* `yChannelSelector (en-US)`
### Z

* `z (en-US)`
* `zoomAndPan (en-US)`
カテゴリ別の SVG 属性
-------------

### ジェネリック属性

#### コア属性

`id`, `lang (en-US)`, `tabindex (en-US)`, `xml:base (en-US)`, `xml:lang (en-US)`, `xml:space (en-US)`
#### スタイル属性

`class (en-US)`, `style (en-US)`
#### 条件処理属性

`externalResourcesRequired`, `requiredExtensions`, `requiredFeatures (en-US)`, `systemLanguage (en-US)`.

### XLink 属性

`xlink:href (en-US)`, `xlink:type (en-US)`, `xlink:role`, `xlink:arcrole (en-US)`, `xlink:title (en-US)`, `xlink:show (en-US)`, `xlink:actuate`### プレゼンテーション属性

**メモ:** すべての SVG プレゼンテーション属性が CSS プロパティとして使用できます。

`alignment-baseline`, `baseline-shift (en-US)`, `clip (en-US)`, `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-interpolation-filters (en-US)`, `color-profile (en-US)`, `color-rendering`, `cursor (en-US)`, `direction (en-US)`, `display (en-US)`, `dominant-baseline (en-US)`, `enable-background (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `flood-color (en-US)`, `flood-opacity (en-US)`, `font-family (en-US)`, `font-size (en-US)`, `font-size-adjust (en-US)`, `font-stretch (en-US)`, `font-style (en-US)`, `font-variant (en-US)`, `font-weight (en-US)`, `glyph-orientation-horizontal (en-US)`, `glyph-orientation-vertical (en-US)`, `image-rendering (en-US)`, `kerning (en-US)`, `letter-spacing (en-US)`, `lighting-color (en-US)`, `marker-end (en-US)`, `marker-mid`, `marker-start (en-US)`, `mask (en-US)`, `opacity (en-US)`, `overflow (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stop-color`, `stop-opacity (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `text-anchor (en-US)`, `text-decoration (en-US)`, `text-rendering (en-US)`, `transform`, `transform-origin (en-US)`, `unicode-bidi (en-US)`, `vector-effect`, `visibility (en-US)`, `word-spacing (en-US)`, `writing-mode`### フィルター属性

#### フィルタープリミティブ属性

`height (en-US)`, `result (en-US)`, `width (en-US)`, `x`, `y`
#### 変換関数属性

`type (en-US)`, `tableValues (en-US)`, `slope (en-US)`, `intercept (en-US)`, `amplitude (en-US)`, `exponent (en-US)`, `offset`### アニメーション属性

#### アニメーション対象要素属性

`href (en-US)`
#### アニメーション属性に対する属性

`attributeType (en-US)`, `attributeName (en-US)`
#### アニメーションタイミング属性

`begin (en-US)`, `dur (en-US)`, `end`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`
#### アニメーション値属性

`calcMode (en-US)`, `values (en-US)`, `keyTimes (en-US)`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`, `autoReverse`, `accelerate`, `decelerate`
#### アニメーション付加属性

`additive (en-US)`, `accumulate (en-US)`### イベント属性

#### アニメーションイベント属性

**`onbegin`**, **`onend`**, **`onrepeat`**

#### 文書イベント属性

**`onabort`**, **`onerror`**, **`onresize`**, **`onscroll`**, **`onunload`**

#### グローバルイベント属性

**`oncancel`**, **`oncanplay`**, **`oncanplaythrough`**, **`onchange`**, **`onclick`**, **`onclose`**, **`oncuechange`**, **`ondblclick`**, **`ondrag`**, **`ondragend`**, **`ondragenter`**, **`ondragexit`**, **`ondragleave`**, **`ondragover`**, **`ondragstart`**, **`ondrop`**, **`ondurationchange`**, **`onemptied`**, **`onended`**, **`onerror`**, **`onfocus`**, **`oninput`**, **`oninvalid`**, **`onkeydown`**, **`onkeypress`**, **`onkeyup`**, **`onload`**, **`onloadeddata`**, **`onloadedmetadata`**, **`onloadstart`**, **`onmousedown`**, **`onmouseenter`**, **`onmouseleave`**, **`onmousemove`**, **`onmouseout`**, **`onmouseover`**, **`onmouseup`**, **`onmousewheel`**, **`onpause`**, **`onplay`**, **`onplaying`**, **`onprogress`**, **`onratechange`**, **`onreset`**, **`onresize`**, **`onscroll`**, **`onseeked`**, **`onseeking`**, **`onselect`**, **`onshow`**, **`onstalled`**, **`onsubmit`**, **`onsuspend`**, **`ontimeupdate`**, **`ontoggle`**, **`onvolumechange`**, **`onwaiting`**

#### グラフィカルイベント属性

**`onactivate`**, **`onfocusin`**, **`onfocusout`**

関連情報
----

* SVG 要素リファレンス
* SVG チュートリアル
* SVG インターフェイスリファレンス


Content type - SVG: スケーラブルベクターグラフィック

Content type
============

SVG は多くのデータ型を使用しています。この記事では、これらのデータ型とその構文、使用目的の説明を掲載しています。

Angle (角度)
----------

<angle>

角度は 2 つの方法のいずれかで指定します。スタイルシートのプロパティの値に使用する際、 <angle> は次のように定義されています。
```

angle ::= number (~"deg" | ~"grad" | ~"rad")?
```

`deg` は度を示し、 `grad` はグラードを示し、 `rad` はラジアンを示します。

CSS2 で定義されたプロパティについては、角度単位の識別子を提供しなければなりません。 SVG 固有のプロパティとそれに対応するプレゼンテーション属性の角度値については、角度の単位識別子は省略可能です。提供しなかった場合、角度の値は度単位であるとみなされます。すべてのプロパティのプレゼンテーション属性において、定義されているのが SVG1.1 であるか CSS2 であるかに関わらず、角度の識別子を指定する場合は小文字でなければなりません。

SVG 属性で角度を指定する場合、 <angle> は以下のように定義されます。
```

angle ::= number ("deg" | "grad" | "rad")?
```

<angle> の単位の識別子は、すべて小文字でなければなりません。

SVG DOM 内での <angle> の値は `SVGAngle` (en-US) または `SVGAnimatedAngle objects` を使用して表現されます。

Anything (すべて)
--------------

<anything>

基本データ型の <anything> は 0 個以上の文字の並びから構成されます。具体的には次の通りです。
```

anything ::= Char*
```

ここで Char は XML 1.0 , section 2.2 で定義されているとおり、文字を反映します。

Clock-value
-----------

<clock-value>

Clock values have the same syntax as in SMIL Animation specification. The grammar for clock values is repeated here:
```

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]
```

For `Timecount` values, the default metric suffix is "`s`" (for seconds). No embedded white space is allowed in clock values, although leading and trailing white space characters will be ignored.

The following are examples of legal clock values:

* Full clock values:
 `02:30:03` = 2 hours, 30 minutes and 3 seconds
 `50:00:10.25` = 50 hours, 10 seconds and 250 milliseconds
* Partial clock value:
 `02:33` = 2 minutes and 33 seconds
 `00:10.5` = 10.5 seconds = 10 seconds and 500 milliseconds
* Timecount values:
 `3.2h` = 3.2 hours = 3 hours and 12 minutes
 `45min`= 45 minutes
 `30s` = 30 seconds
 `5ms` = 5 milliseconds
 `12.467`= 12 seconds and 467 milliseconds

Fractional values are just (base 10) floating point definitions of seconds. Thus:

`00.5s = 500 milliseconds 00:00.005 = 5 milliseconds`

Color
-----

<color>

The basic type <color> is a CSS2 compatible specification for a color in the sRGB color space. <color> applies to SVG's use of the `color` attribute and is a component of the definitions of attributes `fill`, `stroke`, `stop-color`, `flood-color (en-US)`, and `lighting-color (en-US)`, which also offer optional ICC-based color specifications.

SVG supports all of the syntax alternatives for <color> defined in CSS2 syntax and basic data types, and (depend on the implementation) in the future CSS Color Module Level 3.

A <color> is either a keyword or a numerical RGB specification.

In addition to these color keywords, users may specify keywords that correspond to the colors used by objects in the user's environment. The normative definition of these keywords is found in User preferences for colors (CSS2, section 18.2).

The format of an RGB value in hexadecimal notation is a "`#`" immediately followed by either three or six hexadecimal characters. The three-digit RGB notation (`#rgb`) is converted into six-digit form (`#rrggbb`) by replicating digits, not by adding zeros. For example, `#fb0` expands to `#ffbb00`. This ensures that white (`#ffffff`) can be specified with the short notation (`#fff`) and removes any dependencies on the color depth of the display. The format of an RGB value in the functional notation is an RGB start-function, followed by a comma-separated list of three numerical values (either three integer values or three percentage values) followed by "`)`". An RGB start-function is the case-insensitive string "`rgb(`", for example "`RGB(`" or "`rGb(`". For compatibility, the all-lowercase form "`rgb(`" is preferred. The integer value `255` corresponds to `100%`, and to `F` or `FF` in the hexadecimal notation: `rgb(255,255,255)` = `rgb(100%,100%,100%)` = `#FFF`. White space characters are allowed around the numerical values. All RGB colors are specified in the sRGB color space. Using sRGB provides an unambiguous and objectively measurable definition of the color, which can be related to international standards.
```

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
             | "rgb("integer, integer, integer")"
             | "rgb("integer "%", integer "%", integer "%)"
             | color-keyword
hexdigit ::= [0-9A-Fa-f]
```

where `color-keyword` matches (case insensitively) one of the color keywords listed in CSS Color Module Level 3, or one of the system color keywords listed in User preferences for colors (CSS2, section 18.2).

The corresponding SVG DOM interface definitions for <color> are defined the one defined by CSS. SVG's extension to color, including the ability to specify ICC-based colors, are represented using DOM interface `SVGColor`.

Coordinate
----------

<coordinate>

<coordinate> は関連する軸に沿って (X 座標は X 軸に沿って、 Y 座標は Y 軸に沿って) ユーザー座標系の原点から所定の座標までの距離を指定します。その構文は <length> と同一です。

SVG DOM 内では、 <coordinate> の値は `SVGLength` (en-US) もしくは `SVGAnimatedLength` (en-US) で表現されます。

Frequency
---------

<frequency>

Frequency values are used with aural properties. As defined in CSS2, a frequency value is a <number> immediately followed by a frequency unit identifier. The frequency unit identifiers are:

* `Hz`: Hertz
* `kHz`: kilo Hertz

Frequency values may not be negative.

FuncIRI
-------

<FuncIRI>

Functional notation for a reference. The syntax for this reference is the same as the `CSS URI`.

ICCColor
--------

<icccolor>

An <icccolor> is an ICC color specification. In SVG 1.1, an ICC color specification is given by a name, which references a `<color-profile>` element, and one or more color component values. The grammar is as follows:
```

icccolor ::= "icc-color(" name (, number)+ ")"
```

The corresponding SVG DOM interface for <icccolor> is `SVGICCColor`.

Integer
-------

<integer>

An <integer> is specified as an optional sign character (`+` or `-`) followed by one or more digits `0` to `9`:
```

integer ::= [+-]? [0-9]+
```

If the sign character is not present, the number is non-negative.

Unless stated otherwise for a particular attribute or property, the range for an <integer> encompasses (at a minimum) `-2147483648` to `2147483647`.

Within the SVG DOM, an <integer> is represented as a `number` or an `SVGAnimatedInteger` (en-US).

IRI
---

<IRI>

An **I**nternationalized **R**esource **I**dentifier.

On the Internet, resources are identified using \_IRI\_s (Internationalized Resource Identifiers). For example, an SVG file called `someDrawing.svg` located at `http://example.com` might have the following *IRI*:
```

http://example.com/someDrawing.svg
```

An *IRI* can also address a particular element within an XML document by including an *IRI* fragment identifier as part of the *IRI*. An *IRI* which includes an *IRI* fragment identifier consists of an optional base *IRI*, followed by a "`#`" character, followed by the *IRI* fragment identifier. For example, the following *IRI* can be used to specify the element whose ID is "`Lamppost`" within file `someDrawing.svg`:
```

http://example.com/someDrawing.svg#Lamppost
```

\_IRI\_s are used in the `xlink:href (en-US)` attribute. Some attributes allow both *IRIs* and text strings as content. To disambiguate a text string from a relative IRI, the functional notation <FuncIRI> is used. This is an *IRI* delimited with a functional notation. Note: For historical reasons, the delimiters are "`url(`" and "`)`", for compatibility with the CSS specifications. The *FuncIRI* form is used in presentation attributes .

SVG makes extensive use of *IRI* references, both absolute and relative, to other objects. For example, to fill a rectangle with a linear gradient, you first define a `<linearGradient>` element and give it an ID, as in:
```

<linearGradient xml:id="MyGradient">...</linearGradient>
```

You then reference the linear gradient as the value of the `fill` attribute for the rectangle, as in the following example:
```

<rect fill="url(#MyGradient)"/>
```

SVG supports two types of *IRI* references:

* **local *IRI* references**, where the IRI reference does not contain an `<absoluteIRI>` or `<relativeIRI>` and thus only contains a fragment identifier (i.e., `#<elementID>` or `#xpointer(id<elementID>)`).
* **non-local *IRI* references**, where the *IRI* reference does contain an `<absoluteIRI>` or `<relativeIRI>`.

For the full specification of IRI references in SVG, see SVG 1.1 (2nd Edition): IRI references.

Length (長さ)
-----------

<length>

<length> は距離の寸法です。数値とともに単位を提供します。長さは 2 つの方法のいずれかで指定します。スタイルシート内で使用する際、 <length> は次のように定義されています。
```

length ::= number (~"em" | ~"ex" | ~"px" | ~"in" | ~"cm" | ~"mm" | ~"pt" | ~"pc")?
```

単位の識別子の意味については CSS2 の仕様を参照してください。

CSS2 で定義されたプロパティでは、 <length> の単位の識別子を提供する必要があります。 SVG 固有のプロパティやプレゼンテーション属性に定義する場合は、単位の識別子は任意となります。もし単位の識別子が提供されなかった場合、 <length> は現在のユーザー座標系で表されます。プレゼンテーション属性内のすべてのプロパティでは、 SVG1.1 もしくは CSS2 の中で単位の識別子が定義されているか、もし指定するならば、すべて小文字で無ければなりません。

SVG 属性に長さを使用する場合、 <length> は以下のように定義されます：
```

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?
```

SVG 属性の中での <length> の単位の識別子はすべて小文字にしなければいけません。

なお、プロパティではない <length> の定義では、パーセント単位の識別子も可能です。パーセント値の長さの値の意味は、パーセント値の長さの値が指定されている属性に依存する。よくある 2 つの例を挙げます。

* SVG ビューポートの幅または高さの割合を表す場合
* 指定されたオブジェクト上のバウンディングボックスの幅または高さの割合を表す場合

SVG DOM 内では、 <length> の値は`SVGLength` (en-US) もしくは `SVGAnimatedLength` (en-US) で表現されます。

List-of-\_T\_s
--------------

<list-of-\_T\_s>

(Where *T* is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated (with optional white space before or after the comma), or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (`U+0020`), "tab" (`U+0009`), "line feed" (`U+000A`), "carriage return" (`U+000D`), and "form-feed" (`U+000C`).

The following is a template for an EBNF grammar describing the <list-of-\_T\_s> syntax:
```

list-of-Ts ::= T
               | T, list-of-Ts
```

Within the SVG DOM, values of a <list-of-*T\_s> type are represented by an interface specific for the particular type \_T*. For example, a <list-of-lengths> is represented in the SVG DOM using an `SVGLengthList` (en-US) or `SVGAnimatedLengthList` (en-US) object.

Name
----

<name>

A name, which is a string where a few characters of syntactic significance are disallowed.
```

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */
```

Number
------

<number>

Real numbers are specified in one of two ways. When used in a stylesheet, a <number> is defined as follows:
```

number ::= integer
           | [+-]? [0-9]* "." [0-9]+
```

This syntax is the same as the definition in CSS (CSS2, section 4.3.1).

When used in an SVG attribute, a <number> is defined differently, to allow numbers with large magnitudes to be specified more concisely:
```

number ::= integer ([Ee] integer)?
           | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?
```

Within the SVG DOM, a <number> is represented as a float, `SVGNumber` (en-US) or a `SVGAnimatedNumber` (en-US).

Number-optional-number
----------------------

<number-optional-number>

A pair of <number>s, where the second <number> is optional.
```

number-optional-number ::= number
                           | number, number
```

In the SVG DOM, a <number-optional-number> is represented using a pair of `SVGAnimatedInteger` (en-US) or `SVGAnimatedNumber` (en-US) objects.

Opacity value
-------------

<opacity-value>

The opacity of the color or the content the current object is filled with, as a <number>. Any values outside the range `0.0` (fully transparent) to `1.0` (fully opaque) will be clamped to this range.

Paint
-----

<paint>

The values for properties `fill` and `stroke` are specifications of the type of paint to use when filling or stroking a given graphics element. The available options and syntax for <paint> are described in Specifying paint.

Within the SVG DOM, <paint> values are represented using `SVGPaint` objects.

Percentage
----------

<percentage>

Percentages are specified as a number followed by a "`%`" character:
```

percentage ::= number "%"
```

Note that the definition of <number> depends on whether the percentage is specified in a stylesheet or in an attribute that is not also a presentation attribute.

Percentage values are always relative to another value (for example, a length). Each attribute or property that allows percentages also defines the reference distance measurement to which the percentage refers.

Within the SVG DOM, a <percentage> is represented using an `SVGNumber` (en-US) or `SVGAnimatedNumber` (en-US) object.

Time
----

<time>

A time value is a <number> immediately followed by a time unit identifier. The time unit identifiers are:

* `ms`: milliseconds
* `s`: seconds

Transform-list
--------------

<transform-list>

A <transform-list> is used to specify a list of coordinate system transformations. A detailed description of the possible values for a <transform-list> is given in the `transform` attribute definition.

Within the SVG DOM, a <transform-list> value is represented using an `SVGTransformList` (en-US) or `SVGAnimatedTransformList` (en-US) object.

URL
---

URL

A **U**niform **R**esource **L**ocator.

A URL is a sequence of Unicode characters, building an address to an internal or external resource.

Before SVG 2, the more limited IRI content type was used instead, because the URL specification was not standardized before.


画像としての SVG - SVG: スケーラブルベクターグラフィック

画像としての SVG
==========

SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。

* HTML の `<img>` または `<svg>` 要素
* CSS の `background-image`
* CSS の `list-style-image`
* CSS の `content`
* SVG の `<image>` 要素
* SVG の `<feImage>` (en-US) 要素
* キャンバスの `drawImage` 関数
### 制限

セキュリティ上の目的で、 Gecko は SVG コンテンツを画像として扱う場合にいくつかの制限を設けています。

* JavaScript は無効になります。
* 外部のリソース（画像やスタイルシートなど）を読み込むことはできませんが、 data: URI を使用してインライン化されていれば可能です。
* `:visited` のリンクスタイルは描画されません。
* プラットフォームネイティブのウィジェットのスタイル付け（OS のテーマに基づくもの）は無効です。

なお、上記の制限は画像のコンテキストに限定されたものです。 SVG コンテンツが直接表示された場合、または `<iframe>`, `<object>`, `<embed>` の何れかの要素を使用して文書として埋め込まれた場合には適用されません。

仕様書
---

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-image |

関連情報
----

* HTML 内の SVG 入門


SVG 要素リファレンス - SVG: スケーラブルベクターグラフィック

SVG 要素リファレンス
============

« SVG / SVG 属性リファレンス (en-US) »

SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。

SVG 要素 A - Z
------------

### A

* `<a>`
* `<animate>`
* `<animateMotion>`
* `<animateTransform>`
### C

* `<circle>`
* `<clipPath>`
* `<color-profile>`
### D

* `<defs>`
* `<desc>`
* `<discard>`
### E

* `<ellipse>`
### F

* `<feBlend>` (en-US)
* `<feColorMatrix>`
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feDistantLight>` (en-US)
* `<feDropShadow>`
* `<feFlood>` (en-US)
* `<feFuncA>` (en-US)
* `<feFuncB>` (en-US)
* `<feFuncG>` (en-US)
* `<feFuncR>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMergeNode>` (en-US)
* `<feMorphology>`
* `<feOffset>` (en-US)
* `<fePointLight>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feSpotLight>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* `<filter>` (en-US)
* `<foreignObject>`
### G

* `<g>`
### H

* `<hatch>`
* `<hatchpath>`
### I

* `<image>`
### L

* `<line>`
* `<linearGradient>`
### M

* `<marker>` (en-US)
* `<mask>`
* `<mesh>`
* `<meshgradient>`
* `<meshpatch>`
* `<meshrow>`
* `<metadata>`
* `<mpath>`
### P

* `<path>`
* `<pattern>`
* `<polygon>`
* `<polyline>`
### R

* `<radialGradient>`
* `<rect>`
### S

* `<script>`
* `<set>`
* `<solidcolor>`
* `<stop>`
* `<style>` (en-US)
* `<svg>`
* `<switch>`
* `<symbol>` (en-US)
### T

* `<text>`
* `<textPath>` (en-US)
* `<title>`
* `<tspan>`
### U

* `<unknown>`
* `<use>`
### V

* `<view>` (en-US)
SVG 要素一覧 (カテゴリー別)
-----------------

### アニメーション要素

`<animate>`, `<animateColor>`, `<animateMotion>`, `<animateTransform>`, `<discard>`, `<mpath>`, `<set>`### 基本シェイプ

`<circle>`, `<ellipse>`, `<line>`, `<polygon>`, `<polyline>`, `<rect>`### コンテナー要素

`<a>`, `<defs>`, `<g>`, `<marker>` (en-US), `<mask>`, `<missing-glyph>` (en-US), `<pattern>`, `<svg>`, `<switch>`, `<symbol>` (en-US), `<unknown>`### 説明的要素

`<desc>`, `<metadata>`, `<title>`### フィルター構成要素

`<feBlend>` (en-US), `<feColorMatrix>`, `<feComponentTransfer>` (en-US), `<feComposite>` (en-US), `<feConvolveMatrix>` (en-US), `<feDiffuseLighting>` (en-US), `<feDisplacementMap>` (en-US), `<feDropShadow>`, `<feFlood>` (en-US),`<feFuncA>` (en-US), `<feFuncB>` (en-US), `<feFuncG>` (en-US), `<feFuncR>` (en-US),`<feGaussianBlur>` (en-US), `<feImage>` (en-US), `<feMerge>` (en-US), `<feMergeNode>` (en-US), `<feMorphology>`, `<feOffset>` (en-US), `<feSpecularLighting>` (en-US), `<feTile>` (en-US), `<feTurbulence>` (en-US)### フォント要素

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US), `<hkern>` (en-US), `<vkern>` (en-US)### グラデーション要素

`<linearGradient>`, `<meshgradient>`, `<radialGradient>`, `<stop>`### グラフィック要素

`<circle>`, `<ellipse>`, `<image>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<text>`, `<use>`### グラフィック参照要素

`<mesh>`, `<use>`### 光源要素

`<feDistantLight>` (en-US), `<fePointLight>` (en-US), `<feSpotLight>` (en-US)### 描画されない要素

`<clipPath>`, `<defs>`, `<hatch>`, `<linearGradient>`, `<marker>` (en-US), `<mask>`, `<meshgradient>`, `<metadata>`, `<pattern>`, `<radialGradient>`, `<script>`, `<style>` (en-US), `<symbol>` (en-US), `<title>`### ペイントサーバー要素

`<hatch>`, `<linearGradient>`, `<meshgradient>`, `<pattern>`, `<radialGradient>`, `<solidcolor>`### 描画可能要素

`<a>`, `<circle>`, `<ellipse>`, `<foreignObject>`, `<g>`, `<image>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`, `<svg>`, `<switch>`, `<symbol>` (en-US), `<text>`, `<textPath>` (en-US), `<tspan>`, `<unknown>`, `<use>`### 図形要素

`<circle>`, `<ellipse>`, `<line>`, `<mesh>`, `<path>`, `<polygon>`, `<polyline>`, `<rect>`### 構造的要素

`<defs>`, `<g>`, `<svg>`, `<symbol>` (en-US), `<use>`### テキストコンテンツ要素

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<glyph>` (en-US), `<glyphRef>` (en-US), `<textPath>` (en-US), `<text>`, `<tref>` (en-US), `<tspan>`### テキストコンテンツの子要素

`<altGlyph>`, `<textPath>` (en-US), `<tref>` (en-US), `<tspan>`### 未分類の要素

`<clipPath>`, `<color-profile>`, `<cursor>` (en-US), `<filter>` (en-US), `<foreignObject>`, `<hatchpath>`, `<meshpatch>`, `<meshrow>`, `<script>`, `<style>` (en-US), `<view>` (en-US)廃止および非推奨の要素
-----------

**警告:** 以下のものは非推奨の古い SVG 要素であり、使用するべきではありません。\*\*新しいプロジェクトでは決して使用せず、古いプロジェクトでもできるだけ早く置き換えてください。\*\*ここに掲載しているのは情報提供だけの目的です。

### A

`<altGlyph>`, `<altGlyphDef>`, `<altGlyphItem>`, `<animateColor>`### C

`<cursor>` (en-US)### F

`<font>` (en-US), `<font-face>` (en-US), `<font-face-format>` (en-US), `<font-face-name>` (en-US), `<font-face-src>` (en-US), `<font-face-uri>` (en-US)### G

`<glyph>` (en-US), `<glyphRef>` (en-US)### H

`<hkern>` (en-US)### M

`<missing-glyph>` (en-US)### T

`<tref>` (en-US)### V

`<vkern>` (en-US)関連情報
----

* SVG 属性リファレンス
* SVG チュートリアル
* SVG インターフェイスリファレンス


SVG animation with SMIL - SVG: スケーラブルベクターグラフィック

SVG animation with SMIL
=======================

Firefox 4 より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。SMIL では以下のようなことができます:

* 要素の数値属性 (x, y など) のアニメーション
* トランスフォーム属性 (translation または rotation) のアニメーション
* 色属性のアニメーション
* モーションパスに従う

これらは `<animate>` のような SVG 要素を、アニメーションさせる SVG 要素の中に追加することで実現します。以下は、4 つのアニメーション方法を例として示します。

要素の属性のアニメーション
-------------

以下の例は、円 (circle) の **cx** 属性のアニメーションを行います。そのために、`<circle>` 要素の内部に `<animate>` 要素を追加します。`<animate>` の重要な属性は以下のとおりです:

**attributeName**

アニメーションを行う属性名

from

属性の初期状態の値

to

属性の最後の値

dur

アニメーションを行う時間 (例えば、5 秒の場合は '5s' と書く)

同じ要素でより多くの属性のアニメーションを行いたい場合は、`<animate>` 要素を追加してください。

```html
<!doctype html>
<html>
  <head>
    <title>Attribute Animation with SMIL</title>
  </head>
  <body>
    <svg width="300px" height="100px">
      <rect
 x="0"
 y="0"
 width="300"
 height="100"
 stroke="black"
 stroke-width="1" />
      <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
        <animate
 attributeName="cx"
 from="0"
 to="100"
 dur="5s"
 repeatCount="indefinite" />
      </circle>
    </svg>
  </body>
</html>
```

トランスフォーム属性のアニメーション
------------------

`<animateTransform>` 要素は、**トランスフォーム** 属性のアニメーションを可能にします。数値をとる **x** のような、単純な属性のアニメーションを行うのではないため、この新しい要素が必要です。Rotation 属性はこのようなものです: `rotation(theta, x, y)`。ここで `theta` は角度、`x` および `y` は絶対位置を示します。以下の例では、回転の中心位置と角度のアニメーションを行います。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with transform</title>
  </head>
  <body>
     <svg width="300px" height="100px">
       <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
       <rect x="0" y="50" width="15" height="34" fill="blue" stroke="black" stroke-width="1" transform="rotation">

   <animateTransform
 attributeName="transform"
 begin="0s"
 dur="20s"
 type="rotate"
 <!-- 0 度から 360 度までの回転と、x 方向に 60 から 100 への移動を行う -->
            from="0 60 60"
            to="360 100 60"
            <!-- 図形が存在しなくなるまでアニメーションを続ける -->
            repeatCount="indefinite"
   />
       </rect>
     </svg>
  </body>
</html>
```

パスに従うアニメーション
------------

The `<animateMotion>` 要素は、パスに従った SVG 要素の位置や回転のアニメーションを可能にします。パスは `<path>` と同じ方法で定義されます。オブジェクトがパスの接線に沿って回転するかを定義する属性を設定することができます。

### 例 1: 直線的な移動

この例では、青い円 (circle) が黒い四角形の左端と右端をバウンドするように、無限に行き来します。このアニメーションは `<animateMotion>` 要素で制御されます。ここでは、アニメーションの始点を定義する **M**oveTo コマンド、円を 300 ピクセル右へ移動する **H**orizontal-line コマンド、そしてパスを閉じて始点へ戻ることを定義する **Z** コマンドで構成されるパスを指定しています。**repeatCount** 属性の値を `indefinite` にすることで、SVG 画像が存在する間は永久にアニメーションを繰り返すよう指定します。

```html
<!doctype html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
    <svg width="300px" height="100px">
      <rect
 x="0"
 y="0"
 width="300"
 height="100"
 stroke="black"
 stroke-width="1" />
      <rect
 x="0"
 y="50"
 width="15"
 height="34"
 fill="blue"
 stroke="black"
 stroke-width="1"
 transform="rotation">
        <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="100px">
          <rect
 x="0"
 y="0"
 width="300"
 height="100"
 stroke="black"
 stroke-width="1" />
          <circle
 cx="0"
 cy="50"
 r="15"
 fill="blue"
 stroke="black"
 stroke-width="1">
            <animateMotion
 path="M 0 0 H 300 Z"
 dur="3s"
 repeatCount="indefinite" />
          </circle>
        </svg>
      </rect>
    </svg>
  </body>
</html>
```

View live sample

### 例 2: 曲線状の移動

前と同様の例を、曲線状のパスを用い、またパスの方向に従い回転するようにしたものです。

```html
<!DOCTYPE html>
<html>
  <head>
    <title>SVG SMIL Animate with Path</title>
  </head>
  <body>
     <svg width="300px" height="100px">
        <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
        <rect x="0" y="0" width="20" height="50" fill="blue" stroke="black" stroke-width="1">
            <animateMotion path="M 50,100 Q40,75 90,70Q95,60 95,50Q180,40 170,100Z"
 dur="3s" repeatCount="indefinite" rotate="auto">
        </rect>
    </svg>
  </body>
</html>
```

参考情報
----

* SVG
* SVG Animation Specification
* SMIL Specification


スクリプティング - SVG: スケーラブルベクターグラフィック

スクリプティング
========

ブラウザーの既定の動作を `evt.preventDefault( )` メソッドで上書きしたり、イベントリスナーを `element.addEventListener(event, function, useCapture)` という構文でオブジェクトに追加したり、要素のプロパティを `svgElement.style.setProperty("fill-opacity", "0.0", "")` などで設定することが可能です。 3 つの引数がすべてプロパティを設定していることに注意してください。

### イベントコードの既定の挙動を防ぐ

ドラッグ＆ドロップのコードを書いていると、ページのテキストをドラッグ中に誤って付随的に選択してしまうことがあります。もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻るという、ブラウザーの既定の振る舞いを上書きしたくなるでしょう。このようなことは、 `evt.preventDefault()` メソッドで実現することができます。

### オブジェクトに `eventListener` を使う

`addEventListener()` や `removeEventListener()` は、対話的な SVG を書くときとても勇湯王です。これらのメソッドの第二引数として、 `handleEvent` インターフェイスを実装するオブジェクトを渡すことができます。

```js
function myRect(x, y, w, h, message) {
  this.message = message;

  this.rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  this.rect.setAttributeNS(null, "x", x);
  this.rect.setAttributeNS(null, "y", y);
  this.rect.setAttributeNS(null, "width", w);
  this.rect.setAttributeNS(null, "height", h);
  document.documentElement.appendChild(this.rect);

  this.rect.addEventListener("click", this, false);

  this.handleEvent = function (evt) {
    switch (evt.type) {
      case "click":
        alert(this.message);
        break;
    }
  };
}
```

文書間のスクリプティング - 埋め込み SVG の参照
---------------------------

HTML 内で SVG を使用する場合、Adobe の SVG Viewer 3.0 は自動的に `svgDocument` という SVG 文書を指すウィンドウのプロパティを含みます。これは、Mozilla のネイティブ SVG 実装には当てはまりません。したがって、 `window.svgDocument` を使用しても Mozilla ではうまくいきません。その代わりに、

```js
var svgDoc = document.embeds["name\_of\_svg"].getSVGDocument();
```

を使用して埋め込まれた SVG 文書の参照を取得することができます。

SVG 文書を表す `Document` にアクセスするには、以下のように `HTMLIFrameElement.contentDocument` （文書が `<iframe>` で表現されている場合）または `HTMLObjectElement.contentDocument` （文書が `<object>` 要素で表現されている場合）に注目するとよいでしょう。

```js
var svgDoc = document.getElementById("iframe\_element").contentDocument;
```

さらに、`<iframe>`, `<embed>`, `<object>` の各要素は `getSVGDocument()` というメソッドを提供しており、要素の埋め込み SVG を表す `XMLDocument` または要素が SVG 文書を表さない場合には `null` を返します。

また、 `document.getElementById("svg_elem_name").getSVGDocument()` を用いても同じ結果を得ることができます。

**メモ:** `SVGDocument` インターフェイスに言及しているドキュメントを見かけることがあります。 SVG 2 より前は、 SVG 文書はこのインターフェイスを使って表現されていました。しかし、現在では SVG 文書は代わりに `XMLDocument` インターフェイスを用いて表現されています。

### 文書をまたがるスクリプティング - JavaScript 関数の呼び出し

HTML 文書に埋め込まれた SVG ファイルから HTML ファイルの中にある JavaScript 関数を呼び出すとき、その関数を参照するには `parent.functionname()` を使うべきです。Adobe SVG Viewer プラグインは `functionname()` の利用を許可していますが、このようなことを行うには適していません。

**メモ:** SVG wiki によると、 JavaScript の変数 `"parent"` は Adobe の SVG バージョン 6 プレビュープラグインでは壊れているとのことです。回避策として、`"parent"`の代わりに`"top"`を使用することが提案されています。このプラグインはベータ版なので、おそらく無視しても大丈夫でしょう。

更なる情報といくつかの例は SVG wiki inter-document scripting page で見つかります。

### `setProperty` には 3 つの引数がある

`svgElement.style.setProperty("fill-opacity", "0.0")` と関数を呼び出すと、 Mozilla では DOMException が `SYNTAX ERR` で発生します。この挙動は W3C によって DOM Level 2 Style 仕様の中で定められています。 `setProperty` 関数は 3 つの引数を持つ関数として定義されています。上記のものは、 `'svgElement.style.setProperty("fill-opacity", "0.0", "")'` で置き換えることができ、これが標準に準拠しています。

### リンク

SVG wiki on Scripting and Programming


defs - SVG: スケーラブルベクターグラフィック

defs
====

SVG では、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎり`defs`要素内で定義されることが推奨されています。`defs`要素内でこれらの要素を定義することは、SVG の要素の可読性を向上させ、ひいては操作性をも向上させます。`defs`要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、`<use>`要素を使用します。

利用コンテキスト
--------

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素、構造的要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素構造的要素グラデーション要素`<a>`、`<clipPath>`、`<color-profile>`、`<cursor>` (en-US)、`<filter>` (en-US)、`<font>` (en-US)、`<font-face>` (en-US)、`<foreignObject>`、`<image>`、`<marker>` (en-US)、`<mask>`、`<pattern>`、`<script>`、`<style>` (en-US)、`<switch>`、`<text>`、`<view>` (en-US) |

例
-

```xml
<svg width="80px" height="30px" viewBox="0 0 80 30"
 xmlns="http://www.w3.org/2000/svg">

  <defs>
    <linearGradient id="Gradient01">
      <stop offset="20%" stop-color="#39F" />
      <stop offset="90%" stop-color="#F3F" />
    </linearGradient>
  </defs>

  <rect x="10" y="10" width="60" height="10"
 fill="url(#Gradient01)" />
</svg>
```

属性
--

### グローバル属性

* 条件的処理属性（コンディショナルプロセッシング属性） »
* コア属性 »
* 描画イベント属性 »
* プレゼンテーション属性 »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### スペシフィック属性

*スペシフィック属性はありません。*

DOM インタフェース
-----------

この要素は `SVGDefsElement` インタフェースを実装しています。

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # Head |

ブラウザ互換性
-------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<mpath> - SVG: スケーラブルベクターグラフィック

<mpath>
=======

概要
--

`<animateMotion>`要素の mpath サブ要素は、外部の `<path>`要素をモーションパスの定義として参照する機能を提供します。

利用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | アニメーション要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。説明的要素 |

例
-

```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 500 300"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect
 x="1"
 y="1"
 width="498"
 height="298"
 fill="none"
 stroke="blue"
 stroke-width="2" />

  <!-- Draw the outline of the motion path in blue, along
 with three small circles at the start, middle and end. -->
  <path
 id="path1"
 d="M100,250 C 100,50 400,50 400,250"
 fill="none"
 stroke="blue"
 stroke-width="7.06" />
  <circle cx="100" cy="250" r="17.64" fill="blue" />
  <circle cx="250" cy="100" r="17.64" fill="blue" />
  <circle cx="400" cy="250" r="17.64" fill="blue" />

  <!-- Here is a triangle which will be moved about the motion path.
 It is defined with an upright orientation with the base of
 the triangle centered horizontally just above the origin. -->
  <path
 d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
 fill="yellow"
 stroke="red"
 stroke-width="7.06">
    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
      <mpath xlink:href="#path1" />
    </animateMotion>
  </path>
</svg>
```

出力結果:

属性
--

### グローバル属性

* Core attributes »
* Xlink attributes »
* `externalResourcesRequired`
### 専用属性

* `xlink:href (en-US)`
DOM インターフェイス
------------

この要素は `SVGMPathElement` インターフェイスを提供します。

仕様
--

| Specification |
| --- |
| SVG Animations Level 2 # MPathElement |

ブラウザ実装状況
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<animateMotion>`


<image> - SVG: スケーラブルベクターグラフィック

<image>
=======

The **`<image>`** は SVG の要素で、 SVG 文書内に画像を含めます。これはラスター画像ファイルや他の SVG ファイルを表示することができます。

SVG ソフトウェアが対応する必要がある画像形式は JPEG, PNG, および他の SVG ファイルです。アニメーション GIF の動作は未定義です。

`<image>` で表示される SVG ファイルは画像として扱われます。外部リソースは読み込まれず、 `:visited` のスタイルは適用されず、ユーザーと対話することはできません。動的な SVG 要素を埋め込みたいのであれば、 `<use>` を外部 URL で使用してください。 SVG ファイルを含めてその中でスクリプトを実行するのであれば、 `<object>` を `<foreignObject>` の中で使用してください。

**メモ:** HTML 仕様書は、解釈時に `<image>` を `<img>` の別名として定義しています。この仕様書の要素とその動作は SVG 文書またはインライン SVG 内のみのものです。

使用場所
----

|  |  |
| --- | --- |
| カテゴリー | グラフィック要素、グラフィック参照要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

属性
--

### グローバル属性

* 条件処理属性
* コア属性
* グラフィカルイベント属性
* プレゼンテーション属性
* Xlink 属性
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### 固有の属性

* `x`: 原点から見た画像の水平位置です。
* `y`: 原点から見た画像の垂直位置です。
* `width (en-US)`: 画像が描画される幅です。 HTML の `<img>` とは異なり、この属性は必須です。
* `height (en-US)`: 画像が描画される高さです。 HTML の `<img>` とは異なり、この属性は必須です。
* `href (en-US)` および `xlink:href (en-US)`: 画像ファイルの URL を指します。
* `preserveAspectRatio (en-US)`: 画像の拡大縮小方法を制御します。
DOM インターフェイス
------------

`<image>` は `SVGImageElement` (en-US) インターフェイスを実装しています。

例
-

SVG 内における PNG 画像の基本的な描画:

### SVG

```html
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <image href="mdn\_logo\_only\_color.png" height="200" width="200" />
</svg>
```

### 結果

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # ImageElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<tspan> - SVG: スケーラブルベクターグラフィック

<tspan>
=======

SVG の **`<tspan>`** 要素は、 `<text>` 要素内にあるサブテキストやその他の `<tspan>` 要素を定義します。これにより、必要に応じてサブテキストのスタイルや位置を調整することができます。
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 240 40" xmlns="http://www.w3.org/2000/svg">
  <style>
 text {
 font: italic 12px serif;
 }
 tspan {
 font: bold 10px sans-serif;
 fill: red;
 }
 </style>

  <text x="10" y="30" class="small">
    You are
    <tspan>not</tspan>
    a banana!
  </text>
</svg>
```

属性
--

`x`

 テキストのベースラインの開始点の X 座標です。
 *値の型*: **<length>**|**<percentage>** ; *既定値: none; Animatable*: **yes**

`y`

 テキストのベースラインの開始点の Y 座標です。
 *値の型*: **<length>**|**<percentage>** ; *既定値: none; Animatable*: **yes**

`dx`

 テキストの位置を直前のテキスト要素から水平方向にずらします。
 *値の型*: **<length>**|**<percentage>** ; *Default value*: *none*; *Animatable*: **yes**

`dy (en-US)`

 テキストの位置を直前のテキスト要素から垂直方向にずらします。
 *値の型*: **<length>**|**<percentage>** ; *既定値: none; Animatable*: **yes**

`rotate (en-US)`

 それぞれの文字の向きを回転します。文字ごとに個別に回転させることができます。
 *値の型*: **<list-of-number>** ; *既定値*: none; *Animatable*: **yes**

`lengthAdjust`

 テキストを`textLength` 属性で定義された幅に合わせるために伸縮する方法です。
 *値の型*: `spacing`|`spacingAndGlyphs`; *既定値*: `spacing`; *Animatable*: **yes**

`textLength (en-US)`

 テキストを伸縮して合わせる幅です。
 *値の型*: **<length>**|**<percentage>** ; *既定値*: *none*; *Animatable*: **yes**

### グローバル属性

コア属性

特に: `id`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に: `requiredExtensions`, `systemLanguage (en-US)`

Event Attributes

グローバルイベント属性, グラフィックイベント属性

プレゼンテーション属性

特に: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `dominant-baseline (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `text-anchor (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

Aria 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

使用場面
----

|  |  |
| --- | --- |
| カテゴリー | テキストコンテンツ要素、テキストコンテンツの子要素 |
| 許可されている内容 | 任意の順で文字データと任意の数の以下の要素。説明的要素`<a>`、`<animate>`、`<set>`、`<tref>` (en-US)、`<tspan>` |

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TextElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<feColorMatrix> - SVG: スケーラブルベクターグラフィック

<feColorMatrix>
===============

**`<feColorMatrix>`** は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 `[R,G,B,A]` は 5 x 5 の行列で行列乗算され、新しい色 `[R',G',B',A']` を生成します。

**メモ:** 基本的な記号 ***`'`*** は、数学で変換された結果を表すために使用されます。
```

| R' |     | r1 r2 r3 r4 r5 |   | R |
| G' |     | g1 g2 g3 g4 g5 |   | G |
| B' |  =  | b1 b2 b3 b4 b5 | * | B |
| A' |     | a1 a2 a3 a4 a5 |   | A |
| 1  |     | 0  0  0  0  1 |   | 1 |
```

簡略化すると、新しいピクセルの各色のチャンネルがどのように計算されるかを以下に示します。最後の行は値が一定なので無視されます。
```

R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
B' = b1*R + b2*G + b3*B + b4*A + b5
A' = a1*R + a2*G + a3*B + a4*A + a5
```

新しいピクセルの赤の量、すなわち `R'` に注目すると下記のようになります。

これは以下の値の合計です。

* 旧ピクセルの赤成分 `R` の `r1` 倍
* 旧ピクセルの緑成分 `G` の `r2` 倍
* 旧ピクセルの青成分 `B` の `r3` 倍
* 旧ピクセルのアルファ成分 `A` の `r4` 倍
* 加えて加算値の `r5`

これらの指定された数量は任意の実数を取ることができますが、最終的な **R'** は 0 ～ 1 の間に丸められます。 **G'**, **B'**, **A'** についても同様です。
```

R'      =      r1 * R      +        r2 * G      +       r3 * B      +       r4 * A       +       r5
New red = [ r1 * old red ] + [ r2 * old green ] + [ r3 * old Blue ] + [ r4 * old Alpha ] + [ shift of r5 ]
```

例えば、真っ黒な画像をより赤くしたい場合は、 `r5` を正の実数 *x* とすれば、新しい画像の各画素の赤さを *x* だけ増加させます。

**単位行列** は次のようになります。
```

     R G B A W
R' | 1 0 0 0 0 |
G' | 0 1 0 0 0 |
B' | 0 0 1 0 0 |
A' | 0 0 0 1 0 |
```

この中では、新しい値はすべて古い値のちょうど 1 倍の値であり、それ以外は何も加えられていません。ここから行列の操作を始めることをお勧めします。

使用場面
----

|  |  |
| --- | --- |
| カテゴリー | フィルター構成要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。`<animate>`、`<set>` |

属性
--

### グローバル属性

* コア属性
* プレゼンテーション属性
* フィルタープリミティブ属性
* `class (en-US)`
* `style (en-US)`
### 固有の属性

* `in (en-US)`
* `type (en-US)`
* `values (en-US)`
DOM インターフェイス
------------

この要素は `SVGFEColorMatrixElement` (en-US) インターフェイスを実装しています。

例
-

### SVG

```html
<svg
 width="100%"
 height="100%"
 viewBox="0 0 150 500"
 preserveAspectRatio="xMidYMid meet"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <!-- ref -->
  <defs>
    <g id="circles">
      <circle cx="30" cy="30" r="20" fill="blue" fill-opacity="0.5" />
      <circle cx="20" cy="50" r="20" fill="green" fill-opacity="0.5" />
      <circle cx="40" cy="50" r="20" fill="red" fill-opacity="0.5" />
    </g>
  </defs>
  <use href="#circles" />
  <text x="70" y="50">Reference</text>

  <!-- identity matrix -->
  <filter id="colorMeTheSame">
    <feColorMatrix
 in="SourceGraphic"
 type="matrix"
 values="1 0 0 0 0
 0 1 0 0 0
 0 0 1 0 0
 0 0 0 1 0" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 70)"
 filter="url(#colorMeTheSame)" />
  <text x="70" y="120">Identity matrix</text>

  <!-- Combine RGB into green matrix -->
  <filter id="colorMeGreen">
    <feColorMatrix
 in="SourceGraphic"
 type="matrix"
 values="0 0 0 0 0
 1 1 1 1 0
 0 0 0 0 0
 0 0 0 1 0" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 140)"
 filter="url(#colorMeGreen)" />
  <text x="70" y="190">rgbToGreen</text>

  <!-- saturate -->
  <filter id="colorMeSaturate">
    <feColorMatrix in="SourceGraphic" type="saturate" values="0.2" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 210)"
 filter="url(#colorMeSaturate)" />
  <text x="70" y="260">saturate</text>

  <!-- hueRotate -->
  <filter id="colorMeHueRotate">
    <feColorMatrix in="SourceGraphic" type="hueRotate" values="180" />
  </filter>
  <use
 href="#circles"
 transform="translate(0 280)"
 filter="url(#colorMeHueRotate)" />
  <text x="70" y="330">hueRotate</text>

  <!-- luminanceToAlpha -->
  <filter id="colorMeLTA">
    <feColorMatrix in="SourceGraphic" type="luminanceToAlpha" />
  </filter>
  <use href="#circles" transform="translate(0 350)" filter="url(#colorMeLTA)" />
  <text x="70" y="400">luminanceToAlpha</text>
</svg>
```

### 結果

| Screenshot | Live sample |
| --- | --- |
|  |  |

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # feColorMatrixElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<filter>` (en-US)
* `<animate>`
* `<set>`
* `<feBlend>` (en-US)
* `<feComponentTransfer>` (en-US)
* `<feComposite>` (en-US)
* `<feConvolveMatrix>` (en-US)
* `<feDiffuseLighting>` (en-US)
* `<feDisplacementMap>` (en-US)
* `<feFlood>` (en-US)
* `<feGaussianBlur>` (en-US)
* `<feImage>` (en-US)
* `<feMerge>` (en-US)
* `<feMorphology>`
* `<feOffset>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* SVG チュートリアル: フィルター効果


<feDropShadow> - SVG: スケーラブルベクターグラフィック

<feDropShadow>
==============

SVG の **`<feDropShadow>`** フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは `<filter>` (en-US) 要素の中でのみ使用できます。

**メモ:** ドロップシャドウの色や不透明度は、 `flood-color (en-US)` や `flood-opacity (en-US)` の各プレゼンテーション属性を使用することで変更できます。
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="0.2" dy="0.4" stdDeviation="0.2" />
    </filter>
    <filter id="shadow2">
      <feDropShadow dx="0" dy="0" stdDeviation="0.5" flood-color="cyan" />
    </filter>
    <filter id="shadow3">
      <feDropShadow
 dx="-0.8"
 dy="-0.8"
 stdDeviation="0"
 flood-color="pink"
 flood-opacity="0.5" />
    </filter>
  </defs>

  <circle cx="5" cy="50%" r="4" style="fill:pink; filter:url(#shadow);" />

  <circle cx="15" cy="50%" r="4" style="fill:pink; filter:url(#shadow2);" />

  <circle cx="25" cy="50%" r="4" style="fill:pink; filter:url(#shadow3);" />
</svg>
```

属性
--

`dx`

 この属性は、ドロップシャドウの X 方向のオフセットを定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

`dy (en-US)`

 この属性は、ドロップシャドウの Y 方向のオフセットを定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

`stdDeviation (en-US)`

 この属性は、ドロップシャドウのぼかし操作の標準偏差を定義します。
 *値の型*: **<number>**; *既定値*: `2`; *Animatable*: **yes**

### グローバル属性

コア属性

特に: `id`

スタイル属性
`class (en-US)`, `style (en-US)`
フィルタープリミティブ属性
`height (en-US)`, `in (en-US)`, `result (en-US)`, `x`, `y`, `width (en-US)`
プレゼンテーション属性

特に: `flood-color (en-US)`, `flood-opacity (en-US)`

使用上の注意
------

|  |  |
| --- | --- |
| カテゴリー | フィルター構成要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。`<animate>`、`<script>`、`<set>` |

仕様書
---

| Specification |
| --- |
| Filter Effects Module Level 1 # feDropShadowElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


polyline - SVG: スケーラブルベクターグラフィック

polyline
========

概要
--

`polyline`要素は SVG の基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的に`polyline` 要素は開いた図形を生成する際に使用します。

使用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | 基本シェイプ要素、グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

例
-

» polyline.svg

属性
--

### グローバル属性

* 条件処理属性 »
* コア属性 »
* グラフィカルイベント属性 »
* プレゼンテーション属性 »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
### 専用属性

* `points`
DOM インターフェイス
------------

この要素は `SVGPolylineElement` インターフェイスを提供します。

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolylineElement |

ブラウザ実装状況
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<line>`
* `<polygon>`


<animate> - SVG: スケーラブルベクターグラフィック

<animate>
=========

SVG の **`<animate>`** 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。
```

html,
body,
svg {
  height: 100%;
  margin: 0;
  padding: 0;
}
```

```html
<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <rect width="10" height="10">
    <animate
 attributeName="rx"
 values="0;5;0"
 dur="10s"
 repeatCount="indefinite" />
  </rect>
</svg>
```

属性
--

### アニメーション属性

アニメーションタイミング属性
`begin (en-US)`, `dur (en-US)`, `end`, `min (en-US)`, `max (en-US)`, `restart (en-US)`, `repeatCount (en-US)`, `repeatDur (en-US)`, `fill`
アニメーション値属性
`calcMode (en-US)`, `values (en-US)`, `keyTimes (en-US)`, `keySplines (en-US)`, `from (en-US)`, `to (en-US)`, `by (en-US)`
その他のアニメーション属性

特に重要なもの: `attributeName (en-US)`, `additive (en-US)`, `accumulate (en-US)`

アニメーションイベント属性

特に重要なもの: `onbegin`, `onend`, `onrepeat`

### グローバル属性

コア属性

特に重要なもの: `id`

スタイル属性
`class (en-US)`, `style (en-US)`
イベント属性

グローバルイベント属性, 文書要素イベント属性

使用上の注意
------

この要素は `SVGAnimateElement` (en-US) インターフェイスを実装しています。

アクセシビリティの考慮事項
-------------

点滅や発光のアニメーションは、注意欠陥障碍 (ADHD) のような認知障碍を持つ人にとって問題になることがあります。加えて、このような動きは、前庭障害、てんかん、偏頭痛、光感受性障害の引き金になる可能性があります。

アニメーションを一時停止したり無効にしたりする仕組みを提供したり、 Reduced Motion Media Query を使用して、アニメーションなしの利用を設定したユーザーに適した利用方法を作成するようにすることを検討してください。

* Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
* An Introduction to the Reduced Motion Media Query | CSS-Tricks
* Responsive Design for Motion | WebKit
* MDN Understanding WCAG, Guideline 2.2 explanations
* Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0
仕様書
---

| Specification |
| --- |
| SVG Animations Level 2 # AnimateElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


<polygon> - SVG: スケーラブルベクターグラフィック

<polygon>
=========

**`<polygon>`** 要素は、接続された一連の直線の区間で構成される閉じた図形を定義します。最後の点は最初の点と結ばれます。

開いた図形については `<polyline>` 要素をご覧ください。

例
-
```

html,
body,
svg {
  height: 100%;
}
```

```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 既定で塗りつぶす多角形の例 -->
  <polygon points="0,100 50,25 50,75 100,0" />

  <!-- 同じ多角形で線を持ち塗りつぶされない例 -->
  <polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
```

属性
--

`points`

 この属性は多角形を描くのに必要な点 (絶対座標の `x,y` の組) のリストを定義します。
 *値の型*: **<number>**+ ; *既定値*: `""`; *アニメーション*: **可**

`pathLength (en-US)`

 This attribute lets specify the total length for the path, in user units.
 *値の型*: **<number>** ; *既定値*: *none*; *アニメーション*: **可**

### グローバル属性

コア属性

特に重要なもの: `id`, `tabindex (en-US)`

スタイル属性
`class (en-US)`, `style (en-US)`
条件処理属性

特に重要なもの: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性, グラフィックイベント属性

プレゼンテーション属性

特に重要なもの: `clip-path (en-US)`, `clip-rule (en-US)`, `color`, `color-interpolation (en-US)`, `color-rendering`, `cursor (en-US)`, `display (en-US)`, `fill`, `fill-opacity`, `fill-rule (en-US)`, `filter (en-US)`, `mask (en-US)`, `opacity (en-US)`, `pointer-events (en-US)`, `shape-rendering (en-US)`, `stroke`, `stroke-dasharray`, `stroke-dashoffset`, `stroke-linecap`, `stroke-linejoin`, `stroke-miterlimit`, `stroke-opacity (en-US)`, `stroke-width (en-US)`, `transform`, `vector-effect`, `visibility (en-US)`

ARIA 属性

`aria-activedescendant`, `aria-atomic`, `aria-autocomplete`, `aria-busy`, `aria-checked`, `aria-colcount`, `aria-colindex`, `aria-colspan`, `aria-controls`, `aria-current`, `aria-describedby`, `aria-details`, `aria-disabled`, `aria-dropeffect`, `aria-errormessage`, `aria-expanded`, `aria-flowto`, `aria-grabbed`, `aria-haspopup`, `aria-hidden`, `aria-invalid`, `aria-keyshortcuts`, `aria-label`, `aria-labelledby`, `aria-level`, `aria-live`, `aria-modal`, `aria-multiline`, `aria-multiselectable`, `aria-orientation`, `aria-owns`, `aria-placeholder`, `aria-posinset`, `aria-pressed`, `aria-readonly`, `aria-relevant`, `aria-required`, `aria-roledescription`, `aria-rowcount`, `aria-rowindex`, `aria-rowspan`, `aria-selected`, `aria-setsize`, `aria-sort`, `aria-valuemax`, `aria-valuemin`, `aria-valuenow`, `aria-valuetext`, `role`

使い方メモ
-----

|  |  |
| --- | --- |
| カテゴリー | 基本シェイプ要素、グラフィック要素、図形要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素 |

仕様書
---

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PolygonElement |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* **他の SVG 基本図形:**
    + `<circle>`
    + `<ellipse>`
    + `<line>`
    + `<polyline>`
    + `<rect>`


title - SVG: スケーラブルベクターグラフィック

title
=====

SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む **`<title>`** 要素を供給することができます。文書フラグメントが SVG 視覚メディアとしてレンダリングされるとき、`<title>` 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして `<title>`要素を表示するかもしれません。 `<title>` 要素を表示するが `path` 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。`<title>` 要素は一般に SVG 文書のアクセシビリティを向上させます。

一般に、`<title>` 要素は その `<title>` 要素の親の最初の子にするべきです。 `<title>`が実際にその `<title>` の親の最初の子要素である場合、ツールチップを表示するためにタイトルを使用する実装のみが表示することに注意してください。

利用可能な場所
-------

|  |  |
| --- | --- |
| カテゴリー | 説明的要素 |
| 許可されている内容 | あらゆる要素や文字データ |

属性
--

### グローバル属性

* コア属性
* `class (en-US)`
* `style (en-US)`
### 専用属性

*この要素には専用属性はありません。*

DOM インターフェイス
------------

この要素は `SVGTitleElement` (en-US) インターフェイスを実装します。

例
-

```xml
<svg width="500" height="300" xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>SVG Title Demo example</title>
    <rect x="10" y="10" width="200" height="50"
 style="fill:none; stroke:blue; stroke-width:1px"/>
  </g>
</svg>
```

仕様
--

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # TitleElement |

ブラウザー互換性
--------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* `<desc>`