welcome: please sign in
location: "SVG概要"の差分
1と2のリビジョン間の差分
2008-08-21 01:02:50時点のリビジョン1
サイズ: 2894
編集者: masahiko
コメント:
2008-08-21 01:10:05時点のリビジョン2
サイズ: 2777
編集者: masahiko
コメント:
削除された箇所はこのように表示されます。 追加された箇所はこのように表示されます。
行 3: 行 3:
SVGについて

Inkscape を使ってイラストなどの作成を行ってきました。
Inkscape で作成したデータは svg 形式で保存されます。

svgデータはInkscape固有の形式ではなく、ベクトルデータの形式として共通規格が作られています。
svgデータはベクトルデータの形式として共通規格が作られています。<<BR>>
行 11: 行 6:
    http://www.w3.org/ のページ内の左下付近にある SVG をクリック、
    続いてSVG1.1 をクリック(これは英語)、
    Table of Contents のすぐ上にある translation のリンクをクリック、
    http://www.w3.org/ のページ内の左下付近にある SVG をクリック、<<BR>>
    続いてSVG1.1 をクリック(これは英語)、<<BR>>
    Table of Contents のすぐ上にある translation のリンクをクリック、<<BR>>
行 16: 行 11:
SVGとは ----
=== SVGとは ===
行 21: 行 17:
図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く
文字も同様
拡大しても粗くならない
修正しやすい(ビットマップと比べて)
再利用しやすい(ビットマップと比べて)
 . 図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く
 . 文字も同様
 . 拡大しても粗くならない
 . 修正しやすい(ビットマップと比べて)
 . 再利用しやすい(ビットマップと比べて)
行 27: 行 23:
アニメーションやスクリプトを使った動きのある絵を作ることもできます。 アニメーションやスクリプトを使った動きのある絵を作ることもできます。<<BR>>
行 30: 行 26:
SVGデータ ----
=== SVGデータ ===
行 37: 行 34:
{{{
行 43: 行 41:
}}}
行 49: 行 48:
SVGを表示できるブラウザ ----
===
SVGを表示できるブラウザ ===
行 51: 行 51:
1) Opera 1) Opera
行 55: 行 55:
2) FireFox 2) !FireFox
行 59: 行 59:
3) IE 3) IE

SVG概要

svgデータはベクトルデータの形式として共通規格が作られています。
規格はW3Cのページ http://www.w3.org/ を参照してください。

  • http://www.w3.org/ のページ内の左下付近にある SVG をクリック、
    続いてSVG1.1 をクリック(これは英語)、
    Table of Contents のすぐ上にある translation のリンクをクリック、
    下の方にSVG1.1 仕様の日本語版があります。


SVGとは

SVGはScalable Vector Graphicsの略です。

ベクトルグラフィックスには次のような特徴があります。

  • 図形の情報を座標などで指定する、例えば(1,2)から(5,4)に直線を引く
  • 文字も同様
  • 拡大しても粗くならない
  • 修正しやすい(ビットマップと比べて)
  • 再利用しやすい(ビットマップと比べて)

アニメーションやスクリプトを使った動きのある絵を作ることもできます。
インタラクティブな動作も可能です。


SVGデータ

データはテキストデータです。 XMLで記述されます。

たとえば長方形を2つ描くSVGはこんなデータになります。

<?xml version="1.0" standalone="no"?>
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<rect x="0.5cm" y="0.5cm" width="2cm" height="1cm"/>
<rect x="0.5cm" y="2cm" width="1cm" height="1.5cm"/>
</svg>

テキストエディタを使って編集できます。

文字コードとしてはUTF-8を使うことを薦めます。 メモ帳では扱えません。テラパッドなどを使いましょう。


SVGを表示できるブラウザ

1) Opera

PDAや携帯端末のブラウザとして有名ですが、Windows用もあります。動作が軽快です。SVGのすべての機能に対応しているわけではありません。

2) FireFox

Mozillaチームが開発(配布)しているWebブラウザです。バージョン1.5以降ではSVGの表示ができます。アニメーションなどいくつかの機能には対応していません。

3) IE

IE単独では表示できません。プラグインが必要です。 アドビ社で作成(配布)しているSVG Viewerをインストールすると表示できるようになります。 機能は最も充実しています。IEのActiveXの機能を使っていて、起動のたびにセキュリティの警告が出ます。

SVG ViewerをインストールするとSVGファイルをダブルクリックしたときにIEが起動し、Inkscapeが起動しないかもしれません。

SVG概要 (最終更新日時 2013-01-16 02:33:52 更新者 masahiko)