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

95 ページあります:

#	ページ	タグと要約
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) は、二次元ベースのベクター形式のための XML (en-US) に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば CSS, DOM, JavaScript, SMIL などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する HTML のような位置づけです。
2	HTML コンテンツへ SVG 効果を適用する
		最近のブラウザは、CSS スタイルの中での SVG の使用をサポートしており、HTML コンテンツに対してグラフィカルな効果を適用することができます。
3	SVG 属性リファレンス	Drawing, Landing, Responsive Design, SVG, SVG Attribute, SVG Reference, SVG リファレンス, SVG 属性, Vector Graphics, ベクターグラフィックス, レスポンシブデザイン, 描画
		SVG 要素は、要素の扱いや描画の詳細を指定する属性を使って変更できます。以下は、すべての SVG 属性のリストです。各属性のリンク先のドキュメンテーションでは、どの要素が属性をサポートしているか、どのように動作するかを学ぶことができます。
4	accent-height	Deprecated, NeedsExample, SVG, SVG Attribute
		accent-height属性は原点からアクセント文字の上端までの距離を定義します。これはフォント座標系で測られる距離です。
5	alignment-baseline	SVG, SVG Attribute
		alignment-baseline 属性は、要素が親要素に対して配置される方法を指定します。このプロパティは、要素と親要素の対応するベースラインのどれを揃えるかを指定します。例えば、ローマ字のテキストでフォントサイズが変わった場合でも、アルファベットのベースラインを一定にすることが可能になります。既定値は alignment-baseline プロパティの計算値と同じ名前の値となります。
6	cx
		cx属性は中心のx-座標を定義します。
7	cy	SVG, SVG Attribute
		cy属性は中心のy-座標を定義します。
8	d	SVG, SVG Attribute
		d属性は描かれるパスを定義します。
9	dx	NeedsCompatTable, NeedsExample, Reference, SVG, SVG Attribute
		« SVG Attribute reference home
10	end	NeedsCompatTable, SVG, SVG Attribute
		end 属性は、アクティブな期間を制限できるアニメーションの終了値を定義します。
11	fill-opacity	SVG, SVG Attribute
		fill-opacity属性は、図形に適用されるペイントサーバー(色, 勾配, パターン, 等)の不透明度を定義するプレゼンテーション属性です。
12	fill
		fill 属性には使われ方により2つの意味があります.  1つは図形やテキストに使われた場合で，その要素を塗りつぶす色を意味します．もう1つはアニメーションに使われた場合で，そのアニメーションの最終状態を定義します．
13	filterUnits
		« SVG Attribute reference home
14	class
		The href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it.
15	id	SVG, SVG Attribute, SVG 属性
		id 属性は要素に固有の名前を割り当てます。
16	lengthAdjust	NeedsCompatTable, SVG
		SVG の <text> 要素または <tspan> 要素が特定の長さを有している場合、それは textLength 属性を使って設定したものである訳ですが、lengthAdjust 属性は、テキストをその長さに引き延ばすかあるいはその長さに圧縮する方法を制御します。
17	marker-mid	SVG, SVG Attribute, SVG 属性
		marker-mid 属性は、指定されたシェイプの中間の頂点すべてに描かれる矢印やマーカーを定義します。
18	onclick	SVG, SVG Attribute, events, イベント
		onclick 属性は、要素がクリックされたときに実行するスクリプトを指定します。
19	points
		points 属性は、点のリストを定義します。各点は、ユーザー座標系におけるX座標とY座標を表す数値の組で定義されます。属性に奇数の座標が含まれている場合、最後の座標は無視されます。
20	r	SVG, SVG属性
		r 属性は円の半径を定義します。
21	scale	Filters, SVG, SVG Attribute
		scale属性は、feDisplacementMapフィルタプリミティブにおいて用いられる距離の尺度因子を定義します。その量は、filter要素のprimitiveUnits属性で規定される座標系で表されます。
22	stroke-dasharray
		stroke-dasharray属性は、 輪郭を描くために使用される、破線や間隔のある線のパターンを定義するプレゼンテーション属性です。
23	stroke-dashoffset
		stroke-dashoffset属性は、関連する破線をレンダリングするうえで、オフセットを定義するプレゼンテーション属性です。
24	stroke-linecap	NeedsCompatTable, SVG, SVG Attribute
		« SVG 属性リファレンスホーム
25	stroke-linejoin	NeedsCompatTable, SVG, SVG Attribute
		« SVG 属性リファレンスホーム
26	stroke	SVG, SVG Attribute
		« SVG Attribute reference home
27	transform	SVG, SVG Attribute
		transform 属性は、要素とその要素の子に適用される変換定義のリストを定義します。
