スケールベクトルグラフィックス – ウィキペディア

Posted on by
before-content-x4

スケーラブルなベクトルグラフィックス （短い SVG 、英語 スケーラブルベクトルグラフィック ）2つの次元ベクトルグラフィックを記述するために、World Wide Webコンソーシアム（W3C）が推奨する仕様です。 XMLに基づくSVGは、2001年9月に最初に公開されました。実際には、関連するすべてのWebブラウザーは、言語範囲の大部分を表すことができます。 [2]

after-content-x4

JPG、PNG、TIFFなどの他のグラフィック形式と比較したベクトルベースのSVG形式の主要な利点は、特にレスポンシブWebデザイン、品質を失うことなくスケーラビリティです。 [3] 、原則として、ピクセルベースの穀物グラフィックスのスケーラビリティが失われたことと比較してください。

アニメーションは、Smilを使用してSVGによってサポートされています。 SVG-DOMの操作は、スクリプト言語を介した埋め込み関数の助けを借りて可能です。

SVGはXMLベースのファイル形式であるため、コンピューターがサポートする翻訳およびその他のさらなる処理用のSVGファイルのコンテンツに簡単にアクセスできます。テキストエディターで直接作成することも、異なる入力を持つプログラムの出力を作成します。たとえば、Gnuplotを参照してください。 SVGエディターは、グラフィックビューで便利な処理を可能にします。

推奨されるファイル拡張子は次のとおりです .svg または、ファイルがGZIで圧縮されている場合、 .svgz 。 mimeタイプはです 画像/svg+xml 。 [4]

1998年、標準化のために2つの言語がWorld Wide Webコンソーシアム（W3C）に提出されました。

ただし、W3Cは2つの言語のいずれも推奨として引き継ぎませんでしたが、それらを統合し、さらに独自の方向で開発しました。
新しい言語の開発の詳細な理由は、とりわけ、作業の最初のドラフトの要件の詳細なリストを見つけることができます。 [5]

after-content-x4

2001年9月4日、W3Cは名前で公開されました スケーラブルベクトルグラフィックス（SVG）1.0仕様 最初の推奨事項（英語 おすすめ ）。 [6] この推奨事項は、IT業界の一部によって標準として受け入れられました。マイクロソフトは長い間従わず、彼のアプリケーションでベクター言語VMLのみをサポートしました。 SVGネイティブをサポートするInternet Explorerの最初のバージョンはバージョン9です。 [7] Internet Explorer 10から、Microsoft VMLはサポートされなくなりました。

すでに2001年8月3日に、SVGのモジュール化のための最初のドラフトドラフトが公開され、SVGの適切な部分がサービスの範囲が低いモバイルデバイスの推奨としてアクセス可能になりました。 [8]

これにより、最終的に3つのプロファイルを備えたバージョン1.1、パフォーマンスが低いデバイスの「Tiny」、「Basic」は、SVG 1.0の全範囲の機能を含む「サービスの範囲がわずかに高いデバイス」の基本的な「基本」につながりました。
既知のエラーからの修正とは別に、SVG Full 1.1は、機能と機能の観点からSVG 1.0と一致します。

2003年1月14日に、SVG 1.1およびSVGモバイルの推奨事項が公開されました。 [9] [十]

これらの推奨事項は改訂されました。モバイルバリアントの最後の処理は2009年から来ます。SVG1.1の場合、2011年8月16日の2回目の編集があります。 [11]

最初に、バージョン1.2でSVG 1.1を拡張することが計画されていました。ただし、これは主にモバイルデバイスのプロバイダーによって含まれていましたが、コンピューター向けのプレゼンテーションプログラムのプロバイダーは、最初にSVG 1.1の実装に焦点を当てました。
その結果、SVG Full 1.2のプロファイルはドラフト作業を超えていませんでした。 [12番目]

ただし、SVG 1.2のモバイルバージョンで作業を続けました。
それまでの間、モバイルデバイスでもサービスの範囲が大幅に増加していたため、モバイル市場のプロファイルに限定されています。
2008年12月22日に、このバージョンの小さなプロファイルの推奨事項が公開されました。 [13] 1.1と比較して、これにより、オーディオ、ビデオ、他のSVGドキュメントの埋め込みの要素、ドキュメントオブジェクトモデルから要素の宣言的削除、ドキュメントオブジェクトモデルからのアクセスのための新しい拡張機能、限られた変換、限られた変換、色の塗装サービス、絵画の可能性、塗装テキストの可能性、自動化された変更、自動化された領域、ブレークの可能性。さらに、このバージョンの曖昧さと不一致を、誤差補正としてSVG 1.1の2番目の処理に主に含まれていた宣言的なアニメーションに関するいくつかのあいまいさと矛盾を改善することができました。

現在の仕様は現在、バージョンSVG Tiny 1.2とSVG 1.1の2番目の編集です。 SVG 2は2011年から機能していますが、これには多数の変更と拡張が含まれるはずです。 [14] [15] 2016年9月15日から1つあります 候補者の推奨 。
2018年8月7日と10月4日に、もっとあります 候補者の推奨 Sが現れました。 [16] それまでの間、バージョン2の多くの計画された革新と要件が再び削除されました。

XMLドキュメントとして、SVGは、これらの要素に割り当てられたさまざまな要素と属性からツリー構造に組み込まれています。 XMLベースの言語を使用した通常のように、SVGファイルはXML宣言から始めることができます。これは、外部スタイルのテンプレートを参照するなどの処理手順に従うことができます。

一方では、ドキュメントタイプの宣言の兆候によって落とされています。 [17] 一方、正しいドキュメントには必要であると考えられています。 [18]

最初からSVGで可能かつ通常は、ファイルサイズを削減するために、内部ドキュメントタイプの宣言のエンティティの形で略語に注意することです。推奨事項には、バージョン1.0の対応する例が含まれています。 [19]

