SVG 関連ドキュメントの索引

73 ページあります:

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