65 ページあります:
| # | ページ | タグと要約 |
|---|---|---|
| 1 | SVG | References, SVG |
| Scalable Vector Graphics (SVG) は、2 次元ベクタ形式 のためのXML に基づくマークアップ言語です。おおまかには、テキストに対する HTML のような位置づけで、グラフィックに対して SVG が存在します。 | ||
| 2 | Content type | |
| No summary! | ||
| 3 | HTML コンテンツへ SVG 効果を適用する | |
| 最近のブラウザは、CSS スタイルの中での SVG の使用をサポートしており、HTML コンテンツに対してグラフィカルな効果を適用することができます。 | ||
| 4 | Other Resources | SVG |
| No summary! | ||
| 5 | SVG animation with SMIL | |
| Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。SMIL では以下のようなことができます: | ||
| 6 | SVG as an Image | Images, SVG |
| SVG画像は様々なコンテキストのイメージフォーマットとして使用することができます。多くのブラウザはSVG画像を以下のコンテキストでサポートします。 | ||
| 7 | SVG 属性リファレンス | NeedsHelp, SVG, SVG Attribute, SVG Reference |
onbegin, onend, onload, onrepeat |
||
| 8 | alignment-baseline | |
alignment-baseline属性は要素が親要素に対して配置される方法を指定します。このプロパティは要素と親要素の対応するベースラインのどれを揃えるかを指定します。 例えば、ローマ字文章でフォントサイズが変わった場合でもアルファベットのベースラインを一定にすることが可能になります。既定値はalignment-baselineプロパティの計算値と同じ名前の値となります。 |
||
| 9 | cx | |
<circle>要素と<ellipse>要素では、この属性は要素の中心のx座標を定義します。もしこの要素が特定できなければ、 ”0"を指定した振る舞いをします。 |
||
| 10 | d | |
| この属性は以下のようにパスを定義します。 | ||
| 11 | filterUnits | |
filterUnits属性は、 x, y, width そして height の座標系を定義します。 |
||
| 12 | stroke | SVG, SVG Attribute |
stroke属性は与えられた図形要素の外側に描画される色を定義します。stroke属性のデフォルト値は none です. |
||
| 13 | transform | |
transform属性は、要素と要素の子に適用され変換定義のリストを定義します。transformリストは半角スペースもしくはコンマ（,）で区切り、そのリストは右から左へと順番に適用されます。 |
||
| 14 | x | |
| この属性はユーザー座標のx軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。 | ||
| 15 | y | |
| この属性はユーザー座標系のy軸座標を指定します。この属性の正確な影響は各要素の座標に依存します。ほとんどの場合、この属性参照している要素の左上を原点とした長方形のx軸座標を示します（例外については個々の要素のドキュメントを参照してください）。 | ||
| 16 | SVG 要素リファレンス | SVG, SVG Reference |
<animate>、 <animateColor>、 <animateMotion>、 <animateTransform>、 <set> |
||
| 17 | <foreignObject> | Element, Reference, SVG |
<foreignObject> SVG 要素は、異なるユーザーエージェントによって描画されるグラフィックコンテンツを持つ外部XML名前空間を含めることを可能にします。含まれた外部グラフィックコンテンツは、SVG 変換や合成の対象となります。 |
||
| 18 | <image> | Element, Reference, SVG, SVG Graphics |
<image> SVG 要素は、ラスタ画像にSVG文書に含むことを可能にします。 |
||
| 19 | <mpath> | SVGアニメーション, リファレンス, 要素 |
<animateMotion>要素のmpath サブ要素は、外部の <path>要素をモーションパスの定義として参照する機能を提供します。 |
||
| 20 | <path> | SVG, SVG Element |
path 要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。 |
||
| 21 | <script> | Element, Reference, SVG |
SVG script 要素は、HTML の script 要素と同じでなので、 スクリプト（例えば ECMAScript）を設置するための場所です。 |
||
| 22 | <text> | Element, Reference, SVG, SVG Text Content |
SVG <text> 要素は、テキストからなるグラフィクス要素を定義します。<text> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。 |
||
| 23 | <tspan> | |
<text> 要素の中に <tspan> 要素を組み込むことで、テキストとフォントのプロパティ及び現在のテキストの位置を絶対値または相対値を用いた座標で調節することができます。 |
||
| 24 | a | |
| SVGのアンカー要素()は、ハイパーリンクを定義します。 | ||
| 25 | animate | Element, SVG, Élément |
animate 要素は図形要素の中に入れ、animate要素の属性には、アニメーションによってどのように変化するかを定義します。属性で指定された時間の間、初期値から終了値まで変化します。 |
||
| 26 | animateColor | |
animateColor要素は時間経過による色の変換を指定します。 |
||
| 27 | animateMotion | |
animateMotion 要素は、元となる要素を参照しモーションパスに沿って移動します。 |
||
| 28 | animateTransform | |
animateTransform 要素は、 ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたは、スキューするアニメーションを制御することができます。 |
||
| 29 | circle | |
<circle> SVG 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。 |
||
| 30 | defs | |
SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されています。defs要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。defs要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、<use>要素を使用します。 |
||
| 31 | desc | Element, SVG, SVG Descriptive |
SVG描画における各コンテナ要素またはグラフィック要素は、説明がテキストのみの <desc> 要素を用いる説明を供給することができます。 |
||
| 32 | ellipse | |
ellipse要素はSVGの基本的な図形であり、中心となる座標とx方向とy方向の半径両方を指定し、楕円を生成します。 |
||
| 33 | g | Element, Reference, Référence, SVG, SVG Container, SVG Element, Élément |
g 要素はオブジェクトをグループ化するためのコンテナです。g 要素に適用された変形はその全ての子要素に対して実行されます。適用された属性は子要素に継承されます。加えて、複雑なオブジェクトを g 要素を使って定義しておくと後に <use> 要素で参照することができます。 |
||
| 34 | line | |
line要素はSVGの基本図形であり、2つの座標を繋いた直線を描画します。 |
||
| 35 | linearGradient | |
linearGradient要素はグラフィック要素の塗りまたは線への線形グラデーションを定義します。 |
||
| 36 | metadata | |
メタデータはデータに関する構造化データです。SVGコンテンツに含まれているメタデータは、 metadata 要素で指定する必要があります。 metadata 要素の内容はRDF,FOAFなどの他のXML名前空間からの要素でなければなりません。 |
||
| 37 | polygon | |
polygon要素は、全てが繋がった直線とセグメントで構成された閉じた図形を定義します。 |
||
| 38 | polyline | |
polyline要素はSVGの基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的にpolyline要素は開いた図形を生成する際に使用します。 |
||
| 39 | radialGradient | |
radialGradient要素はグラフィックス要素の塗りまたは線への放射状グラデーションを定義します。 |
||
| 40 | rect | |
rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。 |
||
| 41 | set | |
set 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に保管することができないものも含みます。例えば、文字列や論理型といった値です。set 要素は非加算的要素です。 The additive and accumulate attributes are not allowed, and will be ignored if specified. |
||
| 42 | svg | Element, SVG, SVG Container, SVG Element |
svg 要素は、現在のドキュメント（例えば HTML ドキュメント）の中に SVG の断片を埋め込むために使われます。この SVG 断片は独自のビューポートと座標系を持ちます。 |
||
| 43 | title | Element, Reference, SVG, SVG Descriptive |
SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む <title> 要素を供給することができます。文書フラグメントがSVG視覚メディアとしてレンダリングされるとき、<title> 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして <title>要素を表示するかもしれません。 <title> 要素を表示するが path 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。<title> 要素は一般に SVG 文書のアクセシビリティを向上させます。 |
||
| 44 | use | Element, NeedsBrowserCompatibility, Reference, SVG, SVG Graphics |
<use> 要素は SVG ドキュメントの中からノード取り出して、別の場所に複製します。効果は、あたかもノードが非公開の DOM に完全にクローンされ、HTML5 の template 要素のように、use 要素がある場所に貼り付けられたかのように同じになります。クローンされたノードは公開されないので、CSS を使って use 要素とその隠れた子孫要素にスタイル付けをする場合は注意が必要です。CSS の継承を使用して明示的に要求しない限り、CSS 属性は隠されたクローンの DOM によって継承されることは保証されません。 |
||
| 45 | SVG 関連ドキュメントの索引 | Index, SVG, index |
| 56 ページあります: | ||
| 46 | スクリプティング | SVG |
| No summary! | ||
| 47 | チュートリアル | MDC Project, NeedsContent, SVG, SVG:Tutorial |
| Scalable Vector Graphics (SVG) はグラフィックスをマークアップするための、W3C の XML 派生言語です。これは Firefox、Opera、WebKit ブラウザ、Internet Explorer 等のブラウザで部分的にサポートされています。 | ||
| 48 | Basic Shapes | |
| ほとんどの SVG 描画では、数種類の基本的な図形が使われます。それら図形の用途は、その名前からかなり明確です。図形の位置やサイズを指定する属性をいくつか示しますが、要素リファレンスにはここで網羅しない他のプロパティも含めて正確で完全な説明があるでしょう。しかし、それらはほとんどの SVG ドキュメントで用いられますので、何らかの形で紹介することが必要でしょう。 | ||
| 49 | Basic Transformations | SVG, SVG:Tutorial |
これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、<g> 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します: |
||
| 50 | Fills and Strokes | SVG, SVG:Tutorial |
| 全種類の図形を描く方法を知ることができましたので、次の目標はそれらに色をつけることでしょう。これを行う方法はいくつかあり、オブジェクトの属性で指定、インライン CSS の利用、埋め込んだ CSS セレクタの利用、外部 CSS ファイルの利用が含まれます。Web で見かけるほとんどの SVG はインライン CSS を用いていますが、どの方法にも利点と欠点があります。 | ||
| 51 | Filter effects | SVG, SVG:Tutorial |
| 基本的な図形は、ある効果を得るために必要な柔軟性を持っていない場合があります。一般的な例として、影を落とす効果はグラデーションの組み合わせで無理なく作成することができません。フィルタは、複雑な効果を与えることを可能にする SVG の機能です。 | ||
| 52 | Getting Started | SVG, SVG:Tutorial |
| 簡単な例で正しく始めましょう。下のコードを見てください。 | ||
| 53 | Gradients | SVG, SVG:Tutorial |
| 単純な塗りつぶしや枠線より面白いであろう効果として、fill や stroke にグラデーションを作成および適用できます。 | ||
| 54 | Introduction | SVG, SVG:Tutorial |
 SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。 |
