recursal/MDN huggingface dataset:
<switch>
========

**`<switch>`** は SVG の要素で、その直接の子要素の `requiredFeatures (en-US)`, `requiredExtensions`, `systemLanguage (en-US)` 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。他の直接の子要素はバイパスされ、描画されません。子要素が `<g>` のようなコンテナー要素であった場合、そのサブツリーも処理されたり描画されたりするか、バイパスされたり描画されなかったりします。

**メモ:** `display` および `visibility` プロパティは、 `<switch>` 要素の処理には何の影響もありません。特に、子に `display:none` を設定しても、 `<switch>` 処理の真偽テストには影響しません。

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

|  |  |
| --- | --- |
| カテゴリー | コンテナー要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。アニメーション要素説明的要素図形要素`<a>`、`<foreignObject>`、`<g>`、`<image>`、`<svg>`、`<switch>`、`<text>`、`<use>` |

属性
--

### グローバル属性

* 条件処理属性
* コア属性
* グラフィックイベント属性
* プレゼンテーション属性
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
* `transform`
DOM インターフェイス
------------

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

SVG <switch> の例
---------------

この例は、ブラウザーの言語設定に応じて異なるテキストコンテンツを表示する方法を示しています。 `switch` 要素は、 `systemLanguage` 属性がユーザーの言語に一致する子要素の最初のものを表示し、どれも一致しない場合は、 `systemLanguage` 属性を持たないフォールバック要素を表示します。

### HTML コンテンツ


```html
<svg viewBox="0 -20 100 50">
  <switch>
    <text systemLanguage="ar">مرحبا</text>
    <text systemLanguage="de,nl">Hallo!</text>
    <text systemLanguage="en-us">Howdy!</text>
    <text systemLanguage="en-gb">Wotcha!</text>
    <text systemLanguage="en-au">G'day!</text>
    <text systemLanguage="en">Hello!</text>
    <text systemLanguage="es">Hola!</text>
    <text systemLanguage="fr">Bonjour!</text>
    <text systemLanguage="ja">こんにちは</text>
    <text systemLanguage="ru">Привет!</text>
    <text>☺</text>
  </switch>
</svg>
```

### 結果

仕様書
---

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

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

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

`ellipse` 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。

**メモ:** 楕円要素は楕円の傾きを指定することはできません (例えば、45 度の角度で傾斜した楕円を描画したい場合)、しかし `transform` 属性を使用することで回転させることは可能です。
```

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



```html
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
  <ellipse cx="100" cy="50" rx="100" ry="50" />
</svg>
```

属性
--

`cx`

 楕円の x 座標。
 *Value type*: **<length>**|**<percentage>** ; *デフォルト値*: `0`; *アニメーション*: **yes**

`cy`

 楕円の y 座標。
 *Value type*: **<length>**|**<percentage>** ; *デフォルト値*: `0`; *アニメーション*: **yes**

`rx (en-US)`

 x 軸の半径。
 *Value type*: `auto`|**<length>**|**<percentage>** ; *デフォルト値*: `auto`; *アニメーション*: **yes**

`ry (en-US)`

 y 軸の半径。
 *Value type*: `auto`|**<length>**|**<percentage>** ; *デフォルト値*: `auto`; *アニメーション*: **yes**

`pathLength (en-US)`

 この属性は、使用単位での単位合計パス長さを指定します。
 *Value type*: **<number>** ; *デフォルト値*: *none*; *アニメーション*: **yes**



**メモ:** SVG2 以降、`cx`、`cy`、`rx`、`ry` は、Geometry Properties であり、これらの属性は要素の CSS プロパティとして使用することもできます。

### グローバル属性

コア属性

注目すべき属性: `id`, `tabindex (en-US)`

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

注目すべき属性: `requiredExtensions`, `systemLanguage (en-US)`

イベント属性

グローバルイベント属性、Graphical イベント属性

プレゼンテーション属性

注目すべき属性: `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 # EllipseElement |

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

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

関連情報
----

* その他の SVG 基本図形: **`<circle>`**, `<line>`, `<polygon>`, `<polyline>`, `<rect>`
<stop>
======

