From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/svg/tutorial/basic_shapes/index.html | 76 ++++++ .../svg/tutorial/basic_transformations/index.html | 96 ++++++++ .../svg/tutorial/clipping_and_masking/index.html | 58 +++++ .../web/svg/tutorial/fills_and_strokes/index.html | 103 ++++++++ .../ja/web/svg/tutorial/filter_effects/index.html | 16 ++ .../ja/web/svg/tutorial/getting_started/index.html | 95 ++++++++ files/ja/web/svg/tutorial/gradients/index.html | 168 +++++++++++++ files/ja/web/svg/tutorial/index.html | 55 +++++ files/ja/web/svg/tutorial/introduction/index.html | 31 +++ .../svg/tutorial/other_content_in_svg/index.html | 30 +++ files/ja/web/svg/tutorial/paths/index.html | 266 +++++++++++++++++++++ files/ja/web/svg/tutorial/patterns/index.html | 74 ++++++ files/ja/web/svg/tutorial/positions/index.html | 33 +++ files/ja/web/svg/tutorial/svg_fonts/index.html | 78 ++++++ files/ja/web/svg/tutorial/svg_image_tag/index.html | 41 ++++ .../tutorial/svg_in_html_introduction/index.html | 100 ++++++++ files/ja/web/svg/tutorial/texts/index.html | 77 ++++++ files/ja/web/svg/tutorial/tools_for_svg/index.html | 38 +++ 18 files changed, 1435 insertions(+) create mode 100644 files/ja/web/svg/tutorial/basic_shapes/index.html create mode 100644 files/ja/web/svg/tutorial/basic_transformations/index.html create mode 100644 files/ja/web/svg/tutorial/clipping_and_masking/index.html create mode 100644 files/ja/web/svg/tutorial/fills_and_strokes/index.html create mode 100644 files/ja/web/svg/tutorial/filter_effects/index.html create mode 100644 files/ja/web/svg/tutorial/getting_started/index.html create mode 100644 files/ja/web/svg/tutorial/gradients/index.html create mode 100644 files/ja/web/svg/tutorial/index.html create mode 100644 files/ja/web/svg/tutorial/introduction/index.html create mode 100644 files/ja/web/svg/tutorial/other_content_in_svg/index.html create mode 100644 files/ja/web/svg/tutorial/paths/index.html create mode 100644 files/ja/web/svg/tutorial/patterns/index.html create mode 100644 files/ja/web/svg/tutorial/positions/index.html create mode 100644 files/ja/web/svg/tutorial/svg_fonts/index.html create mode 100644 files/ja/web/svg/tutorial/svg_image_tag/index.html create mode 100644 files/ja/web/svg/tutorial/svg_in_html_introduction/index.html create mode 100644 files/ja/web/svg/tutorial/texts/index.html create mode 100644 files/ja/web/svg/tutorial/tools_for_svg/index.html (limited to 'files/ja/web/svg/tutorial') diff --git a/files/ja/web/svg/tutorial/basic_shapes/index.html b/files/ja/web/svg/tutorial/basic_shapes/index.html new file mode 100644 index 0000000000..2b87124f8a --- /dev/null +++ b/files/ja/web/svg/tutorial/basic_shapes/index.html @@ -0,0 +1,76 @@ +--- +title: Basic Shapes +slug: Web/SVG/Tutorial/Basic_Shapes +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +

{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}

+

ほとんどの SVG 描画では、数種類の基本的な図形が使われます。それら図形の用途は、その名前からかなり明確です。図形の位置やサイズを指定する属性をいくつか示しますが、要素リファレンスにはここで網羅しない他のプロパティも含めて正確で完全な説明があるでしょう。しかし、それらはほとんどの SVG ドキュメントで用いられますので、何らかの形で紹介することが必要でしょう。

+

基本的な図形

+

図形を挿入するには、ドキュメント内に要素を作成します。さまざまな要素が各々さまざまな図形に対応づけられ、また各属性が図形のサイズや位置を定義します。一部の要素は他の図形で作成できるという点でやや冗長ですが、それらすべては利便性およびドキュメントをできるだけ小さくかつ読みやすくするために存在します。すべての基本的な図形を右図に示しています。これらを生成するコードは以下のとおりです:

+

+
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+  <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+  <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
+
+  <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
+  <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>
+
+  <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5"/>
+  <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
+      stroke="orange" fill="transparent" stroke-width="5"/>
+
+  <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
+      stroke="green" fill="transparent" stroke-width="5"/>
+
+  <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
+</svg>
+
+
注意: stroke、stroke-width および fill の各属性は後のチュートリアルで説明します。
+

長方形

+

rect 要素は、おそらくあなたの予想とまったく同じで、スクリーンに長方形を描画します。この要素にはスクリーン上の位置や形状を操作する、6 種類の基本的な属性があります。前出の画像には 2 つの rect 要素があり、それは少し冗長になっています。右側の長方形は rx および ry 属性があり、これは角を丸くします。これらを設定しない場合、初期値は 0 になります。

+
 <rect x="10" y="10" width="30" height="30"/>
+ <rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>
+
+
x
長方形の左上の角の位置を示す、X 座標です。
y
長方形の左上の角の位置を示す、Y 座標です。
width
長方形の幅です。
height
長方形の高さです。
rx
長方形の角の、X 軸方向の半径です。
ry
長方形の角の、Y 軸方向の半径です。
+
+

円

+

おそらくあなたの推測どおりで、circle 要素はスクリーンに円を描画します。ここで適用できる属性は 3 種類です。

+
 <circle cx="25" cy="75" r="20"/>
+
+
r
円の半径です。
cx
円の中心の位置を示す、X 座標です。
cy
円の中心の位置を示す、Y 座標です。
+
+

楕円

+

ellipse は、実は circle 要素のより一般的な形であり、円の X 方向および Y 方向の半径 (数学者は一般的に長半径および短半径と呼びます) を分けて調節することができます。

+
 <ellipse cx="75" cy="75" rx="20" ry="5"/>
+
+
rx
楕円の X 軸方向の半径です。
ry
楕円の Y 軸方向の半径です。
cx
楕円の中心の位置を示す、X 座標です。
cy
楕円の中心の座標を示す、Y 座標です。
+
+

直線

+

line は直線を描画します。これは線の始点と終点になる 2 つの点を示す属性を持ちます。

+
 <line x1="10" x2="50" y1="110" y2="150"/>
+
+
x1
点 1 の X 座標です。
y1
点 1 の Y 座標です。
x2
点 2 の X 座標です。
y2
点 2 の Y 座標です。
+
+

ポリライン

+

polyline は、連結された直線のグループです。リストがとても長くなるため、すべての点は 1 つの属性に収められます:

+
 <polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>
+
+
points
点のリストで、各々の数値は空白、カンマ、EOL、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。
+
+

多角形

+

polygon は、点のリストを結ぶ直線の断片を連結して構成される点がポリラインとよく似ています。しかし polygon では、終端で線のパスが自動的に最初の点に戻ることで、閉じた図形を作成します。長方形は多角形の一種であるので、より柔軟性が必要である場合は <rect/> 要素を作成するために polygon を用いることができることに留意してください。

+
 <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/>
+
+
points
点のリストで、各々の数値は空白、カンマ、EOL、またはラインフィード文字で区切ります。各々の点は X 座標と Y 座標の 2 つの値を持たなければなりません。従って (0,0), (1,1) (2,2) のリストはこのように記述します: "0 0, 1 1, 2 2"。パスを閉じるように描画するため、最後の直線は (2,2) から (0,0) に描画されます。
+
+

パス

+

path は SVG で使用できる図形の中でもっとも一般的なものでしょう。path 要素を用いて長方形 (角を丸めることもできます)、円、楕円、ポリライン、多角形を描画することができます。基本的には他の図形、ベジェ曲線、二次曲線などのいずれかになります。以上の理由からパスについてはこのチュートリアルの次のセクションに独立していますが、 ここではその図形をコントロールするただ一つの属性があることを示します。

+
 <path d="M 20 230 Q 40 205, 50 230 T 90230"/>
+
+
d
点のリストと、パスの描画方法に関する情報です。詳しくは Paths をご覧ください。
+
+

{{ PreviousNext("SVG/Tutorial/Positions", "SVG/Tutorial/Paths") }}

+

Interwiki Languages Links

+

{{ languages( { "en": "en/SVG/Tutorial/Basic_Shapes", "fr": "fr/SVG/Tutoriel/Formes_de_Bases"} ) }}

diff --git a/files/ja/web/svg/tutorial/basic_transformations/index.html b/files/ja/web/svg/tutorial/basic_transformations/index.html new file mode 100644 index 0000000000..08e3709003 --- /dev/null +++ b/files/ja/web/svg/tutorial/basic_transformations/index.html @@ -0,0 +1,96 @@ +--- +title: Basic Transformations +slug: Web/SVG/Tutorial/Basic_Transformations +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Basic_Transformations +--- +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
+ + +

これまで作成してきた美しい画像を変形させる準備ができました。しかし始めに、{{SVGElement("g")}} 要素を正式に紹介しましょう。このヘルパーを用いると、要素のセット全体にプロパティを割り当てることができます。実際のところ、これが唯一の用途です。例を示します:

+
<g fill="red">
+  <rect x="0" y="0" width="10" height="10" />
+  <rect x="20" y="0" width="10" height="10" />
+</g>
+
+

この結果 2 つの赤い長方形ができます。

+

以下に示すトランスフォームは、要素の transform 属性の要約です。トランスフォームはホワイトスペース文字区切りで連結することで、連鎖させることができます。

+ + + + + + +

移動

+

適切な属性を用いて要素を配置できる場合でも、要素をあちこちに移動させる必要があるかもしれません。この用途のために、translate() トランスフォームを用意しています。

+
<rect x="0" y="0" width="10" height="10" transform="translate(30,40)" />
+
+

この例では長方形を描画し、描画位置を (0, 0) ではなく (30, 40) に移します。

+

2 番目の値が与えられない場合は、0 であるとみなします。

+ + + + + + +

回転

+

要素を回転させることは、よく行われる処理です。これには rotate() トランスフォームを用います:

+
<rect x="20" y="20" width="20" height="20" transform="rotate(45)" />
+
+

この例では、45 度回転した正方形を表示します。rotate() の値は "度" 単位で与えます。

+ + + + + + +

傾斜

+

長方形からひし形を作成するために、skewX() および skewY() トランスフォームを利用できます。どちらのトランスフォームも、要素をどれだけ傾けるかを表す角度を与えます。

+ + + + + + +

拡大と縮小

+

scale() は、要素のサイズを変更します。これは 2 つの数値を受け取って、拡大または縮小の比率として用います。0.5 は 50% への縮小を表します。2 番目の数値を省略した場合は、1 番目の値と同じであるとみなします。

+ + + + + + + +

matrix() を用いた複雑なトランスフォーム

+

前出のトランスフォームはすべて、3x3 のトランスフォーム行列で表現できます。複数のトランスフォームをまとめるために、matrix(A1, A2, B1, B2, C1, C2) トランスフォームを用いて結果の行列を直接設定することができます。このプロパティに関する詳細情報は、SVG 勧告で得ることができます。

+ + + + + +

座標系に与える効果

+

トランスフォームを用いるときは、トランスフォームを適用した要素内で新たな座標系が確立します。つまり、その要素や子要素に指定する単位が 1:1 のピクセル対応づけに従わない可能性があり、またそれはトランスフォームに伴う変形、移動、拡大縮小にも波及します。

+
<g transform="scale(2)">
+  <rect width="50" height="50" />
+</g>
+
+

上記の例で、長方形のサイズは 100x100 ピクセルになります。userSpaceOnUse のような属性に依存している場合などに、より興味深い効果が発生します。

+ + + + + +

SVG 内への SVG 埋め込み

+

HTML とは対照的に、SVG では他の svg 要素をシームレスに埋め込むことができます。この方法を用い、内部の svg 要素で viewBox、width、height 属性を活用して新たな座標系を作成することもできます。

