mdn · potappo · May 23, 2022 · May 21, 2022 · May 21, 2022
@@ -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 ライブラリー)