すべてのXMLドキュメントと同様に、ルート要素はこのヘッドエリアに従います。これには、SVGドキュメントの名前があります SVG 。
要素とそのコンテンツをSVG名ルームに明確に割り当て、SVG推奨事項に関係する定義された意味を与えるために、XML属性構造を持つルート要素の名前室はなります xmlns 書き留めた。 

<？xmlバージョン= "1.0" encoding = "utf-8"？ >  xmlns = 「http://www.w3.org/2000/svg」  xmlns：xlink = 「http://www.w3.org 1999/xlink」  バージョン= 「1.1」  baseprofile = "満杯"  width = 「800mm」  高さ= 「600mm」  viewbox = "-400 -300 800 600" >  </span>ファイルのタイトル<span class = "nt">  説明/テキストコンテンツの代替。

属性を使用 幅 （英語： 広い ） と 身長 （英語： 身長 ）SVG要素の SVG グラフィックのサイズが定義されています。
これらの属性が設定されていない場合、サイズは暗示され、それぞれの属性値に従って 100％ ために 幅 と 身長 これは、利用可能なディスプレイ領域の高さと幅の100％に相当します。属性で ビューボックス ディスプレイ領域に図面レベルのどの領域を表示するかを示すことができます。必要に応じて、この領域がディスプレイ領域に変換されます。属性が指定されていない場合、領域はディスプレイ領域と一致するため、変換はありません。
ディスプレイ領域の著者が著者を認識していないため、の使用 ビューボックス 特に場合は、一般的に推奨されます 幅 と 身長 パーセントで情報はありません。

Table of Contents

座標系と情報 [ 編集 | ソーステキストを編集します ]

ラスターグラフィックとSVGの座標系の比較。ラスターグラフィックは、ベクターグラフィックとしてのSVGのみを許可します。

初期座標系は、図面領域の左上隅に座標起点があります。これは、X軸が右とy軸を下げることを示す内部の無次元座標系です。この座標系は、属性を介して行われます 幅 （幅）と 身長 （高さ）出力の寸法。属性を使用します ビューボックス そして、属性を使用して、ルート要素のほとんどの子孫で 変身 結果として、初期座標系から逸脱する現在の座標系が得られます。
グラフィック内のすべての相対的および絶対長さ情報は、この現在の座標系に関連しています。 [20] SVGのフルバージョンでは、相対的（EMまたはパーセントなど）と絶対情報（メーターや税関など）の両方をSVGのフルバージョンで選択できます。これはスタイルのスタイルのSVGです カスケードスタイルのシート 既知のユニット [21] 利用可能。
対照的に、小さなバージョンのコンテンツでは、無次元の長さのみが使用されます。それだけに 幅 と 身長 フルバージョンと同様に、ルート要素は許可されています。
この手順は、一般的にフルバージョンのSVGドキュメントに役立ちます。これにより、ユニットのエラーが発生しやすい変換が防止されるためです。

ラスターグラフィックス（JPEG、PNG、BMPなど）の整数ピクセル座標とは対照的に、SVG座標はスライドコンマ番号です。一方、ラスターグラフィックスのピクセル情報は、整数と画像の寸法に制限されているため、分解能が限られています。ラスターベースの出力メディアの例では、モニター-a SVG仕様は次のように説明しています （x = '100' y = '200'） 画面全体のピクセルではなく、左上隅（または対応する隣接するピクセルの他のコーナーの1つ）。この例では、SVGドキュメントのスケーリングが適切であることが適切です。

要素 [ 編集 | ソーステキストを編集します ]

SVGにはさまざまなタイプの要素があります。

  • グラフィックプリミティブから構築されたグラフィックプレゼンテーションを備えた要素
  • レンダリングプログラムで利用可能でなければならない特定のフォントのテキスト。
  • 一方では、要素が提示されるだけでなく、他の要素による参照の供給としてもグループ要素
  • テキストの代替品とメタ情報の提供のための要素
  • 色、色の勾配、パターン、マーキング、マスク、フィルターなどの塗装サービスの提供のための要素
  • アニメーションの要素
  • 他の言語構造を記録するための要素（スタイルテンプレート、スクリプト、他の名前からの提示可能なフラグメント））
  • 外部ドキュメントを埋め込むための要素（ベクトルグラフィックスまたはラスターグラフィック）、内部および外部ドキュメントフラグメント
  • フォントの定義とグリフの代替表現の要素

グラフィック要素 [ 編集 | ソーステキストを編集します ]

グラフィックプリミティブの例として、長方形、円、楕円、パス、ポリゴン。パスとポリゴンが満たされています。

SVGのすべてのグラフィック要素は、単純な基本要素に基づいて構築されているため、グラフィックプリミティブが呼ばれています。複雑なオブジェクトは、いくつかのグラフィックプリミティブを組み合わせることで作成できます。すべてのグラフィック要素には、堅実なプロパティ（属性）があります。特に

  • 入力属性エリアの表現を定義します。
  • Stroke-Attribute-Define Framework Lineのプレゼンテーション。
  • 不透明度属性要素の透明性を定義します。
  • マーカー – ラインの端が特別に設計されているかどうかを判断します（矢印、クロスストリークなど）

ほとんどのプロパティは、公式に好まれているCSSを使用してスタイル属性で決定することもできます。

SVGで利用可能なグラフィック要素は、単純化に使用されるパスといくつかの要素です。

道 [ 編集 | ソーステキストを編集します ]

パスは、プレゼンテーションの基本要素です。 SVGで最も強力なグラフィック要素です。他のグラフィック要素によって描画できるものはすべて、パス要素を介して同等に表現できます。ここでは、一連のコマンドで表示されるものを指定できるためです。属性はこれに役立ちます d 。すべてのコマンドは、前のコマンドの最後の位置から始まります。これは、1つ以上の数値（パラメーター、主に座標）に続く文字によって開始されます。大文字は、座標値を絶対に解釈します。これは、現在の図面位置に関連して解釈される小さな文字です。次のコマンドがあります。