+
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <svg width="100" height="100" viewBox="0 0 50 50">
+    <rect width="50" height="50" />
+  </svg>
+</svg>
+
+

上記の例は、基本的にはもうひとつ上の例と同じ効果をもたらすもので、すなわち長方形のサイズは rect 要素で指定したサイズの 2 倍になります。

+ + +
{{PreviousNext("Web/SVG/Tutorial/Texts", "Web/SVG/Tutorial/Clipping_and_masking")}}
diff --git a/files/ja/web/svg/tutorial/clipping_and_masking/index.html b/files/ja/web/svg/tutorial/clipping_and_masking/index.html new file mode 100644 index 0000000000..ec5e0a778a --- /dev/null +++ b/files/ja/web/svg/tutorial/clipping_and_masking/index.html @@ -0,0 +1,58 @@ +--- +title: クリッピングとマスキング +slug: Web/SVG/Tutorial/Clipping_and_masking +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Clipping_and_masking +--- +
+ {{PreviousNext("SVG/Tutorial/Basic_Transformations", "SVG/Tutorial/Other_content_in_SVG")}}
+

苦労して作成したオブジェクトの一部を消去することは、一見矛盾しているように見えます。ところが SVG で半円を作成しようとすると、以下のプロパティを使うことにすぐ気がつくでしょう。

+

クリッピングはある要素のうち、他の場所で定義された一部分を取り除くことを指します。この場合は半透明効果をかけることはできず、完全に表示するか全く表示しないかの扱いになります。

+

マスキングは半透明効果やマスクの濃淡値を考慮することで、ソフトエッジ効果をかけることができます。

+

クリップの作成

+

circle 要素をもとにして、先に述べた半円を作成しましょう:

+
<clipPath id="cut-off-bottom">
+  <rect x="0" y="0" width="200" height="100" />
+</clipPath>
+
+<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />
+
+

(100,100) を中心にした半径 100 の円を描画します。clip-path 属性は、rect 要素を 1 つ含む {{SVGElement("clipPath")}} 要素を参照しています。この長方形は、キャンバスの上半分に黒色で描画されるものです。なお補足として、clipPath 要素はたいてい defs セクションに置かれます。

+

ところが、rect 要素は描画されません。描画されない代わりにそのピクセルデータは、円の中で最終的にレンダリングするピクセルを決定することに用いられます。長方形は円の上半分だけを覆っているため、円の下半分は消滅します。

+

clipdemo.png

+

これで、path 要素の円弧を扱う必要なしに半円を作りました。クリッピング用に clipPath の内部にあるすべてのパスが、そのストロークやトランスフォームと併せて調査および評価されます。そして適用先のオブジェクトのうち、clipPath の内容物で決められた透過領域にかかる部分は描画されません。色や不透明度などは、図形の一部を完全に消滅させない限り効果がありません。

+

マスキング

+

マスキングの効果は、グラデーションと共に適用するともっとも印象的です。要素をフェードアウトしたい場合は、マスクを用いることですぐにその効果を得ることができます。

+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient id="Gradient">
+      <stop offset="0" stop-color="white" stop-opacity="0" />
+      <stop offset="1" stop-color="white" stop-opacity="1" />
+    </linearGradient>
+    <mask id="Mask">
+      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
+    </mask>
+  </defs>
+
+  <rect x="0" y="0" width="200" height="200" fill="green" />
+  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
+</svg>
+
+

下層のレイヤーに緑色で塗りつぶした rect 、上層に赤色で塗りつぶした rect があります。また後者には、mask 要素を指し示す mask 属性があります。mask 要素の内容物は rect 要素が 1 つあり、これは透明から白色へのグラデーションで塗りつぶしています。この結果、赤色の長方形のピクセルは mask の内容物のアルファ値 (透明度) を継承して、最終的に緑色から赤色へのグラデーションができます:

+

maskdemo.png

+

opacity による透明度

+

要素全体の透明度を設定することができます。それには opacity 属性を用います:

+
<rect x="0" y="0" width="100" height="100" opacity=".5" />
+
+

上記の長方形は、半透明で描画します。fill および stroke について分けられた 2 つの属性 fill-opacity と stroke-opacity があり、それぞれのプロパティの不透明度を分けて制御します。なお、ストロークは塗りつぶしの上層に描画することに注意してください。このために塗りつぶしもある要素でストロークの不透明度を設定した場合は、ストロークの半分で塗りつぶしが透けて見え、また同時に残り半分で背景が透けて見えます:

+
<rect x="0" y="0" width="200" height="200" fill="blue" />
+<circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
+
+

opacitydemo.png

+

この例では、青い背景の上に赤い円があります。黄色のストロークに 50% の不透明度を設定しており、事実上 2 色のストロークになります。

+

周知の CSS 技術の利用

+

Web 開発者が持つツールの中でもっとも強力なもののひとつが、display: none です。それゆえ、CSS2 で定義された visibility や clip と併せて、この CSS プロパティも SVG に取り込むことが決定した点に若干の驚きがあります。過去に設定した display: none を元に戻すためには、すべての SVG 要素の初期値が inline であると知っておくことが重要です。

+
+ {{PreviousNext("SVG/Tutorial/Basic_Transformations", "SVG/Tutorial/Other_content_in_SVG")}}
diff --git a/files/ja/web/svg/tutorial/fills_and_strokes/index.html b/files/ja/web/svg/tutorial/fills_and_strokes/index.html new file mode 100644 index 0000000000..f5fe560017 --- /dev/null +++ b/files/ja/web/svg/tutorial/fills_and_strokes/index.html @@ -0,0 +1,103 @@ +--- +title: Fills and Strokes +slug: Web/SVG/Tutorial/Fills_and_Strokes +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Fills_and_Strokes +--- +

{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}

+

全種類の図形を描く方法を知ることができましたので、次の目標はそれらに色をつけることでしょう。これを行う方法はいくつかあり、オブジェクトの属性で指定、インライン CSS の利用、埋め込んだ CSS セレクタの利用、外部 CSS ファイルの利用が含まれます。Web で見かけるほとんどの SVG はインライン CSS を用いていますが、どの方法にも利点と欠点があります。

+

{{ 英語版章題("Fill and Stroke Attributes") }}

+

fill および stroke 属性

+

{{ 英語版章題("Painting") }}

+

塗りつぶし

+

これまで見てきた例で塗りつぶしの属性を入れずにおくことが少し難しかった一方で、あなたは気づいていなかったかもしれませんが、もっとも基本的な色づけはノードに 2 つの属性を設定することで行えます: fill と stroke。fill はオブジェクト内部の色を、stroke はオブジェクトの縁の線の色を指定します。色名 (例えば red)、RGB 値 (例えば rgb(255,0,0))、16進数値、RGBA 値など、HTML で用いる CSS の色名と同じ仕組みを用いることができます。

+
 <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple"
+       fill-opacity="0.5" stroke-opacity="0.8"/>
+
+

加えて、SVG では fill と stroke それぞれの不透明度を分けて指定することができます。これは fill-opacity 属性と stroke-opacity 属性で操作します。FF3 では RGBA 値を受け入れて同様の透過効果をもたらしますが、他のブラウザとの互換性のために fill および stroke の不透明度は分けて指定することが最善であることに注意してください。RGBA 値と fill/stroke-opacity 値をどちらも指定した場合は、両方とも適用されます。

+

{{ 英語版章題("Stroke") }}

+

ストローク

+

この色のプロパティに加えて、線上にストロークを描画する方法を操作するための属性がいくつかあります。

+

+
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/>
+  <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/>
+  <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
+</svg>
+
+

これらについて説明する前に、ストロークはパスの周りに中央揃えで置かれるよう描画されますので、上の例ではパスを桃色、ストロークを黒色で示していることを注記したいと思います。stroke-width プロパティはストロークの幅を指定します。例でわかるように、ストロークはパスの両側へ均等に置かれます。

+

第 2 のプロパティは前出の例にもある stroke-linecap プロパティです。これは線の終端に見られる形状を指定します。このプロパティには指定できる値が 3 種類あります。butt はストロークの向きに対して垂直 (90 度) のまっすぐな縁で線を閉じ、縁はパスの終端を横切ります。square は本質的には butt と同じ外見ですが、ストロークが実際のパスから少しはみ出すように広がることが違いです。パスからはみ出すストロークの長さは stroke-width プロパティで制御できます。round はストロークの終端が湾曲する効果を生み出し、その曲線の半径もまた stroke-width プロパティで制御されます。

+

また stroke-linejoin プロパティは、2 つの線分が接続するときにストロークをどのように描画するかを制御します。

+

+
<?xml version="1.0" standalone="no"?>
+<svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
+      stroke-linecap="butt" fill="transparent" stroke-linejoin="miter"/>
+
+  <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
+      stroke-linecap="round" fill="transparent" stroke-linejoin="round"/>
+
+  <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
+      stroke-linecap="square" fill="transparent" stroke-linejoin="bevel"/>
+</svg>
+
+

各々のポリラインは 2 つの線分で構成されています。これら 2 つが合わさる場所の接続法は、stroke-linejoin 属性で制御されます。この属性には指定できる値が 3 種類あります。miter は、一つの角だけが使用される四角形を作成するように、ストロークの線を元の幅のままで少し延長します。round は miter の動作に加えて、湾曲した線分を描画します。bevel は、2 つの線分の間を渡るように新しい角を生成します。

+

最後に、stroke-dasharray 属性を指定することで波線状のストロークを描画することもできます。

+

+
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black"
+    stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/>
+  <path d="M 10 75 L 190 75" stroke="red"
+    stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/>
+</svg>
+
+

stroke-dasharray 属性はパラメータとして、一連のカンマ区切りの数値をとります。パスとは異なり、これらの数値はカンマで区切らなければならないことに注意してください。必要に応じてホワイトスペースを挿入することもできますが、数値同士の間にはカンマを入れなければなりません。それぞれの数値はストロークで塗りつぶす領域の長さ、および塗りつぶさないエリアの長さを指定します。従って前出の例で、2 番目のパスは 5 ピクセル塗りつぶし、次の 5 ピクセルは塗りつぶさない、そしてまた 5 ピクセル塗りつぶすというかたちになります。より複雑な波線のパターンにしたい場合は、より多くの数値を指定することができます。1 番目の例には 3 つの数値があり、この場合レンダラは規則的なパターンを作るために指定した数値を 2 回繰り返します。従って 1 番目のパスは 5 ピクセル塗りつぶし、10 ピクセル空白、5 ピクセル塗りつぶし、そして 5 ピクセル空白、10 ピクセル塗りつぶし、5ピクセル空白を作成するため始めに戻ります。以上のパターンが繰り返されます。

+

stroke および fille プロパティの付加的なプロパティはさらにいくつかあり、自身が重なり合っている図形でどのように色をつけるかを指定する fill-rule、 ストロークが miter を描画するとき、どこで描画を止めるかを扱う stroke-miterlimit、そして線上で波線の列をどこから始めるかを指定する stroke-dashoffset などです。

+

{{ 英語版章題("Using CSS") }}

+

CSS の利用

+

オブジェクトに属性を設定するのに加えて、CSS を用いて fill や stroke のスタイルをつけることもできます。この構文は background-color や border の代わりに fill や stroke に値を設定する点を除いて、通常の HTML で用いられる CSS と同じです。すべての属性を CSS で指定できるわけではないことは伝えておくべきでしょう。描画や塗りつぶしを扱う属性は利用可能ですので fill、stroke、stroke-dasharray などはこの方法で設定可能です。また、後ほど示すグラデーションやパターン向けの属性も同様です。width、height、あるいはパスのコマンド d は CSS を通して設定できません。何が可能あるいは不可能かをテストして調べるのは、とても簡単です。FF3 の DOM Inspector では、XUL や HTML に加え、SVG の CSS 属性の一覧も表示するようになりました。

+
SVG 仕様 は{{ 原語併記("プロパティ", "Property") }}である属性とその他の属性を厳密に定めています。前者は CSS で変更できますが、後者はできません。
+

