Getting Started

SVG ファイルの種類

SVGファイルは、2つ型の種類があります。 普通のSVGファイルは、SVGマークアップを含むシンプルなテキストファイルです。このファイルの推奨させる拡張子は、".svg"(すべて小文字)です。

アプリケーション(GIS等)でSVGファイルを使うと大きなファイルサイズになる可能性があります。SVGの仕様では、gzipで圧縮されたSVGファイルも許されています。このファイルの推奨される拡張子は".svgz"(すべて小文字)です。不幸にもgzipで圧縮されたSVGファイルをMicrosoft IISからSVGを扱えるクライアントで読み込むには大変な問題があります。そして、Firefox 1.5は、ローカルコンピュータからgzipで圧縮されたSVGファイルを読むことが出来ません。 正しく動いているWebserverで公開する以外にgzipで圧縮されたSVGファイルを使うのは避けてください。(下を見てください)

簡単な例

簡単な例で正しく始めましょう。下のコードを見てください。

<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">

  <rect width="100%" height="100%" fill="white" />

  <rect x="30" y="50" width="240" height="100" fill="red" />
  <circle cx="150" cy="100" r="80" fill="red" />

  <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

</svg>

【訳注: Webサーバにこのサンプルを置いても、表示されませんでした。XML宣言が必要】

これは、下のスクリーンショットを表示するようレンダリングします。

XXX: 解説文は、これです。

• doctypeは、どけておくべきです。なぜなら、SVGのDTDを使ったバリデーションが、SVGのバージョンを特定するメリットより多くの問題を発生させます。SVGでは、XMLの書き方の代わりに、'version'や'baseProfile'属性が使われるべきです。
• SVGは、正しい範囲の名前空間(xmlns属性から)をいつも持つべきです。
• Namespaces Crash Courseに詳細が載っているので見てください。

Webサーバについて

もう、あなたは、基本的なSVGファイルをどのように作成するか知っています。次の段階は、Webサーバにアップロードすることです。とはいってもこの段階には、やりがいがあります。サーバは、SVGファイルに以下のHTTPヘッダーを送るべきです。

Content-Type: image/svg+xml

gzipで圧縮されたSVGファイルには、サーバは、以下のHTTPヘッダーを送るべきです。

Content-Type: image/svg+xml
Content-Encoding: gzip

web-sniffer.netのようなサイトを使ってあなたのサーバが、正しいHTTPヘッダーを送っているか確認できます。あなたのサーバのSVGファイルのURLを入力して送ってきたHTTPヘッダーの内容を見てください。もし、あなたのサーバが上に書かれたヘッダーを送っていないのを見つけたら、サーバ管理者に相談してください。もし、サーバ管理者が、SVGについて正しいサーバの設定が正確にわからない場合、あなた自身が設定をするのも良いかもしれません。単純なパターンならばserver configuration pageの、設定方法が参考に出来ます。

サーバの設定間違いは、SVGの読み込み失敗の理由としてとても一般的です。あなた自身で確認してください。もし、あなたのサーバが、SVGファイルに対して正しいヘッダーを送るよう設定されていない場合、Firefoxは、高い確率でマークアップされたテキストファイルのように表示します。もしくは、文字化けしたテキストのようにか、どのアプリケーションで開くか聞くウインドウを表示します。