From 29a3fad3704fa1f9d658b4d2e1275d7851ea63da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 22 May 2022 00:44:51 +0900 Subject: [PATCH 1/2] =?UTF-8?q?2022/04/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/{index.html => index.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename files/ja/web/svg/{index.html => index.md} (100%) diff --git a/files/ja/web/svg/index.html b/files/ja/web/svg/index.md similarity index 100% rename from files/ja/web/svg/index.html rename to files/ja/web/svg/index.md From 9dcf95a83ee22fc25476a502c5f622b03ea15593 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 22 May 2022 01:03:36 +0900 Subject: [PATCH 2/2] =?UTF-8?q?2022/04/24=20=E6=99=82=E7=82=B9=E3=81=AE?= =?UTF-8?q?=E8=8B=B1=E8=AA=9E=E7=89=88=E3=81=AB=E5=90=8C=E6=9C=9F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/svg/index.md | 108 +++++++++++++------------------------- 1 file changed, 37 insertions(+), 71 deletions(-) diff --git a/files/ja/web/svg/index.md b/files/ja/web/svg/index.md index eb45a8b82f9ecd..cfc1c7cbe39c17 100644 --- a/files/ja/web/svg/index.md +++ b/files/ja/web/svg/index.md @@ -1,91 +1,57 @@ --- -title: 'SVG: Scalable Vector Graphics' +title: 'SVG: スケーラブルベクターグラフィック' 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}}
+{{SVGRef}} -

SVG を始めましょう

+## SVG を始めましょう -

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

+**スケーラブルベクターグラフィック (SVG)** は [XML](/ja/docs/Web/XML) ベースのマークアップ言語で、二次元ベースの[ベクターグラフィック](https://en.wikipedia.org/wiki/Vector_graphics)を記述します。 -

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

+そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に [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) のような位置づけの、グラフィックに対するものです。 -

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

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

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

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

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

+SVG は 1999 年から[ワールドワイドウェブコンソーシアム (W3C)](https://www.w3.org/) によって開発されています。 -

ドキュメント

+[SVG 教本](/ja/docs/Web/SVG/Tutorial)も参照してください。 -
-
SVG 要素リファレンス
-
各 SVG 要素についての詳細情報です。
-
SVG 属性リファレンス
-
各 SVG 属性の詳細情報です。
-
SVG DOM インターフェイスリファレンス
-
JavaScript と連携するための SVG DOM API の詳細情報です。
-
HTML コンテンツへ SVG 効果を適用する
-
SVG は {{Glossary("HTML")}}、{{Glossary("CSS")}} と {{Glossary("JavaScript")}} と連携して動作します。SVG を使用することで、通常の HTML ページや Web アプリケーションを拡張できます。
-
+## ドキュメント -

コミュニティ

+- [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) - +## 例 - - - - -

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

- -

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

- - - -

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

- -

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

- - +- [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 ライブラリー)