コマンド 指定 パラメーター 効果
m へ引っ越す いくつかの座標 仮想ペンを何も描画せずに指定された位置に移動します。 [注1]
l 行 1つ以上の座標カップル 指定された位置に直線を描きます。いくつかの座標はポリゴン列車を引き起こします。
h 水平線 X座標 指定された位置にx軸に平行な直線を描画します。
の 垂直線 y座標 y軸に平行な直線を指定された位置に描画します。
と クローズパス いいえ パスのまっすぐなポイント（最後の移動コマンド）を描き、閉じます。
a （楕円）アーク rx、ry、phi、lf、sf、x、y
DrawingExample.svg 1つのシートを黄色からもう一方のポイントに描く4つの方法：

  • rot：lf = 0、sf = 0
  • 緑：lf = 0、sf = 1
  • Blau：LF = 1、SF = 0
  • シュワルツ：LF = 1、SF = 1

半径でエリペセンアーチを描きます 処方箋 と ry 、軸方向 飛ぶ 位置する バツ ; と 。ここは lf 短い弧を描くべきか長い弧を描くべきかを決定する「長い弓の旗」、そして SF 「スイープフラグ」であり、弓に右の曲率があるか左の曲率があるかを決定します。で rx = ry 円形のアーチです 飛ぶ 意味がありません。 [注2]

Q 二次ベジエ 座標ペアの数だけ 正方形のベジエ曲線、つまり、座標カップルをチェックポイントとして描画します。座標の2番目のカップルは、曲線のエンドポイントです。
t 滑らかな二次ベジエ 1つ以上の座標カップル 正方形のベジエ曲線を描画します。制御点は、現在のエンドポイントで描かれた二次ベジエ曲線の制御点を反映する点です。曲線の終点のみが与えられます。
c 立方体ベジエ 3つの分裂可能な数の座標ペアを介して 立方体のベジエ曲線を描きます。曲線の最初と2番目のチェックポイントとエンドポイントが与えられます。
s 滑らかな立方体ベジエ 座標ペアの数だけ 立方体のベジエ曲線を描くと、最初の制御点は、現在のエンドポイントで描かれた立方体ベジエ曲線の2番目のチェックポイントを反映するポイントです。 2番目のチェックポイントと曲線のエンドポイントのみが与えられます。
r catmull-rom 2つ以上のカップル 現在のポイントからキャットマルROMスプラインを描きます。指定されたポイントは、CやSとは異なり、制御ポイントが使用されない滑らかな曲線に自動的に接続されます。 [注3]
b ベアリング 1つ以上の角度 次のパスデータの方向は、指定された角度を回転させます。角度サイズを程度で検出します。指定されたいくつかの角度の場合、すべての角度の合計からの方向が決定されます。 [注4]
  1. ↑ いくつかの座標ペアの仕様はポリゴン列車を引き起こしますが、これは汚れたプログラミングスタイルと見なされます。なぜなら、すべてのレンダラーがその後のZコマンドのパスを正しく閉じるわけではないからです。
  2. ↑ 危険： たとえば、円形のアーチの直径よりもさらになくなっているため、弓が記載されている現在のポイントから到達できないターゲットポイントが指定されている場合、パーサーによる自動調整が必要ですが、これは常にルールに従って発生するとは限りません。
  3. ↑ SVG 2.0の提案、参照 2015-04-09からのドラフト作業 ただし、次のドラフトドラフトで再び削除されました。
  4. ↑ SVG 2.0の提案、参照 2016-09-015からの推奨候補者 ただし、実装が不足しているため、再度削除されました。

他のグラフィック要素は、一方でより良い使いやすさを確保するために存在しますが、他方では、コンテンツのコンテンツをより明確にするために存在します。なぜなら、ソーステキストの対応するパスの表記は、単純な円、楕円、丸い角のある長方形であるかどうかにかかわらず、一見しては見られないことが多いためです。また、これらの特別な形状を簡単にアニメーション化することができます。パス要素と同様に、それらは描画、満たされ、充填され、クリッピングに使用できます（ – エレメント）。別の例外は、小さなプロファイルがエリペセンアーチを許可しないため、このプロファイルの楕円形の角を持つ円、楕円、長方形が要素を正確に使用することはできないという事実に起因します。 これのために提供される特別な要素で構築されます。 

 d = "M 174.5,126.0 L 175.0,127.5 173.5,128.0 174.5,126.0 Z M 100,100 C 100,200 200,100 200,200 Q 50,150,100,100 L 200,100 Z" "  />
丸 [ 編集 | ソーステキストを編集します ]

要素 中心（CX; Cy）とその半径「R」の位置によって記述される円を定義します。 

 cx = 「125」  cy = 「125」  r = 「75」  />
楕円 [ 編集 | ソーステキストを編集します ]

要素 楕円を定義します。楕円は、中心（CX; Cy）と2つの半分軸半径（Rx; Ry）の位置によって記述されています。 

 cx = 「125」  cy = 「125」  rx = 「75」  ry = 「150」  />

軸のアライメントを変更するには、パドラーまたは変換で作業する必要があります。

矩形 [ 編集 | ソーステキストを編集します ]

要素 幅（幅）の左上隅（x、y）の位置と高さ（高さ）の長方形を定義します。オプションで、Radii（RX、RY）を指定することにより、長方形の角を丸くすることができます。 

 x = 「25」  y = 「25」  width = 「400」  高さ= 「200」  rx = "十"  ry = "十"  />
ライン [ 編集 | ソーステキストを編集します ]

要素 2つのエンドポイント（X1、Y1およびX2、Y2）の座標を介して説明されている単純な直線（ルート）を定義します。 

 x1 = 「50」  y1 = 「50」  x2 = 「200」  y2 = 「200」  />
polygonzug [ 編集 | ソーステキストを編集します ]

要素 ルートでポリゴン列車として接続されているポイントの任意の数を定義します。ポイントは、座標カップルのパラメーターポイントを使用して説明されています。 

 ポイント= 「50,150 50,200 200,200 200,100」  />