SVG の **`<stop>`** 要素は、グラデーションで使用する色と位置を定義します。この要素は常に `<linearGradient>` または `<radialGradient>` 要素の子です。

例
-
```

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



```html
<svg
 viewBox="0 0 10 10"
 xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="5%" stop-color="gold" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my linear gradient -->
  <circle cx="5" cy="5" r="4" fill="url('#myGradient')" />
</svg>
```

属性
--

`offset`

 この属性は、グラデーションベクトルに沿って配置される色停止点の位置を定義します。
 *値の型*: **<number>**|**<percentage>**; *既定値*: `0`; *アニメーション*: **可**

`stop-color`

 この属性は、グラデーションの色停止点の色を定義します。CSS プロパティとして使用することができます。
 *値の型*: `currentcolor`|**<color>**|**<icccolor>**; *既定値*: `black`; *アニメーション*: **可**

`stop-opacity (en-US)`

 この属性はグラデーションの色停止点の (不) 透明度を表します。CSS プロパティとして使用することができます。
 *値の型*: **<opacity>**; *既定値*: `1`; *アニメーション*: **可**

### グローバル属性

コア属性

最重要のもの: `id`

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

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

プレゼンテーション属性

最重要のもの: `color`, `display (en-US)`, `stop-color`, `stop-opacity (en-US)`, `visibility (en-US)`

利用メモ
----

|  |  |
| --- | --- |
| カテゴリー | グラデーション要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。`<animate>`、`<set>` |

仕様書
---

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

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

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

**`<line>`** 要素は SVG の基本図形であり、2 つの点をつなぐ直線を作成するために使用します。
```

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



```html
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <line x1="0" y1="80" x2="100" y2="20" stroke="black" />

  <!-- If you do not specify the stroke
 color the line will not be visible -->
</svg>
```

属性
--

`x1`

 線の始点の X 座標を定義します。
 *値の型*: **<length>**|**<percentage>**|**<number>** ; *既定値*: `0`; *アニメーション*: **可**

`x2 (en-US)`

 線の終点の X 座標を定義します。
 *値の型*: **<length>**|**<percentage>**|**<number>** ; *既定値*: `0`; *アニメーション*: **可**

`y1 (en-US)`

 線の始点の Y 座標を定義します。
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *既定値*: `0`; *アニメーション*: **可**

`y2 (en-US)`

 線の終点の Y 座標を定義します。
 *Value type*: **<length>**|**<percentage>**|**<number>** ; *既定値*: `0`; *アニメーション*: **可**

`pathLength (en-US)`

 パス全体の長さをユーザーの単位で定義します。
 *Value type*: **<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 # LineElement |

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

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

関連情報
----

* その他の SVG 基本図形: `<circle>`, `<ellipse>`, `<polygon>`, **`<polyline>`**, `<rect>`
rect
====

概要
--

`rect` 要素は SVG の基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。

例
-

### シンプルな `rect 要素の使い方`

» rect-1.svg

### `角の丸い rect` 要素

» rect-2.svg

属性
--

### グローバル属性

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

* `x`
* `y`
* `width (en-US)`
* `height (en-US)`
* `rx (en-US)`
* `ry (en-US)`
DOM インターフェイス
------------

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

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

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

仕様
--

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

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

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

関連情報
----

* `<path>`
animateTransform
================

`animateTransform` 要素は、 ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたはゆがみのアニメーションを制御することができます。

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

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

例
-


```html
<?xml version="1.0"?>
<svg
 width="120"
 height="120"
 viewBox="0 0 120 120"
 xmlns="http://www.w3.org/2000/svg"
 version="1.1"
 xmlns:xlink="http://www.w3.org/1999/xlink">
  <polygon points="60,30 90,90 30,90">
    <animateTransform
 attributeName="transform"
 attributeType="XML"
 type="rotate"
 from="0 60 70"
 to="360 60 70"
 dur="10s"
 repeatCount="indefinite" />
  </polygon>
</svg>
```

属性
--

### グローバル属性