||
| 55 | Other content in SVG | SVG, SVG:Tutorial |
| 長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。 | ||
| 56 | Paths | |
前のセクションで述べたとおり、<path> 要素は SVG の基本的な図形の中でもっとも強力な要素です。これは、(少なくともよく似ている) 他のすべての図形などを作成するために用いることができます。 |
||
| 57 | Patterns | SVG, SVG:Tutorial |
私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<pattern> 要素は SVG ファイルの <defs> セクションに置かなければなりません。 |
||
| 58 | Positions | SVG, SVG:Tutorial |
| 59 | SVG Fonts | SVG, SVG:Tutorial |
| SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。 | ||
| 60 | SVG Image Tag | NeedsEditorialReview, NeedsTechnicalReview |
| SVG の image 要素は、ラスタイメージを SVG オブジェクト内に描画することを可能にします。 | ||
| 61 | SVG のツール | |
| SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。 | ||
| 62 | Texts | SVG, SVG:Tutorial |
| SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。 | ||
| 63 | クリッピングとマスキング | SVG, SVG:Tutorial |
| 苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。 | ||
| 64 | 名前空間の速修講座 | SVG, XML |
| XML の派生言語として、 SVG は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない Gecko ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。 | ||
| 65 | 例 | SVG, XML |
| この例で、私達は XHTML 、 SVG 、 JavaScript と DOM 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。 | ||