ポリゴン [ 編集 | ソーステキストを編集します ]

要素 多様性を定義します。それはポリゴン列車と同様に定義されており、最後のポイントも最初のポイントに接続されているため、閉じたポリゴンが作成されます。

文章 [ 編集 | ソーステキストを編集します ]

要素で テキストはグラフィックに埋め込まれています。テキスト要素は、フォントサイズとフォント、実行方向、単語距離などの属性を介してフォーマットできます。テキストは、 構成されます。

写真 [ 編集 | ソーステキストを編集します ]

要素（ ）位置だけでなく、パス、幅、高さを介して記述されているラスターグラフィックを挿入します。

グループ化 [ 編集 | ソーステキストを編集します ]

これらの要素はすべて、グループ要素によって実行できます（ ）要約する。グループ要素に適用される変換とスタイリングは、要約されたすべての下位要素に適用されます。

また、要素 それに応じて使用するコンテンツのグループ化に適している、
ただし、参照機能も取得できます。

また、要素 ある意味では、グループは使用されますが、その内容は直接描写されませんが、他の要素が参照できる供給として意図されています。

テキストの代替品、アクセシビリティ、アクセシビリティ [ 編集 | ソーステキストを編集します ]

W3Cが推奨するほとんどの形式と同様に、著者にはコンテンツをアクセスできる簡単な方法が与えられているという事実にも特別な強調が付いています。
基礎は、主にテキストの代替案を提供する可能性です。
ドキュメントのグラフィック表現は、このテキストコンテンツに代わるものとして説明することもできます。十分なテキストの代替が欠落している場合、これにより、ドキュメントに関連情報が含まれていないという正式な結論が可能になります。

したがって、コンテンツに関して関連する各SVGドキュメントは、少なくともルート要素の最初の子要素として要素である必要があります もつ。名前が示すように、作品のタイトルは、たとえば短い要約の意味でテキストとして言及されています。タイトルは、外部の議論で作品の識別のみを提供することもできます（これらの作品について議論したい場合は、アーティストによる作品を説明するように）。

の上 要素はできますか 結果。
の内容 グラフィックの実装よりも、その意味と機能の観点から、作品のより詳細な説明です。の内容 単純なテキストにすることもできますが、XHTMLなどの異なるXML形式で構成することもできます。 と 一緒にドキュメントのグラフィックコンテンツに代わるテキストを表します。これは、アクセシビリティとアクセシビリティの機能に関するドキュメントのコアコンテンツであるため、グラフィック表現が表示できない、または表示したくないドキュメントにアクセスすることもできます。グラフィック表現の内容は必ずしも理解しやすいわけではないため、この代替コンテンツはもちろん他の人にとっても非常に役立ちます。
いずれにせよ、このテキストの代替案は、グラフィック表現が表示されない場合にのみ、代替として表示されます。さらに、ユーザーがこれを必要とする場合、テキストの代替案を提示できます。

の上 要素でもあります 主にドキュメントに関するメタ情報を含めることを意図していることに従ってください。
これらのメタ情報は通常、プログラムによって自動的に評価できるように、構造化された方法で注目されます。たとえば、XML形式のRDFまたは要素と用語は、ダブリンコアに従って構造化に適しています。

他のほとんどすべてのSVG要素もできます 、 と 説明された関数を使用すると、この要素の子孫を含む、それらが記載されている要素のテキストの代替情報とメタ情報を形成します。

この概念には、多言語主義、特に要素が何であるかという点で弱点があります 1つの言語でのみ注目することができるルート要素の。
したがって、多言語の作品を使用すると、この要素の内容を作業の言語不変の識別としてのみ考慮し、より多くの構造を持つことができる他の2つの要素の実際の多言語テキストの代替に対応することは理にかなっています。

プレゼンテーションとスタイルのテンプレート [ 編集 | ソーステキストを編集します ]

要素の表現は、プレゼンテーション属性で影響を受けることができます。
たとえば、要素の充填、輪郭ライン、透明性を決定することができます。
プレゼンテーション属性に加えて、次のように同じ名前のプロパティもあります カスケードスタイルのシート （CSS）スタイルテンプレートを使用した代替プレゼンテーションを提供するのに適しています。
プロパティ、したがってスタイルテンプレートは、小さなタイプを対象としていません。
プレゼンテーションの属性と関連するプロパティは、主にXML環境で広まっているスタイルの言語に基づいています XSL と CSS 。 [22] 色だけでなく、色の勾配とパターンも追加の要素を介して使用できます。

（x）HTMLとCSSの組み合わせと同様に、プレゼンテーション属性とプロパティが利用可能であるため、コンテンツと装飾の間の分離を作成できます。
コンテンツの観点から関連する、またはドキュメントを理解するために重要なものとして、これは要素と属性、装飾として、別の言語のスタイルテンプレートを使用した代替プレゼンテーションとして認められています。 CSS 提供されます。

すべてのXML形式と同様に、適切な処理手順を備えた外部スタイルテンプレートを参照できます。
さらに、SVGには特別な要素もあります スタイル スタイルテンプレートに注意することができます。
属性付き スタイル 各要素についてスタイルテンプレートも注意することができます。
の属性値以来 スタイル ただし、属性値としてのかなり高い優先度とスタイルテンプレートは、実際のコンテンツから不十分に分離されています。属性の使用は、コンテンツと装飾の分離の原則に関して避けやすく、不十分に考えられます。

変身 [ 編集 | ソーステキストを編集します ]

各要素と各グループのグループは、多くのアフィナー変換を通じて位置、方向、形状を変更できます。変換は、属性として任意の要素に添付されます。翻訳（平行シフト）、回転、スケーリング、スケーリング、および3×3マトリックスの形での異なる変換の組み合わせが利用可能です。マトリックスは、射影表現のポイントに適用されるため、最後の2種類のイラストを区別することなく、翻訳を使用した2×2マトリックスの形の線形画像の組み合わせを表します。 [23] 変換は必要に応じて組み合わせることができ、それにより、変換行列の乗算の変換の連続が対応します。

