diff --git a/files/ja/web/svg/index.html b/files/ja/web/svg/index.html deleted file mode 100644 index eb45a8b82f9ecd..00000000000000 --- a/files/ja/web/svg/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: 'SVG: Scalable Vector Graphics' -slug: Web/SVG -tags: - - 2D Graphics - - Graphics - - Icons - - Images - - Reference - - Responsive Design - - SVG - - Scalable Graphics - - Scalable Images - - Vector Graphics - - Web - - l10n:priority -translation_of: Web/SVG ---- -
{{SVGRef}}
- -

SVG を始めましょう

- -

Scalable Vector Graphics (SVG) は、二次元ベースのベクター形式のための XML に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば CSS, DOM, JavaScript, SMIL などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する HTML のような位置づけです。

- -

SVG 画像と関連する振る舞いは XML のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。

- -

旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。

- -

SVG は1999年から World Wide Web Consortium (W3C) によって開発されています。

- -

SVG教本も参照してください。

- -

ドキュメント

- -
-
SVG 要素リファレンス
-
各 SVG 要素についての詳細情報です。
-
SVG 属性リファレンス
-
各 SVG 属性の詳細情報です。
-
SVG DOM インターフェイスリファレンス
-
JavaScript と連携するための SVG DOM API の詳細情報です。
-
HTML コンテンツへ SVG 効果を適用する
-
SVG は {{Glossary("HTML")}}、{{Glossary("CSS")}} と {{Glossary("JavaScript")}} と連携して動作します。SVG を使用することで、通常の HTML ページや Web アプリケーションを拡張できます。
-
- -

コミュニティ

- - - -

ツール

- - - - - - - -

アニメーションとインタラクション

- -

HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からアクセスが可能です。これを利用することで、開発者はリッチなアニメーションやインタラクティブな画像を制作できます。

- - - -

地図、グラフ、ゲームおよび 3D の実験

- -

SVG をほんの少し利用するだけでも、ウェブコンテンツを格段に向上させることができます。以下に挙げるのは、SVG を本格的に使用した例です。

- - diff --git a/files/ja/web/svg/index.md b/files/ja/web/svg/index.md new file mode 100644 index 00000000000000..cfc1c7cbe39c17 --- /dev/null +++ b/files/ja/web/svg/index.md @@ -0,0 +1,57 @@ +--- +title: 'SVG: スケーラブルベクターグラフィック' +slug: Web/SVG +tags: + - 二次元グラフィック + - グラフィック + - アイコン + - 画像 + - リファレンス + - レスポンシブデザイン + - SVG + - 拡大縮小可能なグラフィック + - 拡大縮小可能な画像 + - ベクターグラフィック + - ウェブ + - l10n:priority +translation_of: Web/SVG +--- +{{SVGRef}} + +## SVG を始めましょう + +**スケーラブルベクターグラフィック (SVG)** は [XML](/ja/docs/Web/XML) ベースのマークアップ言語で、二次元ベースの[ベクターグラフィック](https://en.wikipedia.org/wiki/Vector_graphics)を記述します。 + +そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に [CSS](/ja/docs/Web/CSS)、[DOM](/ja/docs/Web/API/Document_Object_Model)、[JavaScript](/ja/docs/Web/JavaScript)、[SMIL](/ja/docs/Web/SVG/SVG_animation_with_SMIL) を含む他のウェブ標準とうまく動作するように設計されています。 SVG は本質的に、テキストに対する [HTML](/ja/docs/Web/HTML) のような位置づけの、グラフィックに対するものです。 + +SVG 画像と関連する振る舞いは [XML](/ja/docs/Web/XML) のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。 + +旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリーを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。 + +SVG は 1999 年から[ワールドワイドウェブコンソーシアム (W3C)](https://www.w3.org/) によって開発されています。 + +[SVG 教本](/ja/docs/Web/SVG/Tutorial)も参照してください。 + +## ドキュメント + +- [SVG 要素リファレンス](/ja/docs/Web/SVG/Element) + - : 各 SVG 要素についての詳細情報です。 +- [SVG 属性リファレンス](/ja/docs/Web/SVG/Attribute) + - : 各 SVG 属性の詳細情報です。 +- [SVG DOM インターフェイスリファレンス](/ja/docs/Web/API/Document_Object_Model#svg_interfaces) + - : JavaScript と連携するための SVG DOM API の詳細情報です。 +- [HTML コンテンツへ SVG 効果を適用する](/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content) + - : SVG は {{Glossary("HTML")}}、{{Glossary("CSS")}} と {{Glossary("JavaScript")}} と連携して動作します。SVG を使用することで、[通常の HTML ページやウェブアプリケーションを拡張](/ja/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction)することができます。 + +## ツール + +- [SVG テストスイート](https://github.com/w3c/svgwg/wiki/Testing) +- [Markup Validator](https://validator.w3.org/#validate_by_input) + +## 例 + +- [SVG authoring guidelines](https://jwatt.org/svg/authoring/) +- [画像としての SVG](/ja/docs/Web/SVG/SVG_as_an_Image) +- [SMIL を用いた SVG のアニメーション](/ja/docs/Web/SVG/SVG_animation_with_SMIL) +- [SVG art gallery](https://www1.plurib.us/svg_gallery/) +- [D3](https://d3js.org) (HTML, SVG, CSS でデータを可視化する JavaScript ライブラリー)