SVG ファイルとは何ですか?

SVG ファイルは、XML ベースのテキスト形式を使用して画像の外観を記述するスカラー ベクター グラフィックス ファイルです。スケーラブルという言葉は、品質を損なうことなく SVG をさまざまなサイズにスケーリングできるという事実を指します。このようなファイルのテキストベースの説明により、解像度に依存しなくなります。これは、スケーラビリティを実現するために Web サイトを構築し、グラフィックを印刷するために最も使用される形式の 1 つです。ただし、この形式は 2 次元グラフィックスにのみ使用できます。 SVG ファイルは、Chrome、Internet Explorer、Firefox、Safari など、最新のほぼすべてのブラウザーで表示/開くことができます。

簡単な歴史

SVG 仕様は、1999 年以来、World Wide Web Consortium (W3C) によってオープン スタンダードとして利用可能です。これより前に、1998 年まで、6 つの異なる形式の同様のファイル形式仕様が W3C に提出されました。2011 年に仕様に更新が適用され、バージョン 1.1 になりました。 . 2016 年に、SVG 1.1 の機能に加えて機能を含む新しいバージョンとして SVG 2 が公開されました。

ファイル形式の仕様

SVG ドキュメント オブジェクト モデル (DOM) は、仕様の特定のセクションに対応するすべての仕様とインターフェイスの基礎を築きます。 SVG ビューアは、W3C 仕様全体で定義されている SVG DOM インターフェイスを実装する必要があります。その DOM は、さまざまなデータ型と要素のいくつかのインターフェイスを公開します。

SVG シェイプ

SVG には、開発者が使用できる定義済みの形状要素がいくつかあります。

  • 長方形
  • サークル
  • 楕円
  • ライン *ポリライン
  • ポリゴン
  • 道

これらの形状と仕様に基づいて、SVG の機能領域は次のようになります。

パス - パスは、単純な形状と複合形状の輪郭を表すために使用されます。コーディングは、操作の性質を定義するために使用されます。たとえば、M は Move To に使用され、L は Line To に使用され、Z はパスを閉じるために使用されます。

基本的な形状 - 直線パスと一連の接続された直線セグメント (ポリライン) で構成されるパス、および閉じた多角形、円、および楕円を描画できます。長方形と角丸長方形も標準要素です。

テキスト - テキスト表現は、多くの視覚効果をテキストに適用できる XML 文字データとして表現されます。仕様では、双方向テキスト、縦書きテキスト、および曲線パスに沿った文字を処理できます。

ペイント - 図形は、色、グラデーション、またはパターンで塗りつぶしたり、輪郭を描いたりすることができ、不透明にしたり、任意の透明度を持たせたりすることができます。ポリゴンの頂点に表示される矢印や記号などのライン エンド フィーチャは、マーカーで表されます。

色 - SVG 仕様により、直接または塗りつぶし、線、およびその他のプロパティを介して、すべての可視 SVG 要素に色を適用できます。黒または青、16 進表現、10 進数、または RGB 形式のパーセンテージなどを指定するために、さまざまな色分けを使用できます。

グラデーションとパターン - SVG ファイル内の形状は、単色、グラデーション、または繰り返しパターンで塗りつぶしたり輪郭を描いたりできます。

フィルター効果 - 実際には、特定のソース ベクター グラフィックに適用されて変更された結果を生成する一連のグラフィック操作です。

対話性 - ユーザーは、フォーカスの変更、マウス クリック、画像のスクロールまたはズームにより、SVG ファイルを操作できます。対話機能により、前述のように、SVG 画像をさまざまな方法でユーザーと対話させることができます。

リンク - SVG 画像に他のドキュメントへのハイパーリンクを設定することができます。これは、XML Linking Language または XLink を介して実現されます。これにより、特定の領域をズームイン/ズームアウトしたり、ビューを特定の要素に制限したりするために使用される特定のビューステートを作成できます。

スクリプティング - HTML と同様に、SVG ドキュメントのすべての側面にアクセスして、スクリプトを使用して操作できます。 SVG DOM オブジェクトは、SVG 要素と属性を使用してこれを実現するためのガイダンスを提供します。スクリプトは「script」タグ要素で囲まれ、必要に応じてポインター、キーボード、またはドキュメント イベントに応答して実行できます。

アニメーション - DOM 要素、とSVG コンテンツのアニメーションを含めることができます。もちろん、これはスクリプトと組み込みタイマーを使用しないと実現できません。これらのアニメーションは連続することができ、ユーザー イベントに応答しながら、ループや繰り返しに配置することができます。

フォント - SVG のテキストは、システム フォントなどの外部フォント ファイルを参照できます。そのようなフォントがない場合、SVG のテキストは出力にレンダリングされません。これは、必要なグリフをフォントなどのファイルに組み込むことで克服できます。エレメント。

例

次の行は、SVG スクリプトを使用して円を表す方法を示しています。

<html>
<body>

<h1>My first SVG</h1>

<svg width#"100" height#"100">
  <circle cx#"50" cy#"50" r#"40" stroke#"green" stroke-width#"4" fill#"yellow" />
</svg>

</body>
</html>

次のコード行は、テキストを SVG にレンダリングするためのブロック。

<svg height#"30" width#"200">
  <text x#"0" y#"15" fill#"red">I love SVG!</text>
</svg>

参照

See Also