直接行列仕様を備えた変換が行われます

transform = "matrix（a b c d e f）"

これは、画像マトリックスの非コンテンツ要素の短い形式です

ここで対応しています：

翻訳um t バツ そしてt と
transform = "translate（t バツ 、t と ）） transform = "matrix（1 0 0 1 t バツ t と ））
ポイント（0.0）による角度αでの回転
transform = "Rotate（α）" transform = "matrix（cos（a）sin（a）-sin（a）cos（a）0 0）"
角度αとの回転ポイント（c バツ c と ） （下記参照）
変換= "回転（α、c バツ 、c と ）） transform = "matrix（cos（a）、sin（a）、-sin（a）、cos（a）、c バツ 、c と ）マトリックス（1,0,0,1、-c バツ 、-c と ））
= transform = "matrix（cos（a）、sin（a）、-sin（a）、 +cos（a）、
（1-COS（a））c バツ + sin（a）c と 、（1-cos（a））c と - 罪（a）c バツ ））
要因の周りのスケーリングs バツ およびs と
transform = "スケール（s バツ 、s と ）） transform = "matrix（s バツ 0 0 s と 0 0） "
X方向の角度αによるスキーム
transform = "skewx（α）" transform = "matrix（1,0、tan（α）、1,0,0）"
角度αでy方向に撃たれます
transform = "skewy（α）" transform = "matrix（1、tan（α）、0,1,0,0）"

マトリックス計算：

図は1つのポイントに作用します p – d。 H.均一な座標における射影表現について – 左を対応する画像マトリックスに乗算することにより。なります p 一 t 延期され、彼の新しい座標は延期されています

スケーリングに似ています s ：

の連続のために t と s この場合に適用されます

としても

最後の表現はSVG zにあります。 B. 

„スケール（s バツ s と ）翻訳（t バツ t と ））

またはとして 

„マトリックス（s バツ 0 0 s と s バツ ・t バツ s と ・t と ））

したがって、SVGの「マトリックス」のチェーンは2回意味します

transform = "matrix（a 初め b 初め c 初め d 初め そうです 初め f 初め ）マトリックス（a 2 b 2 c 2 d 2 そうです 2 f 2 ））
= transform = "a 初め *a 2 +c 初め *b 2 、b 初め *a 2 +d 初め *b 2 、a 初め *c 2 +c 初め *d 2 、b 初め *c 2 +d 初め *d 2 、a 初め *そうです 2 +c 初め *f 2 +と 初め 、b 初め *そうです 2 +d 初め *f 2 +f 初め 「

アニメーション [ 編集 | ソーステキストを編集します ]

SVGのアニメーションのイラスト：5秒間にわたる長方形の変換の同時アニメーション。

SVGには、XMLラベル付け言語の情報を使用して、アニメーションをインタラクティブおよび宣言的、つまりスクリプトなしで実行できる要素があります。
SVGは、スマイルの要素と、独自の名前の部屋でそれを解釈することを引き継ぎます。

笑顔に引き継がれた要素を通して
宣言的なアニメーションを実現できます。
詳細には、推奨事項は、どの特性をアニメーション化できるか、どのような方法で説明できるかを説明しています。
ほとんどの属性とプロパティはアニメーション化でき、グループ化要素または表示可能な要素の位置を奨励する可能性もあります。

時間はミリ秒から時間まで与えられ、異なる方法で区別できます。ほとんどのアニメーション要素では、アニメーションのタイプを定義する強制属性が必要です。その他の基本的なコンポーネントは、時間、アニメーション中の条件（オプション）、アニメーション後の条件、アニメーションが終了後に繰り返されるかどうか、アニメーション効果が累積的であるかどうか、優先度が低い他のアニメーションと記載されている属性値に関して加算的であるかどうかです。などの論理用語 始める （英語： 開始、開始します ）） 終わり （英語： 終わり ） と dur （英語の「期間」： 時間の長さ ） 使用済み。開始、繰り返しなどは、マウスの接触やクリックなどのイベントに応じて、繰り返しにすることもできます。

アニメーション属性またはアニメーションプロパティの選択は、2つの属性によってSVGで決定されます。 属性名 アニメーション化される属性の名前またはアニメーション化されるプロパティを示します。 属性タイプ 属性がアニメーション化されているのか（CSS）プロパティであるかを示します。図解例では、詰め物（ 塗りつぶし 長方形とその変換の – アトリブ）（ 変身 -Attribut）は5秒間奨励されています。
イラスト自体にはアニメーションは含まれていません。最初は長方形が青く塗りつけられ、ねじれていません。5秒後には緑に満たされ、少しオフセットされ、150°でねじれます。指定された属性に応じて、4つの中間ステップの例では、中間状態を慎重に変更し、均等に変更するだけでなく、不均一に変更できます。

グラフィック効果とフィルター [ 編集 | ソーステキストを編集します ]

SVGのぼやけたフィルター。フィルターで右側に左に左に、要素のグループに適用されます。

よく知られているグラフィックフィルターは、デスクトップパブリッシングプログラムから取得されており、演算子と機能がマトリックスの形状を表現するマトリックスの原則に従って機能しています。各単一の画像位置は、定義されたフィルター効果で計算され、次の画像に転送されます。このようにして、画像とグラフィックはさまざまな方法で処理できます。

プログラミング [ 編集 | ソーステキストを編集します ]

小さな1.1プロファイルを除き、SVGはXMLドキュメントオブジェクトモデル（DOM）へのアクセスと、この大聖堂の独自の拡張を提供します。これにより、SVGドキュメントのプレゼンテーションを操作できます。これは、主にECMAScript/JavaScriptなどのスクリプト言語で使用されます。
プレゼンテーション中にそれらを動的に変更して、視聴者にコンテンツへのインタラクティブな代替アクセスを提供します。ただし、DOM表現は、表示する前に操作することもできます。これに応じて、コンテンツの変更を保存できます。

