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

94 ページあります:

# ページ タグと要約
1 SVG: Scalable Vector Graphics 2D Graphics, Graphics, Icons, Images, Reference, Responsive Design, SVG, Scalable Graphics, Scalable Images, Vector Graphics, Web, l10n:priority
Scalable Vector Graphics (SVG) は、二次元ベースのベクター形式のための XML に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば 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 NeedsTechnicalReview, SVG, Types, data types
SVG は多くのデータ型を使用しています。この記事では、これらのデータ型とその構文、使用目的の説明を掲載しています。
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> Element, Reference, SVG, SVG Graphics
<polygon> 要素は、接続された一連の直線の区間で構成される閉じた図形を定義します。最後の点は最初の点と結ばれます。
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 svg Element, Reference, SVG, SVG Container, Web
svg 要素は、新しい座標系とビューポートを定義するコンテナです。これは SVG ドキュメントの最も外側の要素として使用されますが、SVG または HTML ドキュメントの中に SVG フラグメントを埋め込むためにも使用できます。
65 <switch> Element, NeedsExample, SVG, SVG Container, SVG コンテナー, 要素
<switch>SVG の要素で、その直接の子要素の requiredFeatures, requiredExtensions, systemLanguage 属性を順に評価し、これらの属性が true と評価された最初の子要素を描画します。
66 <text> Element, Reference, SVG, SVG Text Content
SVG <text> 要素は、テキストからなるグラフィクス要素を定義します。<text> には、他の SVG グラフィクス要素と同じように、グラデーション、パターン、クリッピングパス、マスク、またはフィルターを適用することができます。
67 title Element, Reference, SVG, SVG Descriptive
SVG における各コンテナ要素またはグラフィックス要素の描画は、説明がテキストのみの文字列を含む <title> 要素を供給することができます。文書フラグメントがSVG視覚メディアとしてレンダリングされるとき、<title> 要素は、グラフィックスの一部としてはレンダリングされません。しかし、一部のユーザーエージェントは、例えば、ツールチップとして <title>要素を表示するかもしれません。 <title> 要素を表示するが path 要素または他のグラフィックス要素を表示しない、視覚と聴覚の両方の代替プレゼンテーションが可能です。<title> 要素は一般に SVG 文書のアクセシビリティを向上させます。
68 <tspan> Element, Reference, SVG, SVG Text Content
SVG の <tspan> 要素は、 text 要素内にあるサブテキストやその他の <tspan> 要素を定義します。これにより、必要に応じてサブテキストのスタイルや位置を調整することができます。
69 <use> Element, Reference, SVG, SVG Graphics
<use> 要素は SVG 文書の中からノード取り出して、別の場所に複製します。
70 名前空間の速修講座 SVG, XML
XML の派生言語として、 SVG は名前空間付けられています。もしあなたが SVG コンテンツを作成する予定なら名前空間の概念と使い方を理解することは重要です。 Firefox 1.5 リリースより前の幾つかのバージョンの SVG ビューワは残念ながら名前空間に対して十分な注意を払いませんが、 とても厳格でなくてならない Gecko ベースのブラウザのようなユーザエージェントが複数の XML 派生言語をサポートするために不可欠です。今、名前空間を理解するためにいくらかの時間をとり、将来頭を悩ませる時間を節約しましょう。
71 SVG, XML
この例で、私達は XHTMLSVGJavaScriptDOM 2 を「ほこり」の群れを動かすのにつかっています。これらのほこりは 2 つの簡単な法則によって制御されています。1 つめは、それぞれのほこりがマウスカーソルの方向に向かって移動しようとします。2 つ目はそれぞれのほこりはほこりの位置の平均から遠ざかろうとします。組み合わせることで、このとても自然に見える動きができます。
72 その他のリソース Reference, SVG
こちらは SVG の追加リソースの一覧です。
73 スクリプティング SVG
ドラッグ・アンド・ドロップのコードを書いていると、時々、ページのテキストをドラッグ中に誤って付随的に選択されてしまうことがあります。 もしくは自分のコードの中でバックスペースキーを使いたい場合、バックスペースキーを押下したときに前のページへ戻る、ブラウザの既定の振る舞いを上書きしたいと望むでしょう。ブラウザが前のページに戻るのを防ぎたいと望むでしょう。 このような場合、evt.preventDefault() メソッドを使うことが出来ます。
74 Firefox の SVG 1.1 対応状況 Firefox, SVG
SVG の構文と使い方の基本的な例は、 W3C SVG test suite にあります。
75 SVG animation with SMIL
Firefox 4 より、Synchronized Multimedia Integration Language (SMIL) を用いた SVG のアニメーションをサポートしています。SMIL では以下のようなことができます:
76 画像としての SVG Images, NeedsContent, SVG
SVG 画像は、様々な場面で画像形式の一つとして使用することができます。多くのブラウザーは SVG 画像を以下の場所で対応しています。
77 SVG教本 MDC Project, NeedsContent, SVG, SVG:Tutorial
変倍ベクタ図形 (Scalable Vector Graphics; SVG) は図形をタグ付けするW3CのXML派生言語です。SVGは,Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。
78 Basic Shapes
ほとんどの SVG 描画では、数種類の基本的な図形が使われます。それら図形の用途は、その名前からかなり明確です。図形の位置やサイズを指定する属性をいくつか示しますが、要素リファレンスにはここで網羅しない他のプロパティも含めて正確で完全な説明があるでしょう。しかし、それらはほとんどの SVG ドキュメントで用いられますので、何らかの形で紹介することが必要でしょう。
79 Basic Transformations SVG, SVG:Tutorial
これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、g 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します:
80 クリッピングとマスキング SVG, SVG:Tutorial
苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。
81 塗りつぶしとストローク Beginner, NeedLiveSamples, SVG, SVG:Tutorial
図形に色を付ける方法としては (オブジェクトに属性を指定することを含む)、インライン CSS、埋め込み CSS セクション、外部 CSS ファイルなどいくつかの方法があります。ほとんどに SVG ではインライン CSS を使用していますが、どの方法にも利点と欠点があります。
82 Filter effects SVG, SVG:Tutorial
基本的な図形は、ある効果を得るために必要な柔軟性を持っていない場合があります。一般的な例として、影を落とす効果はグラデーションの組み合わせで無理なく作成することができません。フィルタは、複雑な効果を与えることを可能にする SVG の機能です。
83 始めましょう Beginner, NeedsBeginnerUpdate, SVG, SVG:Tutorial, 初心者
簡単な例で正しく始めましょう。下のコードを見てください。
84 SVG におけるグラデーション Intermediate, SVG, SVG:Tutorial
単なる塗り潰しや線だけではなく、グラデーション (gradients) も塗り潰しや線として作成・適用できるのが魅力です。
85 Introduction SVG, SVG:Tutorial
SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML (en-US) 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。
86 Other content in SVG Intermediate, SVG, SVG:Tutorial
長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。
87 Paths Intermediate, SVG, SVG チュートリアル, SVG:Tutorial, 中級者向け
path 要素は、 SVG の基本図形ライブラリの中でもっとも強力な要素です。これは、直線、曲線、弧などを作成するために用いることができます。
88 Patterns SVG, SVG:Tutorial
私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<pattern> 要素は SVG ファイルの <defs> セクションに置かなければなりません。
89 配置 Beginner, Coordinate systems, Coordinates, Drawing, Graphics, NeedsBeginnerUpdate, SVG, SVG:Tutorial
この記事では、 Scalable Vector Graphics (SVG) がどのようにオブジェクトの位置や大きさを表現しているのか、座標系や、スケーラブルなコンテキストにおける「ピクセル」の測定値の意味などを紹介します。
90 SVG フォント Advanced, NeedsUpdate, SVG, SVG:Tutorial
SVG が規定された時点では、ブラウザーでウェブフォントの対応は普及していませんでした。しかし、テキストを正しく描画するためには、正しいフォントファイルへのアクセスが不可欠であるため、この機能を提供するためにフォント記述技術が SVG に追加されました。これは PostScript や OTF などの他のフォーマットとの互換性を目的としたものではなく、レンダリング時にグリフ情報を SVG に埋め込む簡単な手段です。
91 SVG の image 要素 Beginner, NeedsBeginnerUpdate, NeedsContent, NeedsUpdate, SVG, Tutorial, チュートリアル, 初心者
SVG の image 要素は、ラスター画像を SVG オブジェクト内に描画することを可能にします。
92 SVG In HTML Introduction Intermediate, NeedsUpdate, SVG, 中級者
この記事と関連する例では、インラインの SVG をフォームの背景画像として使用する方法を示します。どのように JavaScriptCSS を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。
93 Texts SVG, SVG:Tutorial
SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。
94 SVG のツール Intermediate, NeedsUpdate, SVG, Tools
SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。