* 条件処理属性 »
* コア属性 »
* アニメーションイベント属性 »
* Xlink 属性 »
* Animation attribute target attributes »
* アニメーションタイミング属性 »
* Animation value attributes »
* Animation addition attributes »
* `externalResourcesRequired`
### 専用属性

* `by (en-US)`
* `from (en-US)`
* `to (en-US)`
* `type (en-US)`
DOM インターフェース
------------

この属性は `SVGAnimateTransformElement` (en-US) インターフェースを提供します。

仕様
--

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

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

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

概要
--

`linearGradient` 要素はグラフィック要素の塗りまたは線への線形グラデーションを定義します。

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

|  |  |
| --- | --- |
| カテゴリー | グラデーション要素 |
| 許可されている内容 | 任意の数、任意の順序の以下の要素。説明的要素`<animate>`、`<animateTransform>`、`<set>`、`<stop>` |

例
-

» linearGradient.svg

属性
--

### グローバル属性

* コア属性 »
* プレゼンテーション属性 »
* Xlink 属性 »
* `class (en-US)`
* `style (en-US)`
* `externalResourcesRequired`
### 専用属性

* `gradientUnits (en-US)`
* `gradientTransform (en-US)`
* `x1`
* `y1 (en-US)`
* `x2 (en-US)`
* `y2 (en-US)`
* `spreadMethod (en-US)`
* `xlink:href (en-US)`
DOM インターフェース
------------

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

仕様
--

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

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

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

関連情報
----

* `<radialGradient>`
* `<stop>`
<feMorphology>
==============

**`<feMorphology>`** は SVG のフィルタープリミティブで、入力画像の拡大・縮小に用いられます。このプリミティブの有用性は、特に太らせたり痩せさせたりする効果にあります。

使用場面
----

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

属性
--

### グローバル属性

* コア属性
* プレゼンテーション属性
* Filter primitive attributes
* `class (en-US)`
* `style (en-US)`
### 特有の属性

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

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

例
-

### SVG コンテンツのフィルタリング

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="180">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
  <text y="1em">Normal text</text>
  <text id="thin" y="2em">Thinned text</text>
  <text id="thick" y="3em">Fattened text</text>
</svg>
```


#### CSS


```css
text {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}
```

### HTML コンテンツのフィルタリング

#### SVG


```html
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="erode">
    <feMorphology operator="erode" radius="1" />
  </filter>
  <filter id="dilate">
    <feMorphology operator="dilate" radius="2" />
  </filter>
</svg>

<p>Normal text</p>
<p id="thin">Thinned text</p>
<p id="thick">Fattened text</p>
```


#### CSS


```css
p {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
}

#thin {
  filter: url(#erode);
}

#thick {
  filter: url(#dilate);
}
```

仕様書
---

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

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

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

関連情報
----

* `<filter>` (en-US)
* `<animate>`
* `<set>`
* `<feBlend>` (en-US)
* `<feColorMatrix>`
* `<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)
* `<feOffset>` (en-US)
* `<feSpecularLighting>` (en-US)
* `<feTile>` (en-US)
* `<feTurbulence>` (en-US)
* SVG チュートリアル: フィルター効果
set
===

概要
--

`set` 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に補間することができないものも含みます。例えば、文字列や論理型といった値です。`set` 要素は非加算的要素です。additive 属性と accumulate 属性は許可されておらず、指定されても無視されます。

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

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

例
-

属性
--

### グローバル属性

* 条件処理属性 »
* コア属性 »
* アニメーションイベント属性 »
* Xlink 属性 »
* Animation attribute target attributes »
* アニメーションタイミング属性 »
* `externalResourcesRequired`
### 専用属性

* `to (en-US)`
DOM インターフェース
------------

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

仕様
--

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

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

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

関連情報
----

* `<animate>`
SVG の image 要素
==============

* « 前のページ
* 次のページ »

SVG の `<image>` 要素は、ラスター画像を SVG オブジェクト内に描画することを可能にします。

以下の基本的な例では、 `href (en-US)` 属性で参照されている .jpg 画像を SVG オブジェクト内に描画します。


```xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
 "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>
```


いくつか注意すべき重要事項があります (W3 仕様書に基づくものです)。

* x 属性や y 属性を措定しない場合、それらの値は 0 になります。
* height 属性や width 属性を指定しない場合、それらの値は 0 になります。
* height 属性または width 属性の値が 0 である場合、その画像を描画しません。
* « 前のページ
* 次のページ »
Introduction
============

* « 前のページ
* 次のページ »

SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML (en-US) 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。

SVG は、いくつかの競合するフォーマットが W3C に提案されたものの承認されなかった後の 1999 年頃に生まれました。仕様書は長い間存在していますがブラウザへの採用はかなり遅く、そのために今日 (2009 年) の Web で用いられている SVG コンテンツは少ない状態です。利用可能な実装でさえ、その多くは HTML:Canvas や完全なアプリケーションインタフェースとしての Adobe Flash のような競合技術ほど速くない状態です。SVG は実装の一部において、利用が可能な DOM インタフェースを含むことと、デフォルトでブラウザが動作するのにサードパーティの拡張機能を必要としないという利点があります。それを使用するかしないかは、たいていそれを使う目的に依存します。

基本的な構成要素
--------

HTML はヘッダ、段落、テーブルなどを定義する要素を提供します。同様に SVG は円、長方形、単純あるいは複雑な曲線などの要素を提供します。シンプルな SVG ドキュメントは `svg` ルート要素およびグラフィックを構成するいくつかの基本的な図形のみから成ります。加えて `g` があり、これはいくつかの基本的な図形をグループ化します。

ここから始めて、SVG 画像を複雑にしていくことができます。SVG はグラデーション、回転、フィルタ効果、アニメーション、JavaScript との連携などをサポートします。しかしこれら言語の追加機能すべては、グラフィックエリアを定義する比較的小さな要素のセットに依存します。

始める前に
-----

アプリケーション固有のファイルと同じように SVG を扱うことが出来る Inkscape のような free な、たくさんの draw アプリケーションがあります。しかし、このチュートリアルでは、信頼できる XML か (あなたが選んだ) テキストエディタを期待しています。このチュートリアルは、SVG の内部を理解したい人向けに作られています。一度 SVG を手書きでマークアップすることは、良い経験になります。それでも、最終的なゴールは意識するべきです。すべての SVG ビューアが同じということはなく、それらアプリが SVG 仕様や SVG と併せて用いる他の仕様 (JavaScript や CSS) を異なるレベルでサポートしているため、あるアプリ向けに記述した SVG がほかのアプリでは同じように表示されない可能性があります。

SVG は現行の全ブラウザでサポートされているわけではありません (あと一息ではありますが)。SVG ビューアのかなり完全な一覧が SVG Wiki にあります。Firefox はバージョン 1.5 から一部の SVG コンテンツをサポートしており、その後のリリースごとにサポートレベルが向上しています。うまくいけばこのチュートリアルと共に MDC が、開発者が Gecko とほかの主要な実装との間の違いを把握することの助けになるでしょう。

始める前に、XML もしくは HTML のような他のマークアップ言語の基本を理解するべきです。もし、XML に精通していなければ、以下に心にとめておく指針があります:

* SVG 要素および属性は、XML が (HTML とは異なり) 大文字小文字を区別するため、ここで示したとおりに入力しなければ成りません。
* SVG の属性値は、たとえ数値でも引用符で囲まれなければなりません。

SVG の仕様は巨大です。このチュートリアルは、初めの一歩を踏み出すためだけの範囲を担当しています。一度 SVG の基本に精通したら、知りたいことを見つけるために『SVG 要素リファレンス』 と、『Interface Reference』({{todo("デッドリンク")}}) を見てみるべきです。

SVG の種類
-------