style 属性を用いて、要素にインラインで CSS を挿入できます:

+
 <rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/>
+
+

もしくは、あなたが入れる特別な style セクションに移すこともできます。そのセクションは HTML で行うように <head> 内へ入れるのではなく、<defs> と呼ばれるエリアに入れます。<defs> は定義を意味し、SVG 仕様に直接は見受けられないものの、他の要素から用いられる要素を作成する場所です。

+
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <style type="text/css"><![CDATA[
+       #MyRect {
+         stroke: black;
+         fill: red;
+       }
+    ]]></style>
+  </defs>
+  <rect x="10" height="180" y="10" width="180" id="MyRect"/>
+</svg>
+
+

スタイルをこのようなエリアに移すと、大きな要素グループでのプロパティの調整が容易になります。ロールオーバー効果を作るための hover 擬似クラス といったものを用いることもできます:

+
 #MyRect:hover {
+   stroke: black;
+   fill: blue;
+ }
+
+

ここで一覧を述べることもできますが、学習するには CSS チュートリアルを読む方が良いでしょう。before および after 擬似クラスなど、通常の HTML と異なり動作しないものもありますので、すべてを区分するには少し実験することが必要です。

+

XML スタイルシート構文を通して、CSS ルールを収めた外部スタイルシートを指定することもできます:

+
<?xml version="1.0" standalone="no"?>
+<?xml-stylesheet type="text/css" href="style.css"?>
+
+<svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <rect height="10" width="10" id="MyRect"/>
+</svg>
+
+

style.css は以下のようにします:

+
#MyRect {
+  fill: red;
+  stroke: black;
+}
+
+

{{ PreviousNext("SVG/Tutorial/Paths", "SVG/Tutorial/Gradients") }}

+

{{ languages( { "en": "en/SVG/Tutorial/Fills_and_Strokes"} ) }}

diff --git a/files/ja/web/svg/tutorial/filter_effects/index.html b/files/ja/web/svg/tutorial/filter_effects/index.html new file mode 100644 index 0000000000..39d1cadb74 --- /dev/null +++ b/files/ja/web/svg/tutorial/filter_effects/index.html @@ -0,0 +1,16 @@ +--- +title: Filter effects +slug: Web/SVG/Tutorial/Filter_effects +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Filter_effects +--- +

{{ PreviousNext("SVG/Tutorial/Other_content_in_SVG", "SVG/Tutorial/SVG_Fonts") }}

+

基本的な図形は、ある効果を得るために必要な柔軟性を持っていない場合があります。一般的な例として、影を落とす効果はグラデーションの組み合わせで無理なく作成することができません。フィルタは、複雑な効果を与えることを可能にする SVG の機能です。

+

基礎的な例として、SVG コンテンツにぼかし (ブラー) 効果を与えます。初歩的なぼかしはグラデーションを活用して実現できますが、より高度なことをするにはぼかしフィルタが必要です。

+

How filters work

+

The light source

+

The single filters explained

+

{{ PreviousNext("SVG/Tutorial/Other_content_in_SVG", "SVG/Tutorial/SVG_Fonts") }}

+

{{ languages( { "en": "en/SVG/Tutorial/Filter_effects"} ) }}

diff --git a/files/ja/web/svg/tutorial/getting_started/index.html b/files/ja/web/svg/tutorial/getting_started/index.html new file mode 100644 index 0000000000..1ec3e14518 --- /dev/null +++ b/files/ja/web/svg/tutorial/getting_started/index.html @@ -0,0 +1,95 @@ +--- +title: 始めましょう +slug: Web/SVG/Tutorial/Getting_Started +tags: + - Beginner + - NeedsBeginnerUpdate + - SVG + - 'SVG:Tutorial' + - 初心者 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

+ +

簡単な例

+ +

簡単な例で正しく始めましょう。下のコードを見てください。

+ +
<svg version="1.1"
+     baseProfile="full"
+     width="300" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+
+  <rect width="100%" height="100%" fill="red" />
+
+  <circle cx="150" cy="100" r="80" fill="green" />
+
+  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
+
+</svg>
+
+ +

コードをコピーして、ファイル demo1.svg に貼り付けましょう。そして、ファイルを Firefox で開いてください。これは、下のスクリーンショットを表示するようレンダリングします。(Firefox のユーザは こちら をクリックしてください)

+ +

svgdemo1.png

+ +

レンダリングプロセスは以下のように関わります:

+ +
    +
  1. {{SVGElement("svg")}} ルート要素から始めます: +
      +
    • (X)HTML で知られる DOCTYPE 宣言はつけないようにしましょう。なぜなら DTD に基づく SVG のバリデーションは、解決することよりも多くの問題を引き起こします。
      • +
    • 他のタイプのバリデーション向けに SVG のバージョンを指定するためには、代わりに version や baseProfile 属性を使用するべきです。 version と baseProfile の両方の属性を付けることは SVG 2 では非推奨です。
      • +
    • XML の派生として、 SVG は (xmlns 属性で) 正しい名前空間に結び付けなければなりません。名前空間の速修講座に詳細が載っていますのでご覧ください。
      • +
    +
    2. +
  2. 画像領域全体を覆う長方形 {{SVGElement("rect")}} を描画することで、背景を赤色にします。
    3. +
  3. 半径が 80px の緑色の円 {{SVGElement("circle")}} を赤色の長方形の中心に描画します (内側に 30+120px、上方に 50+50px のオフセット)。
    4. +
  4. 文字列 "SVG" を描画します。各文字の内側は、白色で塗りつぶします。文字列は、中心点にしたい場所にアンカーを設定することで位置づけられます。この例では、中心点を赤色の長方形の中央と一致させましょう。満足する最終結果を得るように、フォントサイズや上下位置の微調整ができます。
    5. +
+ +

SVG ファイルの基本特性

+ + + +

SVG ファイルの種類

+ +

SVG ファイルには2つの種類があります。普通の SVG ファイルは、SVG マークアップを含むシンプルなテキストファイルです。このファイルの推奨される拡張子は ".svg" (すべて小文字) です。

+ +

SVG ファイルは、一部のアプリケーション (例えば、地理情報アプリケーション) で使用される場合、巨大な大きさに達する可能性があるため、 SVG 仕様書では、 gzip 圧縮された SVG ファイルを使用することも許可しています。これらのファイルに推奨されるファイル名の拡張子は ".svgz" (すべて小文字) です。残念ながら、 Microsoft IIS サーバから提供されている場合、すべての SVG 対応ユーザエージェントで gzip 圧縮された SVG ファイルを確実に動作させるには非常に問題があり、 Firefox は gzip 圧縮された SVG をローカルコンピュータから読み込むことができません。 gzip 圧縮された SVG は、正しくサービスを提供してくれることがわかっているウェブサーバに公開する場合を除いては避けてください (以下を参照)。

+ +

ウェブサーバーについて

+ +

さて、基本的な SVG ファイルの作成方法がわかったところで、次の段階はウェブサーバにアップロードすることです。この段階ではいくつかの問題があります。通常の SVG ファイルの場合、サーバーは次の HTTP ヘッダーを送信しなければなりません。

+ +
Content-Type: image/svg+xml
+Vary: Accept-Encoding
+ +

gzip で圧縮された SVG ファイルの場合は、サーバーは、以下の HTTP ヘッダーを送る必要があります。

+ +
Content-Type: image/svg+xml
+Content-Encoding: gzip
+Vary: Accept-Encoding
+ +

サーバーが SVG ファイルで正しい HTTP ヘッダを送信しているかどうかは、ネットワークモニターパネル や websniffer.cc などのサイトを使用して確認できます。 SVG ファイルのうちの 1 つの URL を送信し、 HTTP レスポンスヘッダーを確認します。サーバーが上記の値のヘッダーを送信していないことがわかったら、ウェブホストに連絡してください。 SVG 用のサーバーを正しく設定するように説得しにくい場合は、自分で設定するのも良いかもしれません。簡単な解決策については、 w3.org のサーバー設定ページを参照してください。

+ +

サーバーの設定ミスは SVG の読み込みに失敗する理由として非常に一般的です。サーバーが正しいヘッダーを SVG ファイルと一緒に送信するように設定されていない場合、 Firefox はファイルのマークアップをテキストや文字化けしたゴミとして表示したり、ビューアにアプリケーションを選択して開くように要求したりする可能性が高いです。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}

diff --git a/files/ja/web/svg/tutorial/gradients/index.html b/files/ja/web/svg/tutorial/gradients/index.html new file mode 100644 index 0000000000..a161df6e71 --- /dev/null +++ b/files/ja/web/svg/tutorial/gradients/index.html @@ -0,0 +1,168 @@ +--- +title: SVGにおける階調度 +slug: Web/SVG/Tutorial/Gradients +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Gradients +--- +

