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 |
恐らく,単なる塗り潰しや枠線より刺激的であるのは,塗り潰しや枠線と同様に階調度もまた作成・適用できるという事実でしょう。 | ||
86 | Introduction | SVG, SVG:Tutorial |
![]() |
||
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 ファイルで作業を行うためのツールをいくつか見ていきましょう。 | ||