2003 年に勧告が成立して以降、最新の "完全な" SVG バージョンは 1.1 です。これは SVG 1.0 の上に構築したものですが、実装を容易にするためにモジュール化が進みました。SVG 1.1 の第 2 版が現在策定中です。"完全な" SVG 1.2 は、次の SVG のメジャーリリースを意味していました。それは将来の SVG 2.0 のために破棄され、そして SVG 2.0 は現在鋭意開発中であり構成要素をいくつかの緩く結合した仕様に分割する、CSS 3 と似た手法をとっています。

完全な SVG 勧告からは離れて、W3C のワーキンググループは 2003 年に SVG Tiny と SVG Basic を導入しました。これら 2 つのプロファイルは、主にモバイルデバイスを対象にしています。SVG Tiny は、性能が低い小型デバイス向けに図形要素をもたらすでしょう。SVG Basic は完全な SVG が持つ機能の多くを提供しますが、実装が難しい機能や描画負荷の高い機能 (アニメーションなど) は含みません。2008 年に、SVG Tiny 1.2 が W3C 勧告になりました。

SVG 印刷の仕様の計画があり、これは複数のページや高度なカラーマネージメントのサポートを追加する予定でした。この作業は休止しています。

* « 前のページ
* 次のページ »
SVG In HTML Introduction
========================

概要
--

この記事と関連する例では、インラインの SVG をフォームの背景画像として使用する方法を示します。どのように JavaScript と CSS を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。

ソース
---

こちらにこの例のソースがあります。


```html
<html>
  <head>
    <title>XTech SVG Demo</title>
    <style>
 stop.begin {
 stop-color: yellow;
 }
 stop.end {
 stop-color: green;
 }
 body.invalid stop.end {
 stop-color: red;
 }
 #err {
 display: none;
 }
 body.invalid #err {
 display: inline;
 }
 </style>
    <script>
 function signalError() {
 document.getElementById("body").setAttribute("class", "invalid");
 }
 </script>
  </head>
  <body
 id="body"
 style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
    <form>
      <fieldset>
        <legend>HTML Form</legend>
        <p>
          <label>Enter something:</label>
          <input type="text" />
          <span id="err">Incorrect value!</span>
        </p>
        <p>
          <input type="button" value="Activate!" onclick="signalError();" />
        </p>
      </fieldset>
    </form>

    <svg
 viewBox="0 0 100 100"
 preserveAspectRatio="xMidYMid slice"
 style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
      <linearGradient id="gradient">
        <stop class="begin" offset="0%" />
        <stop class="end" offset="100%" />
      </linearGradient>
      <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
      <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
    </svg>
  </body>
</html>
```

議論
--

ページは主に通常の HTML, CSS, JavaScript を使用しています。唯一興味深いのは、その中に含まれている <svg> 要素です。この要素とその子は SVG 名前空間にあると宣言されています。この要素にはグラデーションと、グラデーションで塗りつぶされた 2 つの図形が含まれています。グラデーションの色停止点の色は CSS で設定されています。ユーザーがフォームに何か間違ったものを入力すると、スクリプトは <body> に `invalid` 属性を設定し、スタイル規則はグラデーションの `end-stop` の色を赤に変更します (別のスタイル規則によりエラーメッセージが表示されます)。

この方法は、以下のいくつかの点で有利です。

* 既存のサイトに含まれる通常の HTML フォームに対して、魅力のある対話式の背景を設定できます。
* SVG に対応していないブラウザーに対しても後方互換性があります。単純に背景が表示されないだけです。
* 単純ながら、非常に効率的です。
* 画像のサイズは動的に気の効いた方法で必要なサイズに変更されます。
* HTML と SVG の双方に適用するスタイルを宣言できます。
* 同一のスクリプトで HTML と SVG の双方を操作できます。
* 文書は、完全に標準準拠です。

**メモ:** DOM メソッドでリンクした画像を組み込まれた SVG 要素に追加するには、`href` の設定に `setAttributeNS` を使用してください。次の例のようにします:


```js
var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
```


詳細
--

`viewBox` 属性は、SVG 画像の座標と相対的な論理座標系を構築します。この場合、画像は 100 対 100 で貼り付けられます。

`preserveAspectRatio` 属性は、画像のアスペクト比を保ったまま、中心にそのままのサイズの画像を配置し、縦横ではみ出した部分を除きます。