28	viewBox
		« SVG Attribute reference home
29	writing-mode	NeedsExample, SVG, SVG Attribute
		writing-mode 属性は、 text 要素の最初のインライン進行方向が左から右、右から左、上から下のいずれであるかを指定します。 writing-mode 属性は text 要素にのみ適用されます。 tspan, tref, altGlyph, textPath サブ要素には無視されます。 (なお、インライン進行方向は、 Unicode 双方向アルゴリズムとプロパティ direction および unicode-bidi により、 text 要素内で変更される可能性があることに注意してください)。
30	x
		« SVG属性リファレンス ホームへ
31	x1	Drawing Lines, Gradients, LInes, SVG, SVG Attribute, SVG Gradients, SVGグラデーション, SVG属性, Vector Graphics, グラデーション, ベクター画像, 描画, 直線
		x1 属性は、二つ以上の座標を必要とする SVG 要素を描画するための一つ目の x 座標を指定するのに使います。一つしか座標を必要としない要素は、これの代わりに x 属性を使います。
32	y
		« SVG属性リファレンスホームへ
33	互換性の情報源	SVG
		以下の情報源が SVG 要素と属性の互換性の確認に活用できます。
34	Content type
		角度は2つの方法のいずれかで指定します。スタイルシートのプロパティの値に使用する際、<角度>は次のように定義されています：
35	SVG 要素リファレンス	Drawing, Elements, Responsive Design, SVG, SVG Reference, SVG リファレンス, Vector Graphics, l10n:priority, ベクターグラフィック, レスポンシブデザイン, 描画, 要素
		SVG の描画と画像は、構築、描画、ベクター画像や図のレイアウトのための広範にわたる要素を使用して作成されます。ここではそれぞれの SVG 要素のリファレンス文書が見つかります。
36	<a>	Element, Reference, SVG, SVG Container, SVG コンテナー, 要素
		<a> は SVG の要素で、他のウェブページ、ファイル、同じページ内の場所、メールアドレス、その他の URL へのハイパーリンクを生成します。 HTML の a 要素ととても良く似ています。
37	<animate>	Element, SVG, SVG Animation, SVG アニメーション
		SVG の <animate> 要素は、時間の経過に応じて要素の属性を変化させる方法を提供します。
38	animateColor	Deprecated, Element, SVG, SVG Animation
		この要素はSVG1.1仕様（第2版）で廃止され、将来のSVGのバージョンで削除される可能性があります。 この要素は animate 要素に置き換えられ、FirefoxやInternet Explorerでは実装されておりません。SVGファイル製作者はこの要素の代わりにanimate要素を使うべきです。
39	animateMotion	Element, SVG, SVG Animation
		SVG の <animateMotion> 要素は、ある要素がモーションパスに沿って移動する方法を定義します。
40	animateTransform	Element, SVG, SVG Animation
		animateTransform 要素は、 ターゲット要素に対して変換属性をアニメーション化し、これにより変形、スケーリング、回転およびまたはゆがみのアニメーションを制御することができます。
41	circle
		<circle> SVG 要素は SVG の基本的な図形を表すものであり、中心座標と半径を指定して円を描画します。
42	defs	SVG, SVG Container
		SVGでは、後で再利用できるよう描画オブジェクトを定義します。参照される要素は、可能なかぎりdefs要素内で定義されることが推奨されています。defs要素内でこれらの要素を定義することは、SVGの要素の可読性を向上させ、ひいては操作性をも向上させます。defs要素の描画要素は、そのままでは描画されません。ビューポート上で描画したい場所へそれらの要素を描画するために、use要素を使用します。
43	desc	Element, SVG, SVG Descriptive
		SVG描画における各コンテナ要素またはグラフィック要素は、説明がテキストのみの <desc> 要素を用いる説明を供給することができます。
44	ellipse	Element, Reference, SVG, SVG Graphics
		ellipse 要素は SVG の基本的な図形であり、中心となる座標と x 方向と y 方向の半径両方を指定し、楕円を生成します。
45	<feColorMatrix>	Element, SVG, SVG Filter
		<feColorMatrix> は SVG のフィルター要素で、変換行列に基づいて色を変化させます。すべてのピクセルのカラー値 [R,G,B,A] は 5 x 5 の行列で行列乗算され、新しい色 [R',G',B',A'] を生成します。
46	<feDropShadow>	Element, Filters, Reference, SVG
		SVG の <feDropShadow> フィルタープリミティブは、入力画像のドロップシャドウを生成します。これは filter 要素の中でのみ使用できます。