{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

+ +

恐らく，単なる塗り潰しや枠線より刺激的であるのは，塗り潰しや枠線と同様に階調度 (gradients)もまた作成・適用できるという事実でしょう。

+ +

階調度の種別には線状・放射状の二つがあります。当該階調度にはid属性を与えなければならず，さもなくばファイル内部の他要素が参照できません。階調度は，再利用性を高める為に，〔オブジェクトの〕形状それ自身とは対照的に，defsセクションにおいて定義します。

+ +

線状階調度

+ +

線状階調度 (linear gradients)は真っ直ぐな線に沿って〔色が〕変化します。挿入するには，{{SVGElement('linearGradient')}}ノードをSVGファイルの定義セクションの内部に作成します。

+ +

基本例

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <linearGradient id="Gradient1">
+        <stop class="stop1" offset="0%"/>
+        <stop class="stop2" offset="50%"/>
+        <stop class="stop3" offset="100%"/>
+      </linearGradient>
+      <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="50%" stop-color="black" stop-opacity="0"/>
+        <stop offset="100%" stop-color="blue"/>
+      </linearGradient>
+      <style type="text/css"><![CDATA[
+        #rect1 { fill: url(#Gradient1); }
+        .stop1 { stop-color: red; }
+        .stop2 { stop-color: black; stop-opacity: 0; }
+        .stop3 { stop-color: blue; }
+      ]]></style>
+  </defs>
+
+  <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+
+</svg>
+
+ +

{{ EmbedLiveSample('SVGLinearGradient','120','240','/files/722/SVG_Linear_Gradient_Example.png') }}

+ +

上記は<rect>要素に線状階調度を適用する例です。線状階調度の内部には複数の{{SVGElement('stop')}}ノードがあります。これらのノードは，階調度の或る位置における色を，位置についてはoffset属性，〔色については〕stop-color属性を指定することで定めます。直接又はCSSを通して割り当てられます。本例示用に，二つの手法を混合しています。具体的には，これは階調度に対して赤色から開始し，中間で透過黒色に変化し，そして青色で終了するよう指示しています。必要なだけの美醜たる混合〔色〕を作成する為に，好きなだけ停止色 (stop color)を挿入できますが，相対位置 (offset)は常に0%（又はパーセント記号を省きたいなら0）から100%（又は1）に増加するべきです。値が重複した場合，当該XML木の最遠下で割り当てられた<stop>要素が用いられます。又，塗り潰し及び枠線と同様に，その場所の透明度を設定するのにstop-opacity属性を指定できます（この場合でも，FF3においてはRGBA値をこの目的に用いることができます）。

+ +
 <stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
+
+ +

階調度を用いるには，対象のfill又はstroke属性からそれを参照せねばなりません。これは，urlを用いてCSS中の要素を参照する遣り方と同じことをしています。この場合，当URLは，独特な識別子である「Gradient」を与えた階調度への単なる参照です。適用するには，fillをurl(#Gradient)に設定して，ジャジャーン！ strokeについても同じことができます。

+ +

<linearGradient>要素はまた，階調度の大きさ及び見栄えを指定するような他の属性を幾つか持っています。x1，x2，y1，及びy2属性で指定された二点で階調度の方向を制御します。これらの属性は階調度が進み沿う直線を定めます。階調度は水平方向に既定されていますが，これらの属性を変えることで回転させられます。上例におけるGradient2は垂直の階調度を作成するよう設計されています。

+ +
 <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+
+ +
+

注意: 階調度にxlink:href属性を用いることもできます。これを用いた際は，一つの階調度からの〔<linearGradient>要素の〕属性及び色停 (stop)を別の階調度に組み入れられます。上例においては，Gradient2において全ての色停を再作成しなくてもよくなります。

+ +
 <linearGradient id="Gradient1">
+   <stop id="stop1" offset="0%"/>
+   <stop id="stop2" offset="50%"/>
+   <stop id="stop3" offset="100%"/>
+ </linearGradient>
+ <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"
+    xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#Gradient1"/>
+
+ +

ここではxlink名前空間を，通常は文書の先頭にて定義するにも拘らず，当該ノード上で直接定義しました。詳細は画像について説明する際に述べます。

+
+ +

放射状階調度

+ +

放射状のグラデーションは直線上のグラデーションに似ていますが、ある点から放射状にグラデーションを描画します。これを作成するには <radialGradient> 要素をドキュメントの定義セクションに追加します。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="120" height="240" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient1">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+      <radialGradient id="Gradient2" cx="0.25" cy="0.25" r="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#Gradient1)"/>
+  <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>
+
+</svg>
+
+ +

ここで用いている stop は前出のものと同じですが、ここではオブジェクトの中心が赤色になり、そこから縁の青色に向けて全方向の色が変化します。直線上のグラデーションと同様に、<radialGradient> ノードも位置や方向を指定する属性を持つことができます。しかし直線上のグラデーションと異なり、これらはやや複雑です。放射状のグラデーションでも 2 つの点が定義され、それらはグラデーションの端がどこかを定義します。1 点目はグラデーションが終わる場所を囲む円を定義します。これは cx および cy 属性で定義する中心と、r 属性で定義する半径が必要です。これら 3 つの属性を設定することで、前出の例の 2 番目の長方形で表したように、グラデーションの中心の移動やサイズの変更ができます。

+ +

2 点目は焦点と呼ばれ、 fx および fy 属性で定義します。1 点目がグラデーションの端がどこかを示すのに対して、焦点はグラデーションの中心がどこかを示します。これは例を見るとわかりやすくなります。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="120" height="120" version="1.1"
+  xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+
+  <rect x="10" y="10" rx="15" ry="15" width="100" height="100"
+        fill="url(#Gradient)" stroke="black" stroke-width="2"/>
+
+  <circle cx="60" cy="60" r="50" fill="transparent" stroke="white" stroke-width="2"/>
+  <circle cx="35" cy="35" r="2" fill="white" stroke="white"/>
+  <circle cx="60" cy="60" r="2" fill="white" stroke="white"/>
+  <text x="38" y="40" fill="white" font-family="sans-serif" font-size="10pt">(fx,fy)</text>
+  <text x="63" y="63" fill="white" font-family="sans-serif" font-size="10pt">(cx,cy)</text>
+
+</svg>
+
+ +

焦点が先に定義した円の外側に移動した場合はグラデーションを正しく描画することができませんので、焦点は円の縁にあるものとみなされるでしょう。また焦点を定義しない場合は、円の中心と同じ場所であるとみなします。

+ +

どちらのグラデーションも、{{ 原語併記("変換", "Transformations") }}などさまざまなことを定義する属性を持ちます。その中で、ここで説明したい属性は spreadMethod です。この属性は、グラデーションが終端に達したにもかかわらずオブジェクトがすべて塗りつぶされていない場合にどうするかを制御します。この属性は "pad"、"reflect"、または "repeat" の 3 種類の値をとることができます。"pad" はこれまで見てきたものです。グラデーションが終端に達すると最後の offset の色を、オブジェクトの残りの部分の塗りつぶしに用います。"reflect" はグラデーションを継続しますが、offset が 100% の色から始まり 0% の色へ戻るように逆向きのグラデーションを行い、その後さらに逆向きのグラデーションを行います。"repeat" もグラデーションを継続しますが、逆向きにグラデーションするのではなく最初の色から再びグラデーションを始めます。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+
+<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+      <radialGradient id="Gradient"
+            cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"
+            spreadMethod="repeat">
+        <stop offset="0%" stop-color="red"/>
+        <stop offset="100%" stop-color="blue"/>
+      </radialGradient>
+  </defs>
+  <rect x="50" y="50" rx="15" ry="15" width="100" height="100"
+       fill="url(#Gradient)"/>
+</svg>
+
+ +

余談ですがどちらのグラデーションも、グラデーションのサイズや方向を示すときに用いる単位系を定義する gradientUnits 属性を持ちます。この属性は userSpaceOnUse または objectBoundingBox という値を用いることができます。objectBoundingBox は既定値であり、これまで見てきたものです。この値はグラデーションをオブジェクトのサイズに調整するものであるため座標を 0 から 1 の間の値で指定する必要があり、その値は自動的に対象のオブジェクトの大きさに合わせて調整されます。userSpaceOnUse は絶対的な単位をとります。従ってオブジェクトがどこにあるかを知る必要があり、またグラデーションを同じ場所に置かなければなりません。前出の radialGradient は以下のように書き換えることができます:

+ +
 <radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
+
+ +

gradientTransform 属性を用いてグラデーションを変換させることもできますが、まだ{{ 原語併記("変換", "Transformations") }}の紹介 を行っていないため、後で説明します。

+ +

以上の他に、オブジェクトを包み込むボックスが長方形ではない場合に gradientUnits="objectBoundingBox" で値を扱うときの注意事項がありますが、それらはやや複雑であり、またそれの説明に詳しい方が現れるのを待たなければなりません。

+ +

{{ PreviousNext("SVG/Tutorial/Fills_and_Strokes", "SVG/Tutorial/Patterns") }}

+ +

{{ languages( { "en": "en/SVG/Tutorial/Gradients"} ) }}

diff --git a/files/ja/web/svg/tutorial/index.html b/files/ja/web/svg/tutorial/index.html new file mode 100644 index 0000000000..9f8e8840f6 --- /dev/null +++ b/files/ja/web/svg/tutorial/index.html @@ -0,0 +1,55 @@ +--- +title: SVG教本 +slug: Web/SVG/Tutorial +tags: + - MDC Project + - NeedsContent + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial +--- +

変倍ベクタ図形 (Scalable Vector Graphics; SVG) は図形をタグ付けするW3CのXML派生言語です。SVGは，Firefox、Opera、WebKitブラウザ、Internet Explorer及び他のブラウザにおいて部分的に実装されています。

+ +

本教本はSVGの内部構造の説明を目的としており，また技術的詳細が目白押しです。美しい画像を描きたいだけなら，より有用な資料はInkscapeの文書郡にて見付かるでしょう。他に，W3CのSVG入門も，良いSVG概説を提供しています。

+ +
このチュートリアルは執筆の非常に早い段階にあります。もしあなたが可能なら、力を貸し、1 つまたは 2 つのパラグラフを書いて手助けしてください。ページ全体を書いていただければ、なお良いです。
+ +
ゼロから始める SVG の紹介
+ + + +

続く話題はより発展的であり、従って各々自身の教本を習得すべきです。

+ +
JavaScript による SVG のスクリプティング
+ +

未定

+ +
SVG フィルタのチュートリアル
+ +

未定

+ +
SMIL を用いた SVG のアニメーション
+ +

未定

+ +
SVG によるフォント作成
+ +

未定

diff --git a/files/ja/web/svg/tutorial/introduction/index.html b/files/ja/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..4312e306ce --- /dev/null +++ b/files/ja/web/svg/tutorial/introduction/index.html @@ -0,0 +1,31 @@ +--- +title: Introduction +slug: Web/SVG/Tutorial/Introduction +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Introduction +--- +
+ {{PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting Started")}}
+

SVG は右に示したようなグラフィックの描画に用いる、 XHTML に似ている XML 言語です。これは、必要な線や図形を指定する、既存のラスタ画像に手を加える、あるいはそれら両方を組み合わせることで画像を作成するのに用いられます。画像やその部品は、外見を完全に変えるためにトランスフォーム、合成、フィルタ適用を行うこともできます。

+

SVG は、いくつかの競合するフォーマットが W3C に提案されたものの承認されなかった後の 1999 年頃に生まれました。仕様書は長い間存在していますがブラウザへの採用はかなり遅く、そのために今日 (2009 年) の Web で用いられている SVG コンテンツは少ない状態です。利用可能な実装でさえ、その多くは HTML:Canvas や完全なアプリケーションインタフェースとしての Adobe Flash のような競合技術ほど速くない状態です。SVG は実装の一部において、利用が可能な DOM インタフェースを含むことと、デフォルトでブラウザが動作するのにサードパーティの拡張機能を必要としないという利点があります。それを使用するかしないかは、たいていそれを使う目的に依存します。

+ +

基本的な構成要素

+

HTML はヘッダ、段落、テーブルなどを定義する要素を提供します。同様に SVG は円、長方形、単純あるいは複雑な曲線などの要素を提供します。シンプルな SVG ドキュメントは svg ルート要素およびグラフィックを構成するいくつかの基本的な図形のみから成ります。加えて g があり、これはいくつかの基本的な図形をグループ化します。

+

ここから始めて、SVG 画像を複雑にしていくことができます。SVG はグラデーション、回転、フィルタ効果、アニメーション、JavaScript との連携などをサポートします。しかしこれら言語の追加機能すべては、グラフィックエリアを定義する比較的小さな要素のセットに依存します。

+

始める前に

+

アプリケーション固有のファイルと同じように SVG を扱うことが出来る Inkscape のような free な、たくさんの draw アプリケーションがあります。しかし、このチュートリアルでは、信頼できる XML か (あなたが選んだ) テキストエディタを期待しています。このチュートリアルは、SVG の内部を理解したい人向けに作られています。一度 SVG を手書きでマークアップすることは、良い経験になります。それでも、最終的なゴールは意識するべきです。すべての SVG ビューアが同じということはなく、それらアプリが SVG 仕様や SVG と併せて用いる他の仕様 (JavaScript や CSS) を異なるレベルでサポートしているため、あるアプリ向けに記述した SVG がほかのアプリでは同じように表示されない可能性があります。

+

SVG は現行の全ブラウザでサポートされているわけではありません (あと一息ではありますが)。SVG ビューアのかなり完全な一覧が SVG Wiki にあります。Firefox はバージョン 1.5 から一部の SVG コンテンツをサポートしており、その後のリリースごとにサポートレベルが向上しています。うまくいけばこのチュートリアルと共に MDC が、開発者が Gecko とほかの主要な実装との間の違いを把握することの助けになるでしょう。

+

始める前に、XML もしくは HTML のような他のマークアップ言語の基本を理解するべきです。もし、XML に精通していなければ、以下に心にとめておく指針があります:

+ +

SVG の仕様は巨大です。このチュートリアルは、初めの一歩を踏み出すためだけの範囲を担当しています。一度 SVG の基本に精通したら、知りたいことを見つけるために『SVG 要素リファレンス』 と、『Interface Reference』({{todo("デッドリンク")}}) を見てみるべきです。

+

SVG の種類

+

2003 年に勧告が成立して以降、最新の "完全な" SVG バージョンは 1.1 です。これは SVG 1.0 の上に構築したものですが、実装を容易にするためにモジュール化が進みました。SVG 1.1 の第 2 版が現在策定中です。"完全な" SVG 1.2 は、次の SVG のメジャーリリースを意味していました。それは将来の SVG 2.0 のために破棄され、そして SVG 2.0 は現在鋭意開発中であり構成要素をいくつかの緩く結合した仕様に分割する、CSS 3 と似た手法をとっています。

+

完全な SVG 勧告からは離れて、W3C のワーキンググループは 2003 年に SVG Tiny と SVG Basic を導入しました。これら 2 つのプロファイルは、主にモバイルデバイスを対象にしています。SVG Tiny は、性能が低い小型デバイス向けに図形要素をもたらすでしょう。SVG Basic は完全な SVG が持つ機能の多くを提供しますが、実装が難しい機能や描画負荷の高い機能 (アニメーションなど) は含みません。2008年に、SVG Tiny 1.2 が W3C 勧告になりました。

+

SVG 印刷の仕様の計画があり、これは複数のページや高度なカラーマネージメントのサポートを追加する予定でした。この作業は休止しています。

+
+ {{PreviousNext("SVG/Tutorial", "SVG/Tutorial/Getting Started")}}
diff --git a/files/ja/web/svg/tutorial/other_content_in_svg/index.html b/files/ja/web/svg/tutorial/other_content_in_svg/index.html new file mode 100644 index 0000000000..1b1aa2a6a0 --- /dev/null +++ b/files/ja/web/svg/tutorial/other_content_in_svg/index.html @@ -0,0 +1,30 @@ +--- +title: Other content in SVG +slug: Web/SVG/Tutorial/Other_content_in_SVG +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Other_content_in_SVG +--- +

{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

+

長方形や円といったグラフィックの基本要素とは別に、SVG は画像内に他の種類のコンテンツを埋め込むための要素セットも同様に用意しています。

+

{{ 英語版章題("Embedding raster images") }}

+

ラスターイメージの埋め込み

+

HTML における img 要素と同様に、SVG には同じ用途の image 要素があります。これを用いて、任意のラスター (およびベクター) イメージを埋め込むことができます。仕様書ではアプリケーションに対し、少なくとも PNG、JPEG、および SVG 形式のファイルをサポートするよう求めています。

+

埋め込まれた画像は、通常の SVG 要素になります。つまり、コンテンツに対してクリップ、マスク、フィルタ、回転、およびその他 SVG の技術を用いることが出ます:

+
<svg version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     width="200" height="200">
+  <image x="90" y="-65" width="128" height="146" transform="rotate(45)"
+     xlink:href="https://developer.mozilla.org/media/img/mdn-logo.png"/>
+</svg>
+
+

imagedemo.png

+

{{ 英語版章題("Embedding arbitrary XML") }}

+

任意の XML の埋め込み

+

SVG は XML アプリケーションであることから、常に SVG ドキュメント内のどこにでも任意の XML を埋め込むことができます。しかし、そのコンテンツに対して周囲の SVG がどのように作用するかを定義する方法はありません。実際、準拠しているビューアでは埋め込まれた XML が全く作用せず、そのデータは単純に省略されます。そのため、仕様書では SVG に {{ SVGElement("foreignObject") }} 要素を追加しています。この要素の唯一の用途は、他のマークアップのコンテナおよび SVG のスタイル属性 (もっとも顕著なものは、オブジェクトの領域を定義する width および height です) のキャリアになることです。

+

foreignObject 要素は、SVG に XHTML を埋め込むのによい手段です。長いテキストがある場合、SVG の text 要素より HTML のレイアウトの方がより適切かつ使いやすくなります。他によく挙げられる使い方として、MathML の式の埋め込みがあります。これは SVG を科学分野で応用する場合に、SVG と MathML を統合するためにとてもよい方法です。

+
注意: foreignObject の内容物は、ビューアによって処理できなければならないことを覚えておいてください。スタンドアロンの SVG ビューアは、HTML や MathML のレンダリングができないでしょう。
+

foreignObject は SVG の要素ですので、image と同様に SVG のあらゆる技術を用いることができ、そしてそれは foreignObject の内容物に適用されます。

+

{{ PreviousNext("SVG/Tutorial/Clipping_and_masking", "SVG/Tutorial/Filter_effects") }}

+

{{ languages( { "en": "en/SVG/Tutorial/Other_content_in_SVG"} ) }}

diff --git a/files/ja/web/svg/tutorial/paths/index.html b/files/ja/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..170fe2e21d --- /dev/null +++ b/files/ja/web/svg/tutorial/paths/index.html @@ -0,0 +1,266 @@ +--- +title: Paths +slug: Web/SVG/Tutorial/Paths +tags: + - Intermediate + - SVG + - SVG チュートリアル + - 'SVG:Tutorial' + - 中級者向け +translation_of: Web/SVG/Tutorial/Paths +--- +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

+ +

{{SVGElement('path')}} 要素は、 SVG の基本図形ライブラリの中でもっとも強力な要素です。これは、直線、曲線、弧などを作成するために用いることができます。

+ +

パスは、複数の直線や曲線を組み合わせて複雑な形状を作ります。直線だけで構成された複雑な形状は、 <polyline> として作成することができます。 <polyline> と <path> は似たような形状を作ることができますが、 <polyline> は曲線を表現するのに大量の小さな直線を必要とするため、大きなサイズにはうまく拡大することができません。

+ +

SVG を描画する際には、パスをよく理解しておくことが重要です。XML エディターやテキストエディターを使用して複雑なパスを作成する野はお勧めできませんが、それらがどのように機能するかを理解しておけば、 SVG の表示問題を特定して修復することができます。

+ +

<path> 要素の形状は、1つの引数である {{ SVGAttr("d") }} によって定義されます (詳細は基本図形を参照してください)。 d 属性はこれらのコマンドで使用される一連のコマンドと引数を含みます。

+ +

それぞれのコマンドは、特定の文字でインスタンス化されています (例えば、クラスを作成したり、名前を付けたり、位置を特定したりします)。例えば、 x と y の座標 (10, 10) に移動してみましょう。 "Move to" コマンドは M という文字で呼び出されます。パーサーはこの文字に遭遇したとき、ある点に移動する必要があることを知っています。したがって、 (10,10) に移動するためのコマンドは M 10 10 となります。その後、パーサーは次のコマンドを読み始めます。

+ +

すべてのコマンドは 2 つの種類があります。大文字はページ上の絶対座標を指定し、小文字は相対座標 (例えば、 直前の点から上に 10px、左に 7px 移動) を指定します。

+ +

d 属性の座標は 常に単位なし で指定するので、ユーザー座標システムになります。後のチュートリアルで、どのようにパスを他のニーズに合わせて変形できるかを学びます。

+ +

直線コマンド

+ +

{{SVGElement("path")}} ノードには、直線のコマンドが 5 つあります。1つ目のコマンドは "Move To" すなわち M で、前述したものです。これは2つの引数、移動先の座標 (x) と座標 (y) を取ります。カーソルがすでにページ上のどこかにあった場合は、2 つの位置を結ぶ線は描画されません。 "Move To" コマンドは、どこから描画を始めるかを指定するパスの始点に見られます。

+ +
M x y
+(または)
+m dx dy
+
+ +

以下の例では点 (10,10) だけがある状態になります。ただし、パスだけを描画してもこれらの点が表示されないことに注意してください。

+ +

+ +
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+
+</svg>
+ +

線を描画するコマンドは 3 種類あります。もっとも一般的なものは、 "Line To" コマンド、すなわち L です。 L は 2 つの引数—x および y 座標—を持ち、現在の位置から新しい位置に向けて直線を描画します。

+ +
 L x y
+ (または)
+ l dx dy
+
+ +

水平または垂直の線を描画するための短縮あ形式があります。 H は水平線を描画、V は垂直線を描画します。どちらのコマンドも一方向にしか移動しないので、引数は 1 つだけです。

+ +
 H x
+ (または)
+ h dx
+
+ V y
+ (または)
+ v dy
+
+ +

始めやすいところは実際に図形を描いてみることです。手始めに長方形 ({{SVGElement("rect")}} 要素を使うとより簡単に描けるものと同じです) を描いてみましょう。これは水平線と垂直線だけで構成されています。

+ +

+ +
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
+
+  <!-- Points -->
+  <circle cx="10" cy="10" r="2" fill="red"/>
+  <circle cx="90" cy="90" r="2" fill="red"/>
+  <circle cx="90" cy="10" r="2" fill="red"/>
+  <circle cx="10" cy="90" r="2" fill="red"/>
+
+</svg>
+ +

最後に "Close Path" コマンドである Z を用いることで、前出のパスを少し短くすることができます。このコマンドは、現在の位置からパスの始点である最初の点へ戻る直線を描画します。常にパスを閉じる必要はありませんが、パスノードの終端によく置かれます。外見上、大文字コマンドと小文字コマンドの違いはありません。

+ +
 Z
+ (or)
+ z
+
+ +

したがって、上記のパスは次のように簡単に書くことができます。

+ +
 <path d="M 10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
+
+ +

同じ画像を描画するために、これらコマンドの相対形式を用いることもできます。前に述べたとおり相対形式のコマンドは小文字を用いて表記され、厳密な座標でカーソルを移動するのではなく直前の位置から相対的に移動します。例えば、ここで描いた四角形のサイズは 80x80 であるので、 <path> 要素は以下のように書くことができます:

+ +
 <path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>
+
+ +

パスは点 (10,10) に移動した後、右へ水平に点 80 個分、下に点 80 個分、左に点 80 個分、そして始点へ戻るように移動します。

+ +

これらの例では、おそらく {{SVGElement("polygon")}} や {{SVGElement("polyline")}} 要素を使用すると、より簡潔に書くことができます。しかし、パスは SVG で描画する際に頻繁に使用されるので、開発者はこれらの代わりにパスを使用した方が快適かもしれません。どちらを使用しても、性能上の利点や欠点はありません。

+ +

曲線コマンド

+ +

なめらかな曲線を作成するために使うコマンドは 3 種類あります。 2 つはベジェ曲線、3 つめは "円弧" すなわち円の一部です。すでに Inkscape, Illustrator, Photoshop などのパスツールを使用して、ベジェ曲線の実体験をしているかもしれません。ベジェ曲線の背景の数学的な説明については、Wikipedia (日本語版) などのリファレンスを参照してください。ベジェ曲線には無数の異なる種類がありますが、 <path> 要素ではシンプルな 2 種類だけが使用可能です。三次ベジェ曲線の C と、二次ベジェ曲線の Q です。

+ +

ベジェ曲線

+ +

まずは、やや複雑なベジェ曲線である三次ベジェ曲線 から始めましょう。三次ベジェ曲線は、各々の点に対する 2 つの制御点をとります。従って、三次ベジェ曲線を作成したいときは 3 組の座標を指定しなければなりません。

+ +
 C x1 y1, x2 y2, x y
+ (または)
+ c dx1 dy1, dx2 dy2, dx dy
+
+ +

ここで最後にある座標 (x,y) は、線の終点にしたい場所です。他の 2 組は制御点です。 (x1,y1) は曲線の始点向けの制御点、 (x2,y2) は曲線の終点向けの制御点です。制御点は各々の点から始まる線の傾斜を本質的に説明するものです。このときベジェ関数は、線の始めで確立した傾斜からもう一方の側の傾斜へ至るなめらかな曲線を作成します。

+ +

Cubic Bézier Curves with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+
+  <path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
+  <path d="M 70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
+  <path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
+  <path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
+  <path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
+  <path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
+  <path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
+  <path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
+  <path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>
+
+</svg>
+
+ +

上の例では 9 つのベジェ曲線を作成しています。曲線が左側へ移動するにつれて、制御点は水平方向に離れていきます。また曲線が右側へ移動するにつれて、制御点は終点から遠く離れていきます。ここで特筆することは、曲線は 1 番目の制御点に向かって出発し、そして 2 番目の制御点の方向に沿って到着するということです。

+ +

長いなめらかな図形を描くために、複数のベジェ曲線をつなぐことができます。この場合はたいてい、ある点の片方の制御点はもう一方で使われる制御点の対向になるでしょう (傾斜を一定に保つ場合)。この場合はコマンド S (または s) で示される、三次ベジェ曲線の短縮版を用いることができます。

+ +
 S x2 y2, x y
+ (または)
+ s dx2 dy2, dx dy
+
+ +

S は前に示したものと同種の曲線を生成しますが、これが別の S コマンドや C コマンドの後に続く場合は、1 番目の制御点が前を曲線で用いられた制御点の対向にするものとみなします。S コマンドが別の S または C コマンドの後にない場合は、その曲線の 2 つの制御点は同じ場所であるとみなします。この場合は、 Q コマンドに同じ引数を与えて出力する結果と同じ結果になります。

+ +

この構文の例を以下に示しますが、左の図では、指定された制御点が赤、推定された制御点が青で示されています。

+ +

ShortCut_Cubic_Bézier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

もう一つの種類のベジェ曲線は二次ベジェ曲線 Q であり、こちらは三次ベジェ曲線よりシンプルな曲線です。基本的に制御点を 1 つだけ必要とし、それは始点側と終点側両方の曲線の傾斜を定義します。このコマンドは制御点と曲線の終点を示す 2 つの引数を持ちます。

+ +
+

注: q コマンドにおける座標の差分は、どちらも前回の点からの相対座標です (すなわち dx と dy は dx1 と dy1 に対する相対座標ではありません)。

+
+ +
 Q x1 y1, x y
+ (または)
+ q dx1 dy1, dx dy
+
+ +

Quadratic Bézier with grid

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

三次ベジェ曲線の場合と同様に、二次ベジェ曲線のセットをつなぎ合わせるためのショートカットである T があります。

+ +
 T x y
+ (or)
+ t dx dy
+
+ +

このショートカットは前に用いた制御点を参照して、そこから新しい制御点を推測します。これは、最初の制御点を指定した後は終点を指定するだけで、ある程度複雑な図形を作成できることを意味します。

+ +

このコマンドは前のコマンドが Q または T コマンドである場合のみ動作します。そうではない場合、制御点は前の点と同じであるとみなして直線が描画されるだけになります。

+ +

Shortcut_Quadratic_Bézier_with_grid.png

+ +
<svg width="190" height="160" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
+</svg>
+ +

三次ベジェ曲線はどのような曲線を描きたいかについて自由度が高いにもかかわらず、どちらの曲線もかなり似た結果になります。どちらの曲線を用いるかはたいてい、そのときの状況や曲線の対称度に依存します。

+ +

円弧

+ +

SVG を用いて作成できる別のタイプの曲線が円弧 A コマンドです。円弧の本質は円または楕円の一部分です。

+ +

与えられた X 軸と Y 軸の半径について、2 つの点に接する楕円は (それらが円の半径の範囲内にある限り) 2 つあります。どちらにも 2 点を結ぶパスが 2 つずつあるため、どのような場合でも考えられる円弧は 4 つあります。

+ +

このため、円弧はかなり多くの引数をとります。

+ +
 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
+ a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
+
+ +

始めに arc 要素は、円弧の X 軸方向の半径と Y 軸方向の半径を示す 2 つの引数を持ちます。必要に応じて {{SVGElement("ellipse")}} で同動作するかを確認してください。後の2つの引数は、描画が終了する X および Y 座標を示します。

+ +

3 番目の引数は、円弧の回転度を示します。これは次の説明が最適です。

+ +

SVGArcs_XAxisRotation_with_grid

+ +
<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 315
+           L 110 215
+           A 30 50 0 0 1 162.55 162.45
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+</svg>
+ +

この例ではページを斜めに渡る <path> 要素を示しています。その中間で、2 つの楕円弧 (X 軸方向の半径 = 30、Y 軸方向の半径 = 50) が切り抜かれています。1 番目の円弧は x-axis-rotation が 0 であるので、円弧が通る楕円 (灰色で示しています) は直立しています。一方 2 番目の円弧では、 x-axis-rotation が -45 度になっています。これは円弧を回転させるので、例の図にあるとおり 2 番目の楕円の短半径がパスの方向に沿うよう一直線に並びます。

+ +

上の画像の回転していない楕円については、円弧の始点と終点から引かれた線が楕円の中心を通るので、 2 つの異なる円弧があるだけで、 4 つの円弧から選択できるわけではありません。少し修正した例では、 4 つの異なる円弧を形成する 2 つの楕円を見ることができます。

+ +

Show the 4 arcs on the Ellipse example

+ +
<svg xmlns="http://www.w3.org/2000/svg" width="320" height="320">
+  <path d="M 10 315
+           L 110 215
+           A 36 60 0 0 1 150.71 170.29
+           L 172.55 152.45
+           A 30 50 -45 0 1 215.1 109.9
+           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
+  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
+  <circle cx="110" cy="215" r="2" fill="red"/>
+  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
+  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
+</svg>
+
+ +

青い楕円は、時計回りか反時計回りかによって、2つの円弧を描いていることに注意してください。それぞれの楕円には、短い円弧と長い円弧がある。2つの楕円は互いに鏡像になっている。これらの楕円は、開始点→終了点から形成された線に沿って反転している。

+ +

開始点→終了点が楕円の x, y 半径が到達できる距離よりも遠い場合、楕円の半径は最小に拡大され、開始点→終了点に到達できるようになります。このページの一番下にあるインタラクティブなコードペンがこのことをよく示しています。楕円の半径が拡大を必要とするほど大きいかどうかを判断するには、このような方程式系を解く必要があります。この計算は、開始→終了 (110, 215)→(150.71, 170.29) の非回転楕円についてのものです。解 (x, y) は楕円の中心である．楕円の半径が小さすぎると、解は虚数になります。この2番目の計算は、開始→終了 (110, 215)→(162.55, 162.45) の非回転楕円の場合です。楕円がかろうじて拡大されただけなので、この解には小さな虚数成分が含まれています。

+ +

前述した4つの異なるパスは、次の2つのパラメータフラグによって決定されます。前述したように、パスが移動する楕円にはまだ2つの可能性があり、両方の楕円上には2つの異なる可能性のあるパスがあり、4つの可能性のあるパスが与えられます。最初のパラメータは large-arc-flag です。これは単純に円弧が 180 度より大きいか小さいかを決定します。2 番目のパラメータは sweep-flag フラグです。これは、円弧が正の角度で動き始めるか負の角度で動き始めるかを決定します。以下の例は、4 つの可能性のあるすべての組み合わせと、それぞれの場合の 2 つの円を示しています。

+ +

+ +
<svg width="325" height="325" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 80 80
+           A 45 45, 0, 0, 0, 125 125
+           L 125 80 Z" fill="green"/>
+  <path d="M 230 80
+           A 45 45, 0, 1, 0, 275 125
+           L 275 80 Z" fill="red"/>
+  <path d="M 80 230
+           A 45 45, 0, 0, 1, 125 275
+           L 125 230 Z" fill="purple"/>
+  <path d="M 230 230
+           A 45 45, 0, 1, 1, 275 275
+           L 275 230 Z" fill="blue"/>
+</svg>
+ +

円弧は、図面の中で円や楕円のピースを簡単に作成する方法です。例えば、円グラフでは、各ピースごとに異なる円弧が必要になります。

+ +

から SVG に移行する場合、弧は習得するのが最も難しいものですが、はるかに強力なものになります。完全な円と楕円だけは、 SVG の円弧が苦手な形状です。円の周りを回るあらゆるパスの始点と終点が同じ点であるため、選択できる円の数は無限にあり、実際のパスは不定になるからです。パスの始点と終点を少しずらして、別のパスセグメントでつなぐことで近いものを描くことができます。例えば、半円ごとに円弧を描くことも可能です。このような場合は、実際の {{SVGElement("circle")}} や {{SVGElement("ellipse")}} ノードを使った方が簡単なことが多いです。http://codepen.io/lingtalfi/pen/yaLWJG のインタラクティブなデモは、 SVG の円弧の背後にある概念を理解するのに役立つかもしれません。 (Chrome と Firefox のみでテストしました。お使いのブラウザでは動作しないかもしれません)。

+ +

{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}

diff --git a/files/ja/web/svg/tutorial/patterns/index.html b/files/ja/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..e0b7fcd4fb --- /dev/null +++ b/files/ja/web/svg/tutorial/patterns/index.html @@ -0,0 +1,74 @@ +--- +title: Patterns +slug: Web/SVG/Tutorial/Patterns +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Patterns +--- +

{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}

+ +

私見では、パターンは SVG で用いる中でわかりにくい塗りつぶし方のひとつです。とはいえとても強力であるので、パターンには説明および少なくとも基礎的な部分は把握するだけの価値があります。グラデーションと同様に、<pattern> 要素は SVG ファイルの <defs> セクションに置かなければなりません。

+ +

+ +
<?xml version="1.0" standalone="no"?>
+<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
+  <defs>
+    <linearGradient id="Gradient1">
+      <stop offset="5%" stop-color="white"/>
+      <stop offset="95%" stop-color="blue"/>
+    </linearGradient>
+    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
+      <stop offset="5%" stop-color="red"/>
+      <stop offset="95%" stop-color="orange"/>
+    </linearGradient>
+
+    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
+      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+    </pattern>
+  </defs>
+
+  <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200"/>
+</svg>
+
+ +

pattern 要素の内部には先に入れた他の基本図形を含めることができ、それらの図形は前に学習したスタイルを用いてグラデーションや不透明度などの装飾を設定することができます。ここではパターンの内部に 2 つの長方形 (これらは重なっており、片方はもう片方の 2 倍のサイズでパターン全体を埋めています) と 1 つの円を描画しています。

+ +

パターンについてわかりにくいことは、単位系の定義とパターンのサイズです。前出の例ではパターンを繰り返し始めるまでどれくらいの距離をおくべきかを示すために、pattern 要素で width および height 属性を定義しました。また、描画内のどこかへパターンの長方形の開始点をずらしたい場合は、 x および y 属性を利用できます。それら属性をここで用いた理由は、後ほど説明します。

+ +

以前 gradientUnits 属性を用いたように、パターンでも同様に width などの属性で用いる単位を指定する、patternUnits 属性があります。前出の例のように既定値は "objectBoundingBox" であり、1 という値はパターンを適用するオブジェクトの幅や高さに調整されます。今回の例ではパターンを水平および垂直方向に 4 回繰り返したいので、height および width は 0.25 に設定します。つまりパターンの幅および高さは、ボックス全体のサイズの 0.25 倍になります。

+ +

グラデーションとは異なり、パターンには第 2 の属性 patternContentUnits があり、これは pattern 要素内の基本図形自身が用いる単位系を示します。この属性の既定値は "userSpaceOnUse" であり、patternUnits 属性とは逆です。よって、これらの属性 (patternContentUnits および patternUnits) の片方あるいは両方を指定しないと、パターン内に描画する図形は pattern 要素で用いるのとは異なる座標系で描画されることになり、要素を手書きで記述する際に少々わかりにくくなるかもしれないことを意味します。前出の例でこの作業を行うにはボックスのサイズ (200 ピクセル) と、パターンを水平および垂直方向に 4 回繰り返したいという事実を考慮しなければなりませんでした。よって、パターンの 1 単位は 50x50 ピクセルの正方形でした。そしてパターン内にある 2 つの長方形と円は 50x50 ピクセルのボックスに収まるサイズでした。このボックスの外側に描画した図形等は、表示されません。また、パターンがボックスの左上隅から始まるように 10 ピクセルずらす必要がありましたので、pattern の x および y 属性を 10/200 = 0.05 に調整しました。

+ +

ここでの注意点は、オブジェクトのサイズが変わった場合にパターンそのものは見合うサイズに調整されますが、内部のオブジェクトは調整されないことです。従ってパターン内では 4 回ユニットを繰り返しますが、パターンを構成するオブジェクトは同じサイズのままになりますので、オブジェクトの間に何もない大きなエリアができあがってしまいます。patternContentUnits 属性を変更することで、すべての要素で同じ単位系を用いることができます:

+ +
 <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox">
+   <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/>
+   <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/>
+   <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

これでパターンとパターン内のコンテンツが同じ単位系になることから、パターンが正しい位置から始まるようにボックスをずらす必要がなくなり、またオブジェクトのサイズが大きくなった場合でもオブジェクト内に同じ数のパターンが入るようにパターンのサイズが自動的に調整されます。またその内部でも、同じことを行います。これは、"userSpaceOnUse" システムと対照的です。こちらはオブジェクトのサイズが変わってもパターンのサイズはそのままであり、ボックスを埋めるためにパターンをより多く繰り返します。

+ +

余談ですが、Gecko では円の半径が 0.075 より小さいときに描画の不具合が発生するようです (それより大きい半径になるよう拡大すべきであるにもかかわらず。これは pattern 要素のバグかもしれませんし、あるいはバグではないかもしれませんが、私にはよくわかりません)。これの回避法は、必要がなければ "objectBoundingBox" の単位を用いて描画することを避けるのが最善でしょう。

+ +

これまで見てきた 2 つの使い方はいずれも、パターンについて考えるときに通常は思いつかないでしょう。パターンは通常サイズが決まっており、またそれ自身をオブジェクトの形状に関係なく繰り返します。このようなパターンを作成するには、パターンとその内容物は現在の userSpace 内に描画しなければならず、そのためにオブジェクトの形状が変化してもパターンの形状は変わりません:

+ +
 <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse">
+   <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
+   <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
+   <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
+ </pattern>
+
+ +

もちろん、これは後からオブジェクトのサイズを変えてもパターンのサイズは調整されないことを意味します。前出の 3 種類の例について、長方形の高さを 300px に広げたものを以下に示しましたが、これはすべてを網羅した画像ではなく、また目的に応じて利用可能なオプションが他にもあることを注記したいと思います。

+ +

Image:SVG_Pattern_Comparison_of_Units.pngo

+ +

{{ PreviousNext("SVG/Tutorial/Gradients", "SVG/Tutorial/Texts") }}

+ +

{{ languages( { "en": "en/SVG/Tutorial/Patterns"} ) }}

diff --git a/files/ja/web/svg/tutorial/positions/index.html b/files/ja/web/svg/tutorial/positions/index.html new file mode 100644 index 0000000000..ade0c5a9c1 --- /dev/null +++ b/files/ja/web/svg/tutorial/positions/index.html @@ -0,0 +1,33 @@ +--- +title: Positions +slug: Web/SVG/Tutorial/Positions +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Positions +--- +

{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}

+

{{ 英語版章題("The grid") }}

+

グリッド

+

すべての要素向けに、SVG は canvas (あるいはその他多くのコンピュータによる描画ルーチン) で使われているものと似た座標システムまたはグリッドシステムを用います。これは、ドキュメントの左上隅を点 (0, 0) として考えます。よって位置は、左上隅から右方向へ伸びる正の X 軸と下方向へ伸びる正の Y 軸により、ピクセル数で測定されます。この座標は、子供の頃に教わったグラフのものとは逆向きであることに注意してください。しかし、これは HTML の要素を配置する場合と同じです。

+

例:

+

以下の要素は、左上隅から右および下へ 100px の範囲を占める長方形を表します。

+
<rect x="0" y="0" width="100" height="100" />
+
+

{{ 英語版章題("What are .22pixels.22.3F") }}

+

"ピクセル" とは

+

ほとんどの基本的なケースにおいて、SVG ドキュメントの 1 ピクセルは出力デバイス (例えばスクリーン) の 1 ピクセルに対応します。 しかしこの動作を変えることができないのであれば、SVG の名称内に "Scalable" はなかったでしょう。CSS のフォントサイズで絶対値と相対値があるように、SVG でも絶対単位 ("pt" や "cm" など寸法の識別子) と、単位が欠落して数値だけのいわゆる{{ 原語併記("ユーザー単位", "user units") }}があります。

+

特に明示しなければ、1 ユーザー単位は 1 スクリーン単位と同じです。明示的にこの動作を変えるための手段が SVG にあります。以下の svg ルート要素から始める場合:

+
<svg width="100" height="100">
+
+

上記の要素は、100x100px のシンプルな SVG キャンバスを定義します。1 ユーザー単位は 1 スクリーン単位と同じです。

+
<svg width="200" height="200" viewBox="0 0 100 100">
+
+

この場合、SVG キャンバス全体のサイズは縦横ともに 200px です。しかし viewBox 属性が、表示するキャンバスの部分を定義しています。これら 200x200 ピクセルの領域は、ユーザー単位 (0, 0) から始まり右方向および下方向に 100x100 ユーザー単位を占める領域を表示します。これは実質的に 100x100 単位の領域をズームインし、画像を 2 倍のサイズに引き伸ばします。

+

現行の (単一の要素またはイメージ全体への) ユーザー単位とスクリーン単位間のマッピングは、{{ 原語併記("ユーザー座標系", "user coordinate system") }} と呼ばれます。座標系から離れることで、回転・変形・反転を行うこともできます。デフォルトのユーザー座標系は、1 ユーザーピクセルを 1 デバイスピクセルに割り当てます。(ただし、デバイスは何を 1 ピクセルとして扱うかを決めることができるかもしれません。) SVG ファイルで "in" や "cm"など 特定の寸法である長さは、結果の画像で 1:1 で見えるようにする方法で計算されます。

+

これを説明する SVG 1.1 の仕様を引用します:

+

[...] suppose that the user agent can determine from its environment that "1px" corresponds to "0.2822222mm" (i.e., 90dpi). Then, for all processing of SVG content: [...] "1cm" equals "35.43307px" (and therefore 35.43307 user units)

{{ 訳注("以下は参考訳文") }}(前略) ユーザーエージェントは自身の環境から、"1px" を "0.2822222mm" に対応づける (すなわち 90dpi) と仮定します。すると、SVG コンテンツの処理において (中略) "1cm" は "35.43307px" (よって、35.43307 ユーザー単位) と一致します。

+
+

{{ PreviousNext("SVG/Tutorial/Getting_Started", "SVG/Tutorial/Basic_Shapes") }}

+

Interwiki Languages Links

+

{{ languages( { "en": "en/SVG/Tutorial/Positions", "fr": "fr/SVG/Tutoriel/Positionnement"} ) }}

diff --git a/files/ja/web/svg/tutorial/svg_fonts/index.html b/files/ja/web/svg/tutorial/svg_fonts/index.html new file mode 100644 index 0000000000..d70ec7a252 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_fonts/index.html @@ -0,0 +1,78 @@ +--- +title: SVG Fonts +slug: Web/SVG/Tutorial/SVG_Fonts +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/SVG_fonts +--- +

{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial/SVG_Image_Tag") }}

+

SVG で Web フォントのサポートが明示されたのは、それがずっと望まれていたからです。しかし画像のレンダリングには正しいフォントが重要であるため、SVG にフォントを定義する技術が追加されました。これは PostScript や OTF のような他のフォント形式と同じようなものを意図するのではなく、レンダリングエンジン向けにグリフ情報を埋め込む簡単な手段です。

+
ブラウザでの SVG フォントのサポートは、広く行われているとは言えません。Opera の他、WebKit ブラウザ (デスクトップおよびモバイル) だけがフォントを表示できます。Firefox は WOFF へ集中するために、SVG フォントの実装を無期限に延期しました。しかし他のツール、たとえば Adobe SVG Viewer、Batik、Inkscape の一部は SVG フォントをサポートしています。
+

SVG フォントを定義するための基盤は {{ SVGElement("font") }} 要素です。

+

{{ 英語版章題("Defining a font") }}

+

フォントの定義

+

フォントに必要なすべての情報を得ることに、連携して関わる要素がいくつかあります。始めに (仕様書 で示されている) 宣言の例、その後に詳しい説明を示します。

+
<font id="Font1" horiz-adv-x="1000">
+  <font-face font-family="Super Sans" font-weight="bold" font-style="normal"
+      units-per-em="1000" cap-height="600" x-height="400"
+      ascent="700" descent="300"
+      alphabetic="0" mathematical="350" ideographic="400" hanging="500">
+    <font-face-src>
+      <font-face-name name="Super Sans Bold"/>
+    </font-face-src>
+  </font-face>
+  <missing-glyph><path d="M0,0h200v200h-200z"/></missing-glyph>
+  <glyph unicode="!" horiz-adv-x="300"><!-- Outline of exclam. pt. glyph --></glyph>
+  <glyph unicode="@"><!-- Outline of @ glyph --></glyph>
+  <!-- more glyphs -->
+</font>
+
+

まずは {{ SVGElement("font") }} 要素から始まります。これは id 要素を持っており、それは URI を通してフォントを参照する (後述) ために必要です。horiz-adv-x 属性は 1 つのグリフのパス定義に比べて、文字の幅を平均してどのくらい広げるかを定義します。値 1000 は、作業を行うにあたりほどよい値を設定します。また、基本的なグリフボックスのレイアウトをさらに定義するための付随的な属性がいくつかあります。

+

{{ SVGElement("font-face") }} 要素 CSS の @font-face 宣言と対になるものです。これはフォントウェイトやフォントスタイルの分類など、最終的なフォントの基本的なプロパティを定義します。前出の例で最も重要で、最初に定義するものは font-family です。この値は、CSS や SVG の font-family プロパティで参照することができます。font-weight および font-style 属性は、同じ目的を持ちます。その後に続く属性は、フォントレンダリングエンジンへのレンダリング指示になります。例えば、グリフ全体の高さを表すのがアセンダです。

+

font-face 要素の子要素である {{ SVGElement("font-face-src") }} 要素は、CSS の @font-face 宣言の src プロパティに対応します。子要素の {{ SVGElement("font-face-name") }} や {{ SVGElement("font-face-uri") }} を用いて、フォントの宣言で外部のソースを指し示すことができます。前出の例では、レンダラーの手元に "Super Sans Bold" という名前のローカルフォントが存在する場合は、そのフォントを用いるべきであることを示します。

+

{{ SVGElement("font-face-src") }} の後に {{ SVGElement("missing-glyph") }} 要素があります。これはあるグリフがフォント内で見つからず、またフォールバックする仕組みもない場合に何を表示するべきかを定義します。またこの要素では、どのようにグリフを作成するかも示しています。単純にグラフィックの SVG コンテンツを内部に追加するのです。また、{{ SVGElement("filter") }}、{{ SVGElement("a") }}、あるいは {{ SVGElement("script") }} といった、他の SVG 要素もここで用いることができます。ただし単純なグリフを作るなら、path 要素の場合と同じ働きである d 属性を追加することもできます。

+

実際のグリフは {{ SVGElement("glyph") }} 要素で定義します。ここで最も重要な属性は unicode です。この属性は Unicode のコードポイントを定義して、その文字が glyph 要素で示すグリフで表現されます。lang 属性を指定した場合は、さらにグリフを特定の言語 (フォントを使用する側の xml:lang で示されます) のみに限定することができます。繰り返しになりますがグリフを定義するために任意の SVG を用いることができ、またユーザエージェントが対応するすばらしいエフェクトを用いることもできます。

+

font 内で定義することができる要素がさらに 2 つあり、それは {{ SVGElement("hkern") }} と {{ SVGElement("vkern") }} です。それぞれの実体は少なくとも 2 つの文字を参照し、また k 属性はそれらの文字の間の距離をどれだけ縮めるかを定義します。初歩的な例は "A" と "V" であり、レンダラーは "AV" という文字列を、単独の文字が暗に定義する距離よりも間隔を狭くして配置します。

+
<hkern u1="A" u2="V" k="20" />
+
+

{{ 英語版章題("Referencing a font") }}

+

フォントの参照

+

これはとても単純です。これまで説明したようにフォントの宣言をひとまとめに収めた場合は、font-family 属性を用いるだけでよいのです。

+
<font>
+  <font-face font-family="Super Sans" />
+  <!-- and so on -->
+</font>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+
+

ただし、どこでどのようにフォントを定義するかの自由のために、複数の方法を自由に組み合わせてもかまいません。

+

{{ 英語版章題("Option:_Use_CSS_.40font-face") }}

+

オプション: CSS @font-face の利用

+

リモートの (またはリモートでない) フォントの参照に @font-face を用いることができます。

+
<font id="Super_Sans">
+  <!-- and so on -->
+</font>
+
+<style type="text/css">
+@font-face {
+  font-family: "Super Sans";
+  src: url(#Super_Sans);
+}
+</style>
+
+<text font-family="Super Sans">My text uses Super Sans</text>
+
+

{{ 英語版章題("Option: reference a remote font") }}

+

オプション: リモートフォントの参照

+

前に述べた font-face-uri で外部のフォントを参照することができ、高い再利用性を得ることができます。

+
<font>
+  <font-face font-family="Super Sans">
+    <font-face-src>
+      <font-face-uri xlink:href="fonts.svg#Super_Sans" />
+    </font-face-src>
+  </font-face>
+</font>
+
+

{{ PreviousNext("SVG/Tutorial/Filter_effects", "SVG/Tutorial") }}

+

{{ languages( { "en": "en/SVG/Tutorial/SVG_Fonts"} ) }}

diff --git a/files/ja/web/svg/tutorial/svg_image_tag/index.html b/files/ja/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..0728abbcb1 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,41 @@ +--- +title: SVG の image 要素 +slug: Web/SVG/Tutorial/SVG_Image_Tag +tags: + - Beginner + - NeedsBeginnerUpdate + - NeedsContent + - NeedsUpdate + - SVG + - Tutorial + - チュートリアル + - 初心者 +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

+ +

SVG の {{ SVGElement("image") }} 要素は、ラスター画像を SVG オブジェクト内に描画することを可能にします。

+ +

以下の基本的な例では、 {{ SVGAttr("href") }} 属性で参照されている .jpg 画像を SVG オブジェクト内に描画します。

+ +
<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="5cm" height="4cm" version="1.1"
+     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	<image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
+</svg>
+ +

いくつか注意すべき重要事項があります (W3 仕様書に基づくものです)。

+ + + +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}

diff --git a/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..5e39b52643 --- /dev/null +++ b/files/ja/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,100 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +tags: + - Intermediate + - NeedsUpdate + - SVG + - 中級者 +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +

概要

+ +

この記事と関連する例では、インラインの SVG をフォームの背景画像として使用する方法を示します。どのように JavaScript と CSS を利用すれば、通常の HTML を記述するのと同じ方法で画像を扱えるかを紹介しています。

+ +

ソース

+ +

こちらにこの例のソースがあります。

+ +
<html>
+<head>
+<title>XTech SVG Demo</title>
+<style>
+  stop.begin { stop-color:yellow; }
+  stop.end { stop-color:green; }
+  body.invalid stop.end { stop-color:red; }
+  #err { display:none; }
+  body.invalid #err { display:inline; }
+</style>
+<script>
+  function signalError() {
+    document.getElementById('body').setAttribute("class", "invalid");
+  }
+</script>
+</head>
+<body id="body"
+  style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;">
+<form>
+  <fieldset>
+    <legend>HTML Form</legend>
+    <p><label>Enter something:</label>
+    <input type="text">
+    <span id="err">Incorrect value!</span></p>
+    <p><input type="button" value="Activate!" onclick="signalError();"></p>
+  </fieldset>
+</form>
+
+<svg
+  viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"
+  style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;">
+  <linearGradient id="gradient">
+    <stop class="begin" offset="0%"/>
+    <stop class="end" offset="100%"/>
+  </linearGradient>
+  <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" />
+  <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" />
+</svg>
+</body>
+</html>
+
+ +

議論

+ +

ページは主に通常の HTML, CSS, JavaScript を使用しています。唯一興味深いのは、その中に含まれている <svg> 要素です。この要素とその子は SVG 名前空間にあると宣言されています。この要素にはグラデーションと、グラデーションで塗りつぶされた2つの図形が含まれています。グラデーションの色停止点の色は CSS で設定されています。ユーザーがフォームに何か間違ったものを入力すると、スクリプトは <body> に invalid 属性を設定し、スタイル規則はグラデーションの end-stop の色を赤に変更します (別のスタイル規則によりエラーメッセージが表示されます)。

+ +

この方法は、以下のいくつかの点で有利です。

+ + + +
+

DOM メソッドでリンクした画像を組み込まれた SVG 要素に追加するには、href の設定に setAttributeNS を使用してください。次の例のようにします:

+ +
 var img = document.createElementNS("http://www.w3.org/2000/svg", "image");
+img.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "move.png");
+
+
+
+
+ +

詳細

+ +

viewBox 属性は、SVG 画像の座標と相対的な論理座標系を構築します。この場合、画像は 100 対 100 で貼り付けられます。

+ +

preserveAspectRatio 属性は、画像のアスペクト比を保ったまま、中心にそのままのサイズの画像を配置し、縦横ではみ出した部分を除きます。

+ +

style 属性はフォームの背景になる SVG 要素を指します。

+ + + + diff --git a/files/ja/web/svg/tutorial/texts/index.html b/files/ja/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..39446db0ac --- /dev/null +++ b/files/ja/web/svg/tutorial/texts/index.html @@ -0,0 +1,77 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +tags: + - SVG + - 'SVG:Tutorial' +translation_of: Web/SVG/Tutorial/Texts +--- +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+ + + +

SVG でのテキストについて説明するにあたり、これをほとんど別物である 2 つのトピックに区別しなければなりません。ひとつは画像内へのテキストの収容と表示、もう一つは SVG フォントです。後者はこのチュートリアルの後のセクションで説明することにして、ここでは一つ目の部分 "SVG 画像へのテキスト入力" に集中します。

+ + + + +

基礎

+

導入時の例示で見たとおり、text 要素を用いて SVG ドキュメントに任意のテキストを入れることができます。

+
<text x="10" y="10">Hello World!</text>
+
+ +

x および y 属性で、ビューポートのどこにテキストを表示するかを指定します。text-anchor 属性は start、middle、end、inherit の値を持つことができ、x および y 属性で指定した点からどちらの方向にテキストを流すかを指定できます。

+ +

図形の要素と同様に、テキストも fill 属性による着色と、stroke 属性によるストロークの付加ができます。またどちらもグラデーションやパターンを参照することができ、SVG の単純な色つきテキストを CSS 2.1 に比べて非常に強力にします。

+ + + + + + + + +

フォントプロパティの設定

+

テキストにおいて重要なことは、どのフォントで表示するかです。SVG はフォントを選択可能にするための属性のセットを用意しており、その多くは CSS で対応するプロパティに似ています。以下の各プロパティを、属性としてまたは CSS 宣言を通して設定できます: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing および text-decoration

+ + + + +

他のテキスト関連要素

+ + + +

tspan

+

この要素は、長いテキストの一部分をマークアップするために用います。text 要素または他の tspan 要素の子要素にしなければなりません。典型的な用途は、文中の単語 1 つを赤色の太字にすることです。

+
<text>
+  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
+</text>
+
+

tspan 要素は以下のカスタム属性を持ちます:

+

x
包含しているテキストの新たな絶対 X 座標を設定します。これはテキストのデフォルトの現在位置を上書きします。またこの属性は数値のリストを含むことができ、その値は一つずつ、tspan 要素内の各文字に適用されます。

+

dx
テキストの描画開始位置を、既定の現在位置から水平方向に移動させるオフセットの値です。こちらも各文字に適用される値のリストを持つことができ、 従って次第にオフセットは累積していきます。

+

これらと同様に、垂直方向の移動量を示す y 属性や dy 属性もあります。

+

rotate
すべての文字を指定した角度分回します。数値のリストを指定すると、それぞれの文字が指定した値の分だけ回転し、残った文字は直前の文字に指定された値に従って回転します。

+

textLength
文字列の長さを意図的に指定する、ややわかりにくい属性です。これは、レンダリングエンジンが判断した文字列の長さとこの属性で指定した値が一致しない場合に、レンダリングエンジンにグリフの位置を微調整させられることを意味します。

+ + + +

tref

+

tref 要素ではすでに定義しているテキストを参照でき、効率的にその文字列をコピーします。内容物のテキストを引用する要素を指し示すために xlink:href 属性を用いることができます。また引用元とは別に、スタイルの設定や外見の変更を行うことができます。

+
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xlink:href="#example" />
+</text>
+
+ + +

textPath

+

この要素は xlink:href 属性を通して任意のパスを取り出し、そのパスに沿って囲むように文字を並べます。

+ +
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" />
+<text>
+  <textPath xlink:href="#my_path">This text follows a curve.</textPath>
+</text>
+
+
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
diff --git a/files/ja/web/svg/tutorial/tools_for_svg/index.html b/files/ja/web/svg/tutorial/tools_for_svg/index.html new file mode 100644 index 0000000000..e6e166b8d2 --- /dev/null +++ b/files/ja/web/svg/tutorial/tools_for_svg/index.html @@ -0,0 +1,38 @@ +--- +title: SVG のツール +slug: Web/SVG/Tutorial/Tools_for_SVG +translation_of: Web/SVG/Tutorial/Tools_for_SVG +--- +

SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。

+

{{ 英語版章題("Browser support") }}

+

ブラウザのサポート

+

IE9 の登場により、ようやくすべての主要なブラウザが SVG をサポートします: Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome、そして Opera です。WebKit ベースのブラウザをもつモバイルデバイス (たいてい iOS や Android) も SVG をサポートします。古いあるいはより小さなデバイスでは、SVG Tiny をサポートしているかもしれません。

+

Inkscape

+

URL: www.inkscape.org

+

グラフィックス形式について最も重要なツールの一つが、適切な描画プログラムです。Inkscape は最先端のベクタ描画機能を提供し、またオープンソースです。

+

さらに、このソフトは SVG をネイティブフォーマットとしています。Inkscape 固有のデータを保存するときは、カスタムネームスペースによる要素や属性で SVG ファイルを拡張しますが、通常の SVG としてエクスポートすることも選択できます。

+

Adobe Illustrator

+

URL: www.adobe.com/products/illustrator/ (日本語サイト)

+

Adobe は Macromedia を買収するまで、もっとも有名な SVG のプロモーターでした。このときから、Illustrator が SVG を良好にサポートし始めました。しかし、出力された SVG はしばしば癖がみられ、一般に適用するための後処理が必要になります。

+

Apache Batik

+

URL: xmlgraphics.apache.org/batik/

+

Batik は Apache Software Foundation 傘下の、オープンソースツールのセットです。このツールキットは Java で記述され、ほぼ完全な SVG 1.1 のサポートを提供します。また、本来は SVG 1.2 で計画されている機能のいくつかもサポートします。

+

Batik はビューア (Squiggle) や PNG 出力のラスタライザの他に、SVG ファイルを整形するためのプリティプリンタや TrueType フォントから SVG フォントへのコンバータも提供します。

+

Batik は Apache FOP と連携して、SVG を PDF に変換することもできます。

+

{{ 英語版章題("Other renderers") }}

+

他のレンダラー

+

SVG からラスタイメージを作成するためのプロジェクトがいくつかあります。ImageMagick は、もっとも有名なコマンドライン画像処理ツールのひとつです。Gnome ライブラリの rsvg は、Wikipedia が SVG をラスター化するために用いています。

+

Raphael JS

+

URL: raphaeljs.com

+

これは、ブラウザ実装の抽象レイヤーとして働く JavaScript ライブラリです。特に古いバージョンの Internet Explorer は Vector Markup Language (VML) の生成によりサポートされています。なお VML は 2 つある SVG の前身のひとつであり、IE 5.5 から使用できます。

+

Google Docs

+

URL: www.google.com/google-d-s/drawings/

+

Google Docs の図形描画機能は、SVG でエクスポートすることができます。

+

{{ 英語版章題("Science") }}

+

科学

+

よく知られているプロッティングツールである xfig や gnuplot は、SVG でのエクスポートをサポートしています。Web でグラフを描画するための JSXGraph は VML、SVG、および canvas をサポートし、どの技術を用いるかはブラウザの能力に応じて自動的に決定します。

+

GIS (Geographic Information System) アプリケーションで、SVG は保存および描画の形式としてよく用いられます。詳しくは carto.net をご覧ください。

+

{{ 英語版章題("More tools!") }}

+

他のツール

+

W3C は、SVG をサポートするプログラムの一覧を提供しています。

+

{{ languages( { "en": "en/SVG/Tutorial/Tools_for_SVG"} ) }}

-- cgit v1.2.3-54-g00ecf