forked from mdn/translated-content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
37 additions
and
71 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| --- | ||
| <div>{{SVGRef}}</div> | ||
| {{SVGRef}} | ||
|
|
||
| <h2 id="Getting_started_with_svg">SVG を始めましょう</h2> | ||
| ## SVG を始めましょう | ||
|
|
||
| <p class="summary" style="border-top-width: 0; padding-top: 0;"><span class="seoSummary"><strong>Scalable Vector Graphics (SVG)</strong> は、二次元ベースの<a class="external" href="https://ja.wikipedia.org/wiki/ベクタ形式">ベクター形式</a>のための <a href="/ja/docs/Web/XML" title="XML">XML</a> に基づくマークアップ言語です。そのため、どんな大きさでもきれいにレンダリングできる画像を記述するためのテキストベースのオープンなウェブ標準であり、特に他のウェブ標準、例えば <a href="/ja/docs/Web/CSS">CSS</a>, <a href="/ja/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ja/docs/Web/JavaScript">JavaScript</a>, <a href="/ja/docs/Web/SVG/SVG_animation_with_SMIL">SMIL</a> などとうまく機能するように設計されています。 SVG は本質的に、グラフィックに対するもので、テキストに対する <a href="/ja/docs/Web/HTML">HTML</a> のような位置づけです。</span></p> | ||
| **スケーラブルベクターグラフィック (SVG)** は [XML](/ja/docs/Web/XML) ベースのマークアップ言語で、二次元ベースの[ベクターグラフィック](https://en.wikipedia.org/wiki/Vector_graphics)を記述します。 | ||
|
|
||
| <p>SVG 画像と関連する振る舞いは <span class="seoSummary"><a href="/ja/docs/Web/XML">XML</a></span> のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。</p> | ||
| そのため、テキストベースで、どんなサイズでもきれいにレンダリングできる画像を記述するためのオープンなウェブ標準であり、特に [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) のような位置づけの、グラフィックに対するものです。 | ||
|
|
||
| <p>旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。</p> | ||
| SVG 画像と関連する振る舞いは [XML](/ja/docs/Web/XML) のテキストファイルに定義されるので、検索したり、インデックスをつけたり、スクリプトで操作したり、圧縮したりすることができます。加えて、これはあらゆるテキストエディターやドローソフトで作成したり編集したりできることを意味します。 | ||
|
|
||
| <p>SVG は1999年から <a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a> によって開発されています。</p> | ||
| 旧来の {{Glossary("JPEG")}} や {{Glossary("PNG")}} のようなビットマップ画像形式と比較して、 SVG 形式のベクター画像は、品質を損なうことなく任意の大きさでレンダリングすることができ、テキストを更新することで、グラフィックエディターを使用せずに簡単にローカライズすることができます。適切なライブラリーを使用すれば、 SVG ファイルをその場でローカライズすることも可能です。 | ||
|
|
||
| <p><a href="/ja/docs/Web/SVG/Tutorial">SVG教本</a>も参照してください。</p> | ||
| SVG は 1999 年から[ワールドワイドウェブコンソーシアム (W3C)](https://www.w3.org/) によって開発されています。 | ||
|
|
||
| <h2 id="Documentation">ドキュメント</h2> | ||
| [SVG 教本](/ja/docs/Web/SVG/Tutorial)も参照してください。 | ||
|
|
||
| <dl> | ||
| <dt><a href="/ja/docs/Web/SVG/Element" title="SVG/Element">SVG 要素リファレンス</a></dt> | ||
| <dd>各 SVG 要素についての詳細情報です。</dd> | ||
| <dt><a href="/ja/docs/Web/SVG/Attribute" title="SVG/Attribute">SVG 属性リファレンス</a></dt> | ||
| <dd>各 SVG 属性の詳細情報です。</dd> | ||
| <dt><a href="/ja/docs/Web/API/Document_Object_Model#svg_interfaces">SVG DOM インターフェイスリファレンス</a></dt> | ||
| <dd>JavaScript と連携するための SVG DOM API の詳細情報です。</dd> | ||
| <dt><a href="/ja/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML コンテンツへ SVG 効果を適用する</a></dt> | ||
| <dd>SVG は {{Glossary("HTML")}}、{{Glossary("CSS")}} と {{Glossary("JavaScript")}} と連携して動作します。SVG を使用することで、<a href="/ja/docs/Web/SVG/Tutorial/SVG_In_HTML_Introduction">通常の HTML ページや Web アプリケーションを拡張</a>できます。</dd> | ||
| </dl> | ||
| ## ドキュメント | ||
|
|
||
| <h2 id="Community">コミュニティ</h2> | ||
| - [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)することができます。 | ||
|
|
||
| <ul> | ||
| <li>Mozilla のフォーラムを見る... {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> | ||
| </ul> | ||
| ## ツール | ||
|
|
||
| <h2 id="Tools">ツール</h2> | ||
| - [SVG テストスイート](https://github.com/w3c/svgwg/wiki/Testing) | ||
| - [Markup Validator](https://validator.w3.org/#validate_by_input) | ||
|
|
||
| <ul> | ||
| <li><a href="https://github.com/w3c/svgwg/wiki/Testing">SVG テストスイート</a></li> | ||
| <li><a href="https://validator.w3.org/#validate_by_input">Markup Validator</a></li> | ||
| <li>その他のリソース: <a href="/ja/docs/Web/XML">XML</a>, <a href="/ja/docs/Web/CSS">CSS</a>, <a href="/ja/docs/Web/API/Document_Object_Model">DOM</a>, <a href="/ja/docs/Web/API/Canvas_API">Canvas</a></li> | ||
| </ul> | ||
| ## 例 | ||
|
|
||
| <h2 class="Related_Topics" id="Examples">例</h2> | ||
|
|
||
| <ul> | ||
| <li>Google <a href="http://maps.google.com">マップ</a> (経路のオーバーレイ) と <a href="http://docs.google.com">Docs</a> (spreadsheet のグラフ)</li> | ||
| <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG bubble menus</a></li> | ||
| <li><a href="http://jwatt.org/svg/authoring/">SVG 作成のガイドライン</a></li> | ||
| <li><a href="/ja/docs/Web/SVG/SVG_as_an_Image">画像としての SVG</a></li> | ||
| <li><a href="/ja/docs/Web/SVG/SVG_animation_with_SMIL">SMIL を用いた SVG のアニメーション</a></li> | ||
| <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG art gallery</a></li> | ||
| </ul> | ||
|
|
||
| <h3 id="Animation_and_interactions">アニメーションとインタラクション</h3> | ||
|
|
||
| <p>HTML のように、SVG はドキュメントモデル (DOM) およびイベントを持ち、JavaScript からアクセスが可能です。これを利用することで、開発者はリッチなアニメーションやインタラクティブな画像を制作できます。</p> | ||
|
|
||
| <ul> | ||
| <li><a href="http://svg-wow.org/">svg-wow.org</a> に掲載されている、見て楽しむ SVG</li> | ||
| <li>Firefox の拡張機能 (<a href="http://schepers.cc/grafox/">Grafox</a>) は、{{Glossary("SMIL")}} アニメーションサポートのサブセットを追加します</li> | ||
| <li>インタラクティブな<a href="http://demo.huihoo.com/amplesdk/examples/applications/svgalbum/index.html">写真</a>の操作</li> | ||
| <li>SVG の <code>foreignObject</code> の利用による <a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML transformations</a></li> | ||
| </ul> | ||
|
|
||
| <h3 id="Mapping_charting_games_3D_experiments">地図、グラフ、ゲームおよび 3D の実験</h3> | ||
|
|
||
| <p>SVG をほんの少し利用するだけでも、ウェブコンテンツを格段に向上させることができます。以下に挙げるのは、SVG を本格的に使用した例です。</p> | ||
|
|
||
| <ul> | ||
| <li><a href="https://web.archive.org/web/20131019072450/http://www.treebuilder.de/svg/connect4.svg" title="元リンク先が要認証となったので、アーカイブへのリンクを示します。">Connect 4</a></li> | ||
| <li><a href="http://jvectormap.com/">jVectorMap</a> (データ視覚化用の双方向マップ)</li> | ||
| <li><a href="http://jointjs.com">JointJS</a> (JavaScript ダイアグラムライブラリ)</li> | ||
| <li><a href="https://d3js.org">D3</a> (HTML、 SVG、 CSS を視覚化する JavaScript ライブラリ)</li> | ||
| </ul> | ||
| - [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 ライブラリー) |