47	<foreignObject>	Element, Reference, SVG
		<foreignObject> SVG 要素は、異なるユーザーエージェントによって描画されるグラフィックコンテンツを持つ外部XML名前空間を含めることを可能にします。含まれた外部グラフィックコンテンツは、SVG 変換や合成の対象となります。
48	g	Element, Reference, SVG, SVG Container
		<g> SVG 要素は、他のSVG要素をグループ化するために用いられるコンテナです。
49	<hatchpath>	Element, Experimental, Filters, Reference, SVG
		<hatchpath> は SVG の要素で、 hatch 要素で使用されるハッチパスを定義します。
50	<image>	Element, Reference, SVG, SVG Graphics
		The <image> は SVG の要素で、 SVG 文書内に画像を含めます。これはraster imageファイルや他の SVG ファイルを表示することができます。
51	line	Element, Reference, SVG, SVG Graphics, 要素
		<line> 要素は SVG の基本図形であり、2つの点をつなぐ直線を作成するために使用します。
52	linearGradient	Element, SVG, SVG Gradient
		linearGradient要素はグラフィック要素の塗りまたは線への線形グラデーションを定義します。
53	<mask>	Element, SVG, SVG Container
		The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the mask property.
54	metadata	Element, SVG, SVG Descriptive
		メタデータはデータに関する構造化データです。SVGコンテンツに含まれているメタデータは、 metadata 要素で指定する必要があります。  metadata 要素の内容はRDF,FOAFなどの他のXML名前空間からの要素でなければなりません。
55	<mpath>	SVGアニメーション, リファレンス, 要素
		animateMotion要素のmpath サブ要素は、外部の path要素をモーションパスの定義として参照する機能を提供します。
56	<path>	Element, Reference, SVG, SVG Graphics
		<path> SVG要素は図形を定義する汎用的な要素です。全ての基本図形は path 要素によって定義されます。
57	<pattern>
		<pattern>要素は同じ図形をx軸y軸方向にタイルを敷き詰めるように繰り返し描画させます．
58	polygon
		<polygon>要素は、直線のセグメントのつながりで構成された閉じた図形を定義します。最後の点は最初の点と結ばれます。開いた図形についてはpolyline要素をご覧ください。
59	polyline	Element, Reference, SVG, SVG Graphics
		polyline要素はSVGの基本図形であり、いくつかの座標で繋がった一連の直線を生成します。一般的にpolyline要素は開いた図形を生成する際に使用します。
60	radialGradient	Element, SVG, SVG Gradient
		radialGradient要素はグラフィックス要素の塗りまたは線への放射状グラデーションを定義します。
61	rect	Element, Reference, SVG, SVG Graphics
		rect 要素はSVGの基本図形であり、四角形を生成する際の基準となる座標と、そこからの幅と高さを指定します。また、角の丸まった四角形を作ります。
62	<script>	Element, Reference, SVG
		SVG script 要素は、HTML の script 要素と同じく、 スクリプト（例えば ECMAScript）を設置するための場所です。
63	set	Element, NeedsExample, SVG, SVG Animation
		set 要素は指定された時間の間の属性の値を設定します。この要素はすべての属性タイプをサポートしており、合理的に補間することができないものも含みます。例えば、文字列や論理型といった値です。set 要素は非加算的要素です。additive 属性とaccumulate 属性は許可されておらず、指定されても無視されます。
64	<solidcolor>	Element, Experimental, Reference, SVG
		<solidcolor> は SVG の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。
65	svg	Element, Reference, SVG, SVG Container, Web
		svg 要素は、新しい座標系とビューポートを定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。
66	<switch>	Element, NeedsExample, SVG, SVG Container, SVG コンテナー, 要素
		<switch> は SVG の要素で、その直接の子要素の requiredFeatures, requiredExtensions, systemLanguage 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。
67	<text>	Element, Reference, SVG, SVG Text Content
		SVG <text> 要素は、テキストからなるグラフィクス要素を定義します。<text> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。
68	title	Element, Reference, SVG, SVG Descriptive
		SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む <title> 要素を供給することができます。文書フラグメントがSVG視覚メディアとしてレンダリングされるとき、<title> 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして <title>要素を表示するかもしれません。 <title> 要素を表示するが path 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。<title> 要素は一般に SVG 文書のアクセシビリティを向上させます。
69	<tspan>	Element, Reference, SVG, SVG Text Content
		SVG の <tspan> 要素は、 text 要素内にあるサブテキストやその他の <tspan> 要素を定義します。これにより、必要に応じてサブテキストのスタイルや位置を調整することができます。
70	<use>	Element, Reference, SVG, SVG Graphics
		<use> 要素は SVG 文書の中からノード取り出して、別の場所に複製します。