`style` 属性はフォームの背景になる SVG 要素を指します。

関連リンク
-----

* 他の SVG in HTML の例: A swarm of motes
* Working example は、Mozilla と Adobe の SVG Viewer がインストールされた Internet Explorer の両方で動作します。(インライン SVG を Firefox と Internet Explorer の両方で動作させるには、ブラウザごとに異なる Content-Type のドキュメントを提供する必要があります。このため、ページをキャッシュするプロクシサーバに接続している場合は、サンプルを二回目に読み込んだブラウザでは間違った Content-Type を受け取るため、動作しないことがあります。)
Texts
=====

* « 前のページ
* 次のページ »

SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。

基礎
--

導入時の例示で見たとおり、`text` 要素を用いて SVG ドキュメントに任意のテキストを入れることができます。


```xml
<text x="10" y="10">Hello World!</text>
```


`x` および `y` 属性で、ビューポートのどこにテキストを表示するかを指定します。`text-anchor` 属性は start、middle、end、inherit の値を持つことができ、`x` および `y` 属性で指定した点からどちらの方向にテキストを流すかを指定できます。

図形の要素と同様に、テキストも `fill` 属性による着色と、`stroke` 属性によるストロークの付加ができます。またどちらもグラデーションやパターンを参照することができ、SVG の単純な色つきテキストを CSS 2.1 に比べて非常に強力にします。

フォントプロパティの設定
------------

テキストにおいて重要なことは、どのフォントで表示するかです。SVG はフォントを選択可能にするための属性のセットを用意しており、その多くは CSS で対応するプロパティに似ています。以下の各プロパティを、属性としてまたは CSS 宣言を通して設定できます: `font-family`, `font-style`, `font-weight`, `font-variant`, `font-stretch`, `font-size`, `font-size-adjust`, `kerning`, `letter-spacing`, `word-spacing` および `text-decoration`

他のテキスト関連要素
----------

### tspan

この要素は、長いテキストの一部分をマークアップするために用います。`text` 要素または他の `tspan` 要素の子要素にしなければなりません。典型的な用途は、文中の単語 1 つを赤色の太字にすることです。


```xml
<text>
  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
</text>
```


tspan 要素は以下のカスタム属性を持ちます:

**x**
 包含しているテキストの新たな絶対 X 座標を設定します。これはテキストのデフォルトの現在位置を上書きします。またこの属性は数値のリストを含むことができ、その値は一つずつ、tspan 要素内の各文字に適用されます。

**dx**
 テキストの描画開始位置を、既定の現在位置から水平方向に移動させるオフセットの値です。こちらも各文字に適用される値のリストを持つことができ、 従って次第にオフセットは累積していきます。

これらと同様に、垂直方向の移動量を示す **y** 属性や **dy** 属性もあります。

**rotate**
 すべての文字を指定した角度分回します。数値のリストを指定すると、それぞれの文字が指定した値の分だけ回転し、残った文字は直前の文字に指定された値に従って回転します。

**textLength**
 文字列の長さを意図的に指定する、ややわかりにくい属性です。これは、レンダリングエンジンが判断した文字列の長さとこの属性で指定した値が一致しない場合に、レンダリングエンジンにグリフの位置を微調整させられることを意味します。

#### tref

`tref` 要素ではすでに定義しているテキストを参照でき、効率的にその文字列をコピーします。内容物のテキストを引用する要素を指し示すために `xlink:href` 属性を用いることができます。また引用元とは別に、スタイルの設定や外見の変更を行うことができます。


```xml
<text id="example">This is an example text.</text>

<text>
    <tref xlink:href="#example" />
</text>
```


#### textPath

この要素は `xlink:href` 属性を通して任意のパスを取り出し、そのパスに沿って囲むように文字を並べます。


```xml
<path id="my\_path" d="M 20,20 C 40,40 80,40 100,20" />
<text>
  <textPath xlink:href="#my\_path">This text follows a curve.</textPath>
</text>
```

* « 前のページ
* 次のページ »