From 753763bd4752f5e8a31db91c7d04474a41c85cb9 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Thu, 10 Jun 2021 00:14:58 +0900 Subject: Web/SVG/Tutorial/Tools_for_SVG (#1043) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 英語版章題マクロを除去 - 2021/02/20 時点の英語版に対応 --- files/ja/web/svg/tutorial/tools_for_svg/index.html | 88 +++++++++++++++------- 1 file changed, 62 insertions(+), 26 deletions(-) (limited to 'files') diff --git a/files/ja/web/svg/tutorial/tools_for_svg/index.html b/files/ja/web/svg/tutorial/tools_for_svg/index.html index e6e166b8d2..211f85b09f 100644 --- a/files/ja/web/svg/tutorial/tools_for_svg/index.html +++ b/files/ja/web/svg/tutorial/tools_for_svg/index.html @@ -1,38 +1,74 @@ --- title: SVG のツール slug: Web/SVG/Tutorial/Tools_for_SVG +tags: + - Intermediate + - NeedsUpdate + - SVG + - Tools translation_of: Web/SVG/Tutorial/Tools_for_SVG --- +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

+

SVG の内部の基礎を説明しましたので、ここでは SVG ファイルで作業を行うためのツールをいくつか見ていきましょう。

-

{{ 英語版章題("Browser support") }}

-

ブラウザのサポート

-

IE9 の登場により、ようやくすべての主要なブラウザが SVG をサポートします: Internet Explorer 9、Mozilla Firefox、Safari、Google Chrome、そして Opera です。WebKit ベースのブラウザをもつモバイルデバイス (たいてい iOS や Android) も SVG をサポートします。古いあるいはより小さなデバイスでは、SVG Tiny をサポートしているかもしれません。

+ +

ブラウザーの対応

+ +

Internet Explorer 9 により、 IE　9、Mozilla Firefox、Safari、Google Chrome、 Opera といったすべての主要なブラウザーが SVG に対応しています。 WebKit ベースのブラウザーをもつモバイル端末も SVG に対応しています。 古い端末やより小さな端末では、SVG Tiny に対応しているかもしれません。

+

Inkscape

-

URL: www.inkscape.org

-

グラフィックス形式について最も重要なツールの一つが、適切な描画プログラムです。Inkscape は最先端のベクタ描画機能を提供し、またオープンソースです。

-

さらに、このソフトは SVG をネイティブフォーマットとしています。Inkscape 固有のデータを保存するときは、カスタムネームスペースによる要素や属性で SVG ファイルを拡張しますが、通常の SVG としてエクスポートすることも選択できます。

+ +

URL: www.inkscape.org

+ +

グラフィック形式について最も重要なツールの一つが、適切な描画プログラムです。 Inkscape は最先端のベクタ描画機能を提供し、またオープンソースです。

+

さらに、このソフトは SVG をネイティブフォーマットとしています。 Inkscape 固有のデータを保存するときは、カスタムネームスペースによる要素や属性で SVG ファイルを拡張しますが、通常の SVG としてエクスポートすることも選択できます。

+

Adobe Illustrator

-

URL: www.adobe.com/products/illustrator/ (日本語サイト)

-

Adobe は Macromedia を買収するまで、もっとも有名な SVG のプロモーターでした。このときから、Illustrator が SVG を良好にサポートし始めました。しかし、出力された SVG はしばしば癖がみられ、一般に適用するための後処理が必要になります。

+ +

URL: www.adobe.com/products/illustrator/ (日本語サイト)

+ +

Adobe は Macromedia を買収するまで、もっとも有名な SVG の推進者でした。このときから、 Illustrator は SVG を良好に対応し始めました。しかし、出力された SVG にはしばしば癖がみられ、一般に適用するための後処理が必要になります。

+

Apache Batik

-

URL: xmlgraphics.apache.org/batik/

-

Batik は Apache Software Foundation 傘下の、オープンソースツールのセットです。このツールキットは Java で記述され、ほぼ完全な SVG 1.1 のサポートを提供します。また、本来は SVG 1.2 で計画されている機能のいくつかもサポートします。

-

Batik はビューア (Squiggle) や PNG 出力のラスタライザの他に、SVG ファイルを整形するためのプリティプリンタや TrueType フォントから SVG フォントへのコンバータも提供します。

-

Batik は Apache FOP と連携して、SVG を PDF に変換することもできます。

-

{{ 英語版章題("Other renderers") }}

-

他のレンダラー

-

SVG からラスタイメージを作成するためのプロジェクトがいくつかあります。ImageMagick は、もっとも有名なコマンドライン画像処理ツールのひとつです。Gnome ライブラリの rsvg は、Wikipedia が SVG をラスター化するために用いています。

+ +

URL: xmlgraphics.apache.org/batik/

+ +

Batik は Apache Software Foundation 傘下の、オープンソースツールのセットです。このツールキットは Java で記述され、ほぼ完全な SVG 1.1 の対応を提供します。また、本来は SVG 1.2 で計画されている機能のいくつかにも対応しています。

+ +

Batik はビューアー (Squiggle) や PNG 出力のラスタライザーの他に、SVG ファイルを整形するためのプリティプリンターや TrueType フォントから SVG フォントへのコンバーターも提供します。

+ +

Batik は Apache FOP と連携して、SVG を PDF に変換することもできます。

+ +

他のレンダラー

+ +

SVG からラスター画像を作成するためのプロジェクトがいくつかあります。ImageMagick は、もっとも有名なコマンドライン画像処理ツールのひとつです。Gnome ライブラリの rsvg は、 Wikipedia が SVG をラスター化するために用いています。また、 SlimerJS や PhantomJS などのヘッドレスブラウザーを使用すると、ブラウザー上での SVG の表示に近い画像が得られるため、人気があります。

+

Raphael JS

-

URL: raphaeljs.com

-

これは、ブラウザ実装の抽象レイヤーとして働く JavaScript ライブラリです。特に古いバージョンの Internet Explorer は Vector Markup Language (VML) の生成によりサポートされています。なお VML は 2 つある SVG の前身のひとつであり、IE 5.5 から使用できます。

+ +

URL: raphaeljs.com

+ +

これは、ブラウザー実装の抽象レイヤーとして働く JavaScript ライブラリです。特に古いバージョンの Internet Explorer は Vector Markup Language (VML) の生成により対応されています。なお VML は 2 つある SVG の前身のひとつであり、 IE 5.5 から使用できます。

+ +

Snap.svg

+ +

URL: snapsvg.io

+ +

Raphael JS の作者が開発した、より新しい JavaScript の抽象化レイヤーです。 Snap.svg は最近のブラウザー向けに設計されているため、マスキング、クリッピング、パターン、フルグラデーション、グループなどの最新の SVG 機能をサポートしています。 Raphael のような古いブラウザーには対応していません。

+

Google Docs

-

URL: www.google.com/google-d-s/drawings/

+ +

URL: www.google.com/google-d-s/drawings/

+

Google Docs の図形描画機能は、SVG でエクスポートすることができます。

-

{{ 英語版章題("Science") }}

-

科学

-

よく知られているプロッティングツールである xfig や gnuplot は、SVG でのエクスポートをサポートしています。Web でグラフを描画するための JSXGraph は VML、SVG、および canvas をサポートし、どの技術を用いるかはブラウザの能力に応じて自動的に決定します。

-

GIS (Geographic Information System) アプリケーションで、SVG は保存および描画の形式としてよく用いられます。詳しくは carto.net をご覧ください。

-

{{ 英語版章題("More tools!") }}

-

他のツール

-

W3C は、SVG をサポートするプログラムの一覧を提供しています。

-

{{ languages( { "en": "en/SVG/Tutorial/Tools_for_SVG"} ) }}

+ +

科学

+ +

よく知られているプロッティングツールである xfig や gnuplot は、SVG でのエクスポートを対応しています。ウェブでグラフを描画するための JSXGraph は VML、SVG、および canvas を対応し、どの技術を用いるかはブラウザーの能力に応じて自動的に決定します。

+ +

GIS (Geographic Information System) アプリケーションで、SVG は保存および描画の形式としてよく用いられます。詳しくは carto.net をご覧ください。

+ +

他のツール

+ +

W3C は、SVG を対応するプログラムの一覧を提供しています。

+ +

{{ PreviousNext("Web/SVG/Tutorial/SVG_Image_Tag") }}

-- cgit v1.2.3-54-g00ecf