71	名前空間の速修講座	SVG, XML
		XML の派生言語として、 SVG は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない Gecko ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。
72	例	SVG, XML
		この例で、私達は XHTML 、 SVG 、 JavaScript と DOM 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。
73	その他のリソース	Reference, SVG
		こちらは SVG の追加リソースの一覧です。
74	スクリプティング	SVG
		ドラッグ・アンド・ドロップのコードを書いていると、時々、ページのテキストをドラッグ中に誤って付随的に選択されてしまうことがあります。 もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻る、ブラウザの既定の振る舞いを上書きしたいと望むでしょう。ブラウザが前のページに戻るのを防ぎたいと望むでしょう。 このような場合、evt.preventDefault() メソッドを使うことが出来ます。
75	Mozilla SVG Status	SVG
		SVG 1.1 の要素とネイティブサポートの状況の概略です。章は現在の状態 (サポート済み、サポート中、現在未サポート) によってマークされています。未実装部分のほとんどは 3 つの大きなモジュール (フォントとフィルタ、アニメーション) に該当します。
76	SVG animation with SMIL
		Firefox 4 より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。SMIL では以下のようなことができます:
77	画像としての SVG	Images, NeedsContent, SVG
		SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。
78	SVG教本	MDC Project, NeedsContent, SVG, SVG:Tutorial
		変倍ベクタ図形 (Scalable Vector Graphics; SVG) は図形をタグ付けするW3CのXML派生言語です。SVGは，Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。
79	Basic Shapes
		ほとんどの SVG 描画では、数種類の基本的な図形が使われます。それら図形の用途は、その名前からかなり明確です。図形の位置やサイズを指定する属性をいくつか示しますが、要素リファレンスにはここで網羅しない他のプロパティも含めて正確で完全な説明があるでしょう。しかし、それらはほとんどの SVG ドキュメントで用いられますので、何らかの形で紹介することが必要でしょう。
80	Basic Transformations	SVG, SVG:Tutorial
		これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、g 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します:
81	クリッピングとマスキング	SVG, SVG:Tutorial
		苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。
82	Fills and Strokes	SVG, SVG:Tutorial
		全種類の図形を描く方法を知ることができましたので、次の目標はそれらに色をつけることでしょう。これを行う方法はいくつかあり、オブジェクトの属性で指定、インライン CSS の利用、埋め込んだ CSS セレクタの利用、外部 CSS ファイルの利用が含まれます。Web で見かけるほとんどの SVG はインライン CSS を用いていますが、どの方法にも利点と欠点があります。
83	Filter effects	SVG, SVG:Tutorial
		基本的な図形は、ある効果を得るために必要な柔軟性を持っていない場合があります。一般的な例として、影を落とす効果はグラデーションの組み合わせで無理なく作成することができません。フィルタは、複雑な効果を与えることを可能にする SVG の機能です。
84	始めましょう	Beginner, NeedsBeginnerUpdate, SVG, SVG:Tutorial, 初心者
		簡単な例で正しく始めましょう。下のコードを見てください。
85	SVGにおける階調度	SVG, SVG:Tutorial
		恐らく，単なる塗り潰しや枠線より刺激的であるのは，塗り潰しや枠線と同様に階調度 (gradients)もまた作成・適用できるという事実でしょう。
86	Introduction	SVG, SVG:Tutorial
		SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML (en-US) 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。
87	Other content in SVG	SVG, SVG:Tutorial
		長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。
88	Paths	Intermediate, SVG, SVG チュートリアル, SVG:Tutorial, 中級者向け
		path 要素は、 SVG の基本図形ライブラリの中でもっとも強力な要素です。これは、直線、曲線、弧などを作成するために用いることができます。
89	Patterns	SVG, SVG:Tutorial
		私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<pattern> 要素は SVG ファイルの <defs> セクションに置かなければなりません。
90	Positions	SVG, SVG:Tutorial
		The grid
91	SVG Fonts	SVG, SVG:Tutorial
		SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。
92	SVG の image 要素	Beginner, NeedsBeginnerUpdate, NeedsContent, NeedsUpdate, SVG, Tutorial, チュートリアル, 初心者
		SVG の image 要素は、ラスター画像を SVG オブジェクト内に描画することを可能にします。
93	SVG In HTML Introduction	Intermediate, NeedsUpdate, SVG, 中級者
		この記事と関連する例では、インラインの SVG をフォームの背景画像として使用する方法を示します。どのように JavaScript と CSS を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。
94	Texts	SVG, SVG:Tutorial
		SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。
95	SVG のツール
		SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。