ただし、SVG自体は、特定のスクリプト言語が解釈されることを要求しません。
このため、このようなスクリプトには、ビュー中にコンテンツまたはドキュメントの意味を変更するオプションが正式にありません。アクセシビリティとアクセシビリティに関しては、これは常にドキュメントでスクリプトを使用したい著者が考慮する必要があります。

たとえば、新しいオブジェクトは、要素とその特性に対応する大聖堂を介して生成できます。ドキュメントの大聖堂の表現は、マウスのクリックやマウスの動きなどのユーザー入力に反応したり、アルゴリズム的に完全に生成されたりすることができます。これは、Webアプリケーションで使用できます（グラフィックエディターSVG-Editを比較してください。 [24] Googleドキュメントの図 [25] またはマップアプリケーション [26] ）。

SVG標準は、SVGの操作のためのSVG-DOMを定義します。 [27] グラフィック変換（アフィン画像）など、SVG固有のデータ型と機能を備えたすべてのXML種に対して同じ標準DOMAを拡張します。このインターフェイスは、さまざまなプログラミング言語に標準化されています（標準化されたJavaScriptセクションECMAScript、Java、Perl、Python用 [28] ）。 JavaScriptは、多くの一般的なプレゼンテーションプログラムで大聖堂の操作に使用されます。

例 [ 編集 | ソーステキストを編集します ]

次の例は、単純なベクトルグラフィックを表示するためのSVGドキュメントの使用を示しています。 SVGドキュメントの基本構造とグラフィックプリミティブの使用を示しています ライン 、 rect と ポリゴン 。矢印を表すために使用されるポリゴンも、先端を135°回転させます。

右に表示されるグラフィック変数抵抗器（ポテンショメータの回路画像）は、次のように生成されます。コメントされたソーステキスト： 

<？xmlバージョン= "1.0" encoding = "utf-8"？ >  xmlns = 「http://www.w3.org/2000/svg」  バージョン= 「1.1」  baseprofile = "満杯"  width = 「700px」  高さ= 「400px」  viewbox = "0 0 700 400" >    x1 = 「0」  y1 = 「200」  x2 = 「700」  y2 = 「200」  ストローク= "黒"  ストローク幅= 「20px」 />    x = 「100」  y = 「100」  width = 「500」  高さ= 「200」  fill = "白"  ストローク= "黒"  ストローク幅= 「20px」 />    x1="180" y1="370" x2="500" y2="50" stroke="black" stroke-width="15px"/>
 
  points="585 0 525 25 585 50" transform="rotate(135 525 25)"/>

SVGには、異なる出力デバイスに合わせた3つのプロファイルがあり、それぞれが異なる方法でSVG標準を定義します。あなたは属性を使用してルート要素（SVG）になります ベースプロファイル 与えられた。 [29]

SVT
（ baseprofile = “tiny” ）SVG Tiny 1.1は、非常に限られたモバイルインターネットデバイス（MID）および携帯電話を対象としています。 SVG標準の小さな提出のみを定義します。 SVG Tiny 1.2は、大幅に強力なモバイルデバイスを対象としており、その特性において、SVGフル1.1を超えていることもありますが、バージョン1.1の他の部分もしがみつきます。
SVGB
（ baseprofile = “basic” 、英語の「シンプル、基本」）は、やや強力なMIDSを対象としていますが、SVG標準全体を定義していません。
SVGF
（ baseprofile = “full” 、英語「フル、完全」）は、コンピューター用の出力デバイスとして対象であり、SVGフルで構成されています。

プロファイルを使用すると、低パフォーマンスデバイスが標準に準拠したSVGファイルを使用して動作することもできます。したがって、著者は、機能の限られた範囲を持つ中央コンテンツが賢明に提示されることに努力する必要があるため、使用される完全なプロファイルの追加の可能性は、コンテンツを理解するために不可欠ではありません。
もちろん、プレゼンテーションプログラムは、プログラムでバージョンまたはプロファイルが使用されている場合、プログラムがすべてのコンテンツを正しく表示できない可能性があることをユーザーに警告するために、そのような情報を使用することもできます。

デスクトップ [ 編集 | ソーステキストを編集します ]

一部のデスクトップ環境では、SVGをプログラムシンボル、背景画像、またはマウスポインターの形式として使用しています。レンダリングのための追加のリソース消費は、グラフィックカードなどのハードウェアリソースを増やすことにより補償されます。例示的なプロジェクトは、KDEの酸素プロジェクトとGNOMEのTangoデスクトッププロジェクトです。

編集者 [ 編集 | ソーステキストを編集します ]

SVGファイルを作成および処理できるプログラム [ 編集 | ソーステキストを編集します ]

  • Inkscape-グラフィックおよび描画プログラム（フリーソフトウェア; Linux/Unix、Windows、Mac OS X; SVGはネイティブファイル形式として（Inkscape拡張機能を備えています）））））
  • Adobe Illustrator（独自、Windows、Mac OS）
  • アフィニティデザイナー（Windows、Mac OS、iPad OS） [30]
  • Apache OpenOffice-Natural Import and Export with Stribution（無料オフィスパッケージ）
  • Aphalinaデザイナー [最初に30] – Windows用のベクトルベースのブック指向タブレットアプリ（無料アプリ、アプリ内購入、SVGインポートとエクスポート（購入オプションとしてのエクスポート））
  • CodeMypic [32] – 単純な画像コーディングを学ぶための教訓的なソーステキストエディター [33] （フリーソフトウェア;ブラウザベースのSVG使用、編集用のブラウザ大聖堂、JavaScript）
  • CoroldRaw（独自、Windows、Mac OS）
  • Libreoffice-Natural Import and Export with Stribution（無料のオフィスパッケージ）
  • Microsoft Visio（独自、Windows）
  • フォトリン（独自、Windows、Mac OS）
  • Scribus（フリーソフトウェア; Unix、Linux、Mac OS X、OS/2、Windows）
  • svg-edit [34] -Graphics Editor、OnlineおよびOffline Usable（フリーソフトウェア;ブラウザベースのUSES SVG、ブラウザ大聖堂、編集用のJavaScript）
  • Xara Designer Pro-Graphics and Drawing Program（Windowsの専有）

編集者によって生成されたSVGファイルには、しばしば、部分的に効果のない属性が立体的な繰り返しを持つ不必要な原始的な不必要な多数の要素が含まれているため、2〜100の因子になります。同等の三角形や均一なヒントを持つ房矢印など、特定の対称性を持つ基本的な形式の作成は、グラフィックエディターが迅速にのみ迅速にして、ソースコードで迅速かつ正確に成功することができます また かなり正確です。

SVGファイルを開いて処理できるプログラムは、同じ形式で保存されません [ 編集 | ソーステキストを編集します ]

プレゼンテーションプログラムにおけるSVG解釈 [ 編集 | ソーステキストを編集します ]

SVGは、主にWorld Wide Web向けに設計されています。最新のプレゼンテーションプログラム（SO -Caleded Web Browserを含む）は、それらの大部分を正しく表すことができます。つまり、SVGサプリメントプログラム（ブラウザプラグイン）は必要ありません。ただし、実際に利用可能な機能の範囲は、プレゼンテーションプログラムに大きく依存します。
たとえば、上記のぼやけた断層フィルターは、バージョン10およびアニメーションのインターネットエクスプローラーでは利用できません。一部のプログラムでは、SVGフォントも完全に無視されます。

公式のSVGテストスイートに基づいて、Opera 11.01はSVG 1.1の最高レベルのサポートを達成しました。インターネットエクスプローラー9.0は、2011年の初めに最も互換性のない最も現在のブラウザとして、広範囲にわたるブラウザの中で可能なポイントの95.44％を達成しました。 [35] SVG推奨のテストスイートは、プレゼンテーションプログラムの機能の範囲をテストするのに役立たないことを念頭に置いておく必要がありますが、推奨の特性が実装されて実装できるかどうかに逆です。
したがって、このテストは推奨事項の著者とは独立して作成されておらず、テストの著者の一部は、プレゼンテーションプログラムを開発および提供する企業の従業員でもあります。
したがって、プログラムのスキルの体系的で独立したテストではありません。
したがって、「通常の」ドキュメントが通常多くの機能を使用しているが、ドキュメントでテストされた機能のみを使用するため、「通常の」SVGドキュメントが正しく表示される可能性がどれほど可能であるかを適切に示す必要はありません。重みと使用は、著者による「通常の」ドキュメントの典型的な使用ではなく、特性と実装の複雑さにも依存します。

他のアプローチでは、特定の特性が著者にとって本当に実用的であるかどうかの問題が尋ねられます。 [36] ここでも、公式のテストスイートと同様に、もちろん、どのような深さと他の特性との組み合わせがどのようにテストされ、テストの著者がどのように推奨事項とプレゼンテーションプログラムのプロバイダーが、著者と視聴者の使用可能性に関して信頼できる声明を発表するのかを詳細に詳細に確認することをお勧めします。

たとえば、会社は提供しています Savareseソフトウェア研究 バージョン6から8のインターネットエクスプローラーの拡張。 [37] SVGの開始以来知られていますが、開発されていませんが、Adobe Companyの対応する拡張でもあります。これは、SVGの初期のSVGの提示のための実質的に支配的なプログラムでした。

一部のJavaScriptライブラリ（例：DOJO.GFX、Raphaël、SVG Web）は、JS-Syntaxの画像要素を説明する機会を提供します。 SVGが解釈されない場合、プレゼンテーションプログラムによって解釈されるドキュメントオブジェクトは、この迂回路（VMLまたはフラッシュなど）を介して自動的に生成できます。そうしないと、SVGが直接生成されます。ただし、これらはすべて、SVGが提供するすべてのオプションを使用できるわけではないことを意味します。したがって、ある言語から別の言語に変換する必要はありません。また、使用されるスクリプト言語の解釈が完全にまたはまったく利用可能である必要はないという問題に加えて、使用するライブラリによって変換することもできます。したがって、この方法は、視聴者が選択できる代替手段として、定額としてではなく、より適しています。

Acid3では、SVGを正しく提示できるかどうかをある程度プレゼンテーションプログラムを確認するテストがあります。 Safari（4.0）、Opera（10.0）、およびChrome（4.0）2009年以降のテストでは、2009年以降、Mozilla Firefox（4.0）、インターネットエクスプローラー（10.0）が完全に採点されています。

オフィスソフトウェアの相互運用性 [ 編集 | ソーステキストを編集します ]

SVGの輸入は、Microsoft Office 2016からのものです [38] 可能になり、すべてのプラットフォームで利用可能になりました。 [39] LibreofficeとApache Openofficeは、SVGのインポートもサポートしています。

検索エンジンによる解釈 [ 編集 | ソーステキストを編集します ]

2010年9月以来、Google SVGは画像検索を考慮しています。 [40] JPEG、GIF、PNG、BITMAP、およびWEBPに加えて、SVGはGoogleが考慮した6つのグラフィック形式の1つです。 [41] BingはSVGも考慮に入れています。

検索エンジンについても、テキストの代替品と構造化されたメタ情報は、グラフィックの内容に関する情報を提供できるために、プログラムによって分析できます。
XML形式としてのSVGの可能性は、言及されているラスターグラフィック形式の可能性と同等または優れており、特別なプログラムのない著者が簡単に追加できます。

2002年から2016年まで、会議は年に一度開催されました グラフィカルWeb 講義やワークショップでSVG環境で現在の開発を提示する代わりに。

  • エクセター、イギリス、2016年11月1日から4日 [42]
  • 米国ピッツバーグ、2015年9月23日から26日 [43]
  • 2014年8月26日から30日、イギリスのウィンチェスター [44]
  • サンフランシスコ、米国、21。BIS23。オクトーバー [45]
  • スイス、チューリッヒ、2012年9月11日から14日 [46]
  • 米国ケンブリッジ、2011年10月17日から10月20日 [47]
  • パリ、フランス、2010年8月30日から9月1日 [48]
  • 米国のマウンテンビュー、2009年10月2日から4日 [49]
  • ニュルンベルク、ドイツ、2008年8月26日から28日 [50]
  • 港、東京、日本、2007年9月4日から7日
  • カナダ、ビクトリア、2006年10月16日から19日（珍しい）
  • エンシェデ、オランダ、2005年8月15日から18日
  • 東京、日本、2004年9月7日から10日
  • カナダ、バンクーバー、2003年7月13日から18日
  • スイス、チューリッヒ、2002年7月15日から17日

コモンズ ：hand-svgs – テキストエディターで手動で作成されたグラフィックの収集

  1. ↑ mimage/svg+xmlのmメディアタイプ登録
  2. ↑ HTML5、CSS3などのサポートテーブルを使用できますか。 2021年2月27日にアクセス 。
  3. ↑ ダニエル・ガイザー： レスポンシブWebデザインにおけるSVG形式の利点と短所。 New Time Design Scherrer＆Grasso、30。2015年9月、 2019年1月12日にアクセス 。
  4. ↑ 序章 – SVG 1.1 World Wide Web Consortium、14。Januar2003
  5. ↑ SVG要件。 2021年2月27日にアクセス 。
  6. ↑ スケーラブルベクトルグラフィックス（SVG）1.0仕様。 2021年2月27日にアクセス 。
  7. ↑ ディーン・ハカモビッチ： HTML5、ハードウェアアクセラレーション：最初のIE9プラットフォームプレビューが開発者が利用できます
  8. ↑ SVGモバイル要件
  9. ↑ スケーラブルベクトルグラフィックス（SVG）1.1仕様
  10. ↑ モバイルSVGプロファイル：SVG TINYおよびSVG BASIC
  11. ↑ スケーラブルベクトルグラフィックス（SVG）1.1（第2版）
  12. ↑ スケーラブルベクトルグラフィックス（SVG）フル1.2 （ワーキングドラフト）
  13. ↑ スケーラブルベクトルグラフィックス（SVG）Tiny 1.2仕様
  14. ↑ SVG2計画ページ。 2015年1月30日にアクセス 。
  15. ↑ SVG2要件コミットメント。 2015年7月8日にアクセス 。
  16. ↑ w3.org：スケーラブルベクトルグラフィックス（SVG）2
  17. ↑ SVG 1.1はじめに
  18. ↑ SVG 1.1付録G2
  19. ↑ SVG 1.1の例
  20. ↑ SVG – 座標系、変換、ユニット。 W3C、2003年1月14日、 2009年9月10日にアクセス 。
  21. ↑ SVG基本ユニット。 css4you、20。2006年10月、 2009年9月3日にアクセス 。
  22. ↑ SVG – スタイリング。 W3C、2003年1月14日、 2009年9月10日にアクセス 。
  23. ↑ SVG – 変換属性。 2009年8月28日にアクセス 。
  24. ↑ SVG-Edit Webサイト
  25. ↑ チャートツールの使用の紹介 Google開発者について
  26. ↑ マペタイザー
  27. ↑ バージョン1.1のSVGドキュメントオブジェクトモデルの仕様 そしてその バージョン1.2のSVG Micro Dom
  28. ↑ SVG Tiny 1.2仕様
  29. ↑ モバイルSVGプロファイル：SVG TINYおよびSVG BASIC。 W3C、 2009年8月29日にアクセス 。
  30. ↑ アフィニティデザイナー – グラフィックデザイン用のプロフェッショナルソフトウェア。 2018年2月6日にアクセス （ドイツ人）。
  31. ↑ Aphalinaデザイナー 、アファリナのホームページ
  32. ↑ ケビン・ロイス： 画像離婚。 の： CodeMypic-単純な画像コーディングを学習する教訓的な画像エディター。 ケビン・ロース、2019年3月1日、 2022年5月16日にアクセス 。
  33. ↑ Informatik.schule.de-コンピューターサイエンスレッスンのポータル。 2022年5月16日にアクセス 。
  34. ↑ svg-edit githubで
  35. ↑ SVGテストスイートの結果。 CodedRead.com、2011年3月24日、 2011年3月27日に取得 （英語）。
  36. ↑ デスクトップおよびモバイルブラウザーでのSVGのサポートのための互換性テーブル。 2013年1月20日にアクセス 。
  37. ↑ SSRC SVG：Internet Explorer用のSVGプラグイン。 2021年2月27日にアクセス 。
  38. ↑ Microsoft Docs： 2016年の毎月のチャネル出版物のバージョンに関するノート – オフィスリリースノート。 2021年2月27日にアクセス （ドイツ人）。
  39. ↑ Microsoft Office 365でSVG画像を編集します。 2021年2月27日にアクセス 。
  40. ↑ GoogleインデックスSVGグラフィックス。 の： @-ウェブ。 2. 2010年9月、 2021年2月27日にアクセス 。
  41. ↑ 画像検索のランキング基準。 の： @-ウェブ。 14. 2012年5月、 2021年2月27日にアクセス 。
  42. ↑ ホームページグラフィカルWeb 2016
  43. ↑ ホームページグラフィカルWeb 2015
  44. ↑ ホームページグラフィカルWeb 2014
  45. ↑ ホームページグラフィカルWeb 2013
  46. ↑ ホームページグラフィカルWeb 2012
  47. ↑ ホームページSVGオープン2011
  48. ↑ ホームページSVGオープン2010
  49. ↑ ホームページSVGオープン2009
  50. ↑ ホームページSVGオープン